Browse Source

adding nav drawer and styling

logicp 5 years ago
parent
commit
130ccc62b2
2 changed files with 17 additions and 93 deletions
  1. 4 0
      src/App.css
  2. 13 93
      src/Drawer.js

+ 4 - 0
src/App.css

@@ -34,3 +34,7 @@
 .band-member-pic {
   max-width: 20em;
 }
+
+.MuiDrawer-paper {
+  background-color: #6aa4ff !important;
+}

+ 13 - 93
src/Drawer.js

@@ -25,7 +25,7 @@ export const LoginIcon = () => {
   );
 };
 
-export const RegisterIcon = () => {
+export const ExampleIcon = () => {
   return (
     <SvgIcon>
       <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
@@ -38,84 +38,6 @@ export const RegisterIcon = () => {
   );
 };
 
-export const TimelineIcon = () => {
-  return (
-    <SvgIcon>
-      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
-        <path
-          fill="#000000"
-          d="M5,2V8H3V2H5M3,22H5V16H3V22M6,12A2,2 0 0,0 4,10A2,2 0 0,0 2,12A2,2 0 0,0 4,14A2,2 0 0,0 6,12M22,7V17A2,2 0 0,1 20,19H11A2,2 0 0,1 9,17V14L7,12L9,10V7A2,2 0 0,1 11,5H20A2,2 0 0,1 22,7Z"
-        />
-      </svg>
-    </SvgIcon>
-  );
-};
-
-export const TimelineIcon2 = () => {
-  return (
-    <SvgIcon>
-      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
-        <path
-          fill="#000000"
-          d="M15,14V11H18V9L22,12.5L18,16V14H15M14,7.7V9H2V7.7L8,4L14,7.7M7,10H9V15H7V10M3,10H5V15H3V10M13,10V12.5L11,14.3V10H13M9.1,16L8.5,16.5L10.2,18H2V16H9.1M17,15V18H14V20L10,16.5L14,13V15H17Z"
-        />
-      </svg>
-    </SvgIcon>
-  );
-};
-
-export const BotIcon = () => {
-  return (
-    <SvgIcon>
-      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
-        <path
-          fill="#000000"
-          d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"
-        />
-      </svg>
-    </SvgIcon>
-  );
-};
-
-export const TransactionIcon = () => {
-  return (
-    <SvgIcon>
-      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
-        <path
-          fill="#000000"
-          d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"
-        />
-      </svg>
-    </SvgIcon>
-  );
-};
-
-export const TrendsIcon = () => {
-  return (
-    <SvgIcon>
-      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
-        <path
-          fill="#000000"
-          d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"
-        />
-      </svg>
-    </SvgIcon>
-  );
-};
-
-export const UserListIcon = () => {
-  return (
-    <SvgIcon>
-      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 24 24">
-        <path
-          fill="#000000"
-          d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"
-        />
-      </svg>
-    </SvgIcon>
-  );
-};
-
 const styles = {
   list: {
     width: 250
@@ -125,20 +47,18 @@ const styles = {
   }
 };
 
-const menuItems =
-  // trx_env === 'LOCAL_DEVELOPMENT' ?
-  [
-    {
-      url: "/",
-      label: "Gallery",
-      icon: <TradeIcon />
-    },
-    {
-      url: "/",
-      label: "Listen",
-      icon: <MusicNoteIcon />
-    }
-  ];
+const menuItems = [
+  {
+    url: "/",
+    label: "Gallery",
+    icon: <TradeIcon />
+  },
+  {
+    url: "/",
+    label: "Listen",
+    icon: <MusicNoteIcon />
+  }
+];
 
 const buildSideMenuItems = menuItems => {
   const children = [];