Add sidebar. Typography pages

Author: Blari

package.json

@@ -31,13 +31,15 @@
     "formik": "2.2.9",
     "history": "4.10.1",
     "jsonwebtoken": "^8.5.1",
+    "line-awesome": "^1.3.0",
     "moment": "2.29.1",
     "query-string": "7.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
+    "react-swipeable-views": "^0.14.0",
     "react-syntax-highlighter": "^11.0.2",
     "recharts": "^2.1.10",
     "redux": "^4.0.5",

src/components/App.js

@@ -8,12 +8,14 @@ import useStyles from './styles';
 import Layout from './Layout';
 import Documentation from './Documentation/Documentation';
 
+
 // pages
 import Starter from '../pages/starter';
 import Error from '../pages/error';
 import Login from '../pages/login';
 import Verify from '../pages/verify';
 import Reset from '../pages/reset';
+import Profile from '../pages/profile';
 
 // context
 import { useUserState } from '../context/UserContext';
@@ -45,6 +47,7 @@ export default function App() {
                 path='/admin'
                 render={() => <Redirect to='/admin/dashboard' />}
               />
+
               <Route path='/documentation' component={Documentation} />
               <PrivateRoute path='/admin' component={Layout} />
               <PublicRoute path='/starter' component={Starter} />

src/components/Layout/Layout.js

@@ -20,9 +20,15 @@ import { Link } from '../Wrappers';
 import ColorChangeThemePopper from './components/ColorChangeThemePopper';
 
 import EditUser from '../../pages/user/EditUser';
+import AddUser from '../../pages/CRUD/Users/form/UsersForm';
+
 
 // pages
 import Dashboard from '../../pages/dashboard';
+import Profile from '../../pages/profile'
+import TypographyPage from '../../pages/typography'
+import ColorsPage from '../../pages/colors'
+import GridPage from '../../pages/grid'
 import BreadCrumbs from '../../components/BreadCrumbs';
 
 // context
@@ -31,6 +37,9 @@ import { useLayoutState } from '../../context/LayoutContext';
 import UsersFormPage from 'pages/CRUD/Users/form/UsersFormPage';
 import UsersTablePage from 'pages/CRUD/Users/table/UsersTablePage';
 
+//Sidebar structure
+import structure from '../Sidebar/SidebarStructure'
+
 const Redirect = (props) => {
   useEffect(() => window.location.replace(props.url));
   return <span>Redirecting...</span>;
@@ -52,7 +61,7 @@ function Layout(props) {
   return (
     <div className={classes.root}>
       <Header history={props.history} />
-      <Sidebar />
+      <Sidebar structure={structure}/>
       <div
         className={classnames(classes.content, {
           [classes.contentShift]: layoutState.isSidebarOpened,
@@ -62,10 +71,14 @@ function Layout(props) {
         <BreadCrumbs />
         <Switch>
           <Route path='/admin/dashboard' component={Dashboard} />
+          <Route path="/admin/profile" component={Profile} />
           <Route path='/admin/user/edit' component={EditUser} />
-          <Route
-            path={'/admin/api-docs'}
-            exact
+          {/*TypographyPage*/}
+          <Route path="/admin/core/typography" component={TypographyPage} />
+          <Route path="/admin/core/colors" component={ColorsPage} />
+          <Route path="/admin/core/grid" component={GridPage} />
+
+          <Route path={'/admin/api-docs'} exact
             component={(props) => (
               <Redirect
                 url={
@@ -79,7 +92,7 @@ function Layout(props) {
           />
 
           <Route path={'/admin/users'} exact component={UsersTablePage} />
-          <Route path={'/admin/users/new'} exact component={UsersFormPage} />
+          <Route path={'/admin/user/new'} exact component={AddUser} />
           <Route
             path={'/admin/users/:id/edit'}
             exact

src/components/Sidebar/Sidebar.js

@@ -92,75 +92,15 @@ function Sidebar({ location, structure }) {
         className={classes.sidebarList}
         classes={{ padding: classes.padding }}
       >
-        <SidebarLink
-          label='Dashboard'
-          link='/admin/dashboard'
-          location={location}
-          isSidebarOpened={isSidebarOpenedWrapper}
-          icon={<HomeIcon />}
-          toggleDrawer={toggleDrawer(true)}
-        />
-
-        <SidebarLink
-          label='Edit User'
-          link='/admin/user/edit'
-          location={location}
-          isSidebarOpened={isSidebarOpenedWrapper}
-          icon={<ProfileIcon />}
-          toggleDrawer={toggleDrawer(true)}
-        />
-
-        <SidebarLink
-          label='Users'
-          link='/admin/users'
-          location={location}
-          isSidebarOpened={isSidebarOpenedWrapper}
-          icon={<CoreIcon />}
-          toggleDrawer={toggleDrawer(true)}
-        />
-
-        <SidebarLink
-          label='Documentation'
-          link='/documentation'
-          location={location}
-          isSidebarOpened={isSidebarOpenedWrapper}
-          icon={<DocumentationIcon />}
-          toggleDrawer={toggleDrawer(true)}
-          children={[
-            {
-              label: 'Getting Started',
-              link: '/documentation/getting-started',
-              children: [
-                {
-                  label: 'Quick start',
-                  link: '/documentation/getting-started/quick-start',
-                },
-              ],
-            },
-            {
-              label: 'Components',
-              link: '/documentation/components',
-              children: [
-                {
-                  label: 'Typography',
-                  link: '/documentation/components/typography',
-                },
-                {
-                  label: 'Header',
-                  link: '/documentation/components/header',
-                },
-                {
-                  label: 'Sidebar',
-                  link: '/documentation/components/sidebar',
-                },
-                {
-                  label: 'Buttons',
-                  link: '/documentation/components/buttons',
-                },
-              ],
-            },
-          ]}
-        />
+        {structure.map(link => (
+          <SidebarLink
+            key={link.id}
+            location={location}
+            isSidebarOpened={!isPermanent ? !isSidebarOpened : isSidebarOpened}
+            {...link}
+            toggleDrawer={toggleDrawer(true)}
+          />
+        ))}
 
         <SidebarLink
           label='API docs'

src/components/Sidebar/SidebarStructure.js

@@ -25,8 +25,8 @@ import { makeStyles } from '@mui/styles';
 import Dot from './components/Dot';
 
 const structure = [
-  { id: 100, label: 'Profile', link: '/app/profile', icon: <ProfileIcon /> },
-  { id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
+  { id: 100, label: 'Profile', link: '/admin/profile', icon: <ProfileIcon /> },
+  { id: 0, label: 'Dashboard', link: '/admin/dashboard', icon: <HomeIcon /> },
   {
     id: 1,
     label: 'E-commerce',
@@ -59,15 +59,15 @@ const structure = [
     children: [
       {
         label: 'User List',
-        link: '/app/user/list',
+        link: '/admin/users',
       },
       {
         label: 'User Add',
-        link: '/app/user/add',
+        link: '/admin/user/new',
       },
       {
         label: 'User Edit',
-        link: '/app/user/edit',
+        link: '/admin/user/edit',
       },
     ],
   },
@@ -77,6 +77,28 @@ const structure = [
     link: '/documentation',
     icon: <DocumentationIcon />,
   },
+  { id: 4, type: 'divider' },
+  { id: 5, type: 'title', label: 'TEMPLATE' },
+  {
+    id: 6,
+    label: 'Core',
+    link: '/admin/core',
+    icon: <CoreIcon />,
+    children: [
+      {
+        label: 'Typography',
+        link: '/admin/core/typography',
+      },
+      {
+        label: 'Colors',
+        link: '/admin/core/colors',
+      },
+      {
+        label: 'Grid',
+        link: '/admin/core/grid',
+      },
+    ],
+  },
 ];
 
 export default structure;