menu file

src/components/Sidebar/Sidebar.js

@@ -1,16 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Drawer, IconButton, List } from "@material-ui/core";
-import {
+import { MenuOpen as MenuOpenIcon } from "@material-ui/icons";
-  Home as HomeIcon,
-  NotificationsNone as NotificationsIcon,
-  FormatSize as TypographyIcon,
-  FilterNone as UIElementsIcon,
-  BorderAll as TableIcon,
-  QuestionAnswer as SupportIcon,
-  LibraryBooks as LibraryIcon,
-  HelpOutline as FAQIcon,
-  ArrowBack as ArrowBackIcon
-} from "@material-ui/icons";
 import { useTheme } from "@material-ui/styles";
 import { withRouter } from "react-router-dom";
 import classNames from "classnames";
@@ -20,7 +10,6 @@ import useStyles from "./styles";
 
 // components
 import SidebarLink from "./components/SidebarLink/SidebarLink";
-import Dot from "./components/Dot";
 
 // context
 import {
@@ -29,73 +18,7 @@ import {
   toggleSidebar
 } from "../../context/LayoutContext";
 
-const structure = [
+import menu from "./menu";
-  { id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
-  {
-    id: 1,
-    label: "Typography",
-    link: "/app/typography",
-    icon: <TypographyIcon />
-  },
-  { id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
-  {
-    id: 3,
-    label: "Notifications",
-    link: "/app/notifications",
-    icon: <NotificationsIcon />
-  },
-  {
-    id: 4,
-    label: "UI Elements",
-    link: "/app/ui",
-    icon: <UIElementsIcon />,
-    children: [
-      { label: "Icons", link: "/app/ui/icons" },
-      { label: "Charts", link: "/app/ui/charts" },
-      { label: "Maps", link: "/app/ui/maps" }
-    ]
-  },
-  { id: 5, type: "divider" },
-  { id: 6, type: "title", label: "HELP" },
-  {
-    id: 7,
-    label: "Library",
-    link: "https://flatlogic.com/templates",
-    icon: <LibraryIcon />
-  },
-  {
-    id: 8,
-    label: "Support",
-    link: "https://flatlogic.com/forum",
-    icon: <SupportIcon />
-  },
-  {
-    id: 9,
-    label: "FAQ",
-    link: "https://flatlogic.com/forum",
-    icon: <FAQIcon />
-  },
-  { id: 10, type: "divider" },
-  { id: 11, type: "title", label: "PROJECTS" },
-  {
-    id: 12,
-    label: "My recent",
-    link: "",
-    icon: <Dot size="small" color="warning" />
-  },
-  {
-    id: 13,
-    label: "Starred",
-    link: "",
-    icon: <Dot size="small" color="primary" />
-  },
-  {
-    id: 14,
-    label: "Background",
-    link: "",
-    icon: <Dot size="small" color="secondary" />
-  }
-];
 
 function Sidebar({ location }) {
   var classes = useStyles();
@@ -134,7 +57,7 @@ function Sidebar({ location }) {
       <div className={classes.toolbar} />
       <div className={classes.mobileBackButton}>
         <IconButton onClick={() => toggleSidebar(layoutDispatch)}>
-          <ArrowBackIcon
+          <MenuOpenIcon
             classes={{
               root: classNames(classes.headerIcon, classes.headerIconCollapse)
             }}
@@ -142,7 +65,7 @@ function Sidebar({ location }) {
         </IconButton>
       </div>
       <List className={classes.sidebarList}>
-        {structure.map((link) => (
+        {menu.map((link) => (
           <SidebarLink
             key={link.id}
             location={location}

src/components/Sidebar/menu.js

@@ -0,0 +1,81 @@
+import {
+  Home as HomeIcon,
+  NotificationsNone as NotificationsIcon,
+  FormatSize as TypographyIcon,
+  FilterNone as UIElementsIcon,
+  BorderAll as TableIcon,
+  QuestionAnswer as SupportIcon,
+  LibraryBooks as LibraryIcon,
+  HelpOutline as FAQIcon
+} from "@material-ui/icons";
+import Dot from "./components/Dot";
+
+const menu = [
+  { id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
+  {
+    id: 1,
+    label: "Typography",
+    link: "/app/typography",
+    icon: <TypographyIcon />
+  },
+  { id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
+  {
+    id: 3,
+    label: "Notifications",
+    link: "/app/notifications",
+    icon: <NotificationsIcon />
+  },
+  {
+    id: 4,
+    label: "UI Elements",
+    link: "/app/ui",
+    icon: <UIElementsIcon />,
+    children: [
+      { label: "Icons", link: "/app/ui/icons" },
+      { label: "Charts", link: "/app/ui/charts" },
+      { label: "Maps", link: "/app/ui/maps" }
+    ]
+  },
+  { id: 5, type: "divider" },
+  { id: 6, type: "title", label: "HELP" },
+  {
+    id: 7,
+    label: "Library",
+    link: "https://flatlogic.com/templates",
+    icon: <LibraryIcon />
+  },
+  {
+    id: 8,
+    label: "Support",
+    link: "https://flatlogic.com/forum",
+    icon: <SupportIcon />
+  },
+  {
+    id: 9,
+    label: "FAQ",
+    link: "https://flatlogic.com/forum",
+    icon: <FAQIcon />
+  },
+  { id: 10, type: "divider" },
+  { id: 11, type: "title", label: "PROJECTS" },
+  {
+    id: 12,
+    label: "My recent",
+    link: "",
+    icon: <Dot size="small" color="warning" />
+  },
+  {
+    id: 13,
+    label: "Starred",
+    link: "",
+    icon: <Dot size="small" color="primary" />
+  },
+  {
+    id: 14,
+    label: "Background",
+    link: "",
+    icon: <Dot size="small" color="secondary" />
+  }
+];
+
+export default menu;

src/components/Sidebar/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Sidebar",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Sidebar.js"
-}