Added left-hand side menu.

src/App.module.css

@@ -4,7 +4,33 @@
   overflow: hidden;
 }
 
-.mobileMenu {
+.leftMobileMenu {
+  height: 100vh;
+  width: 0;
+  position: fixed;
+  z-index: 30;
+  top: 0;
+  left: 0;
+  background: white;
+  overflow-x: hidden;
+  transition: 0.5s ease-out;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.leftMenuWrapper {
+  position: absolute;
+  right: 0;
+}
+
+.leftMobileMenu .topNav {
+  display: flex;
+}
+
+.leftMenuWrapper .closeButton {
+  margin: 10px 10px 10px auto;
+}
+
+.rightMobileMenu {
   height: 100vh;
   width: 0;
   position: fixed;
@@ -13,10 +39,15 @@
   right: 0;
   background: white;
   overflow-x: hidden;
-  transition: 0.15s ease-out;
+  transition: 0.5s ease-out;
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
 }
 
+.rightMenuWrapper {
+  position: absolute;
+  left: 0;
+}
+
 /* Large - Landscape Tablets / Desktops */
 /* Medium - Portrait Tablets */
 /* Horizontal layout, vertically scrolling picker and palette content */
@@ -85,14 +116,35 @@
     flex: 1;
   }
 
-  .mobileMenu {
+  .leftMobileMenu {
   }
 
-  .mobileMenu.open {
+  .leftMobileMenu.open {
     width: 80vh;
   }
 
-  .mobileMenu .closeButton {
+  .leftMenuWrapper {
+    width: 80vh;
+  }
+
+  .leftMobileMenu .topNav {
+  }
+
+  .leftMenuWrapper .closeButton {
+  }
+
+  .rightMobileMenu {
+  }
+
+  .rightMobileMenu.open {
+    width: 80vh;
+  }
+
+  .rightMenuWrapper {
+    width: 80vh;
+  }
+
+  .rightMobileMenu .closeButton {
     margin: 10px;
   }
 
@@ -139,7 +191,11 @@
     display: flex;
   }
 
-  .menuButton {
+  .leftMenuButton {
+    margin-right: auto;
+  }
+
+  .rightMenuButton {
     margin-left: auto;
   }
 
@@ -149,14 +205,35 @@
   .mobileBetaZone {
   }
 
-  .mobileMenu {
+  .leftMobileMenu {
   }
 
-  .mobileMenu.open {
+  .leftMobileMenu.open {
     width: 80%;
   }
 
-  .mobileMenu .closeButton {
+  .leftMenuWrapper {
+    width: 80vw;
+  }
+
+  .leftMobileMenu .topNav {
+  }
+
+  .leftMenuWrapper .closeButton {
+  }
+
+  .rightMobileMenu {
+  }
+
+  .rightMobileMenu.open {
+    width: 80%;
+  }
+
+  .rightMenuWrapper {
+    width: 80vw;
+  }
+
+  .rightMobileMenu .closeButton {
     margin: 10px;
   }
 

src/App.tsx

@@ -5,11 +5,19 @@ import ColorValues from "./components/ColorValues/ColorValues";
 import clsx from "clsx";
 
 function App() {
-  const [menuOpen, setMenuOpen] = useState(false);
+  const [rightMenuOpen, setRightMenuOpen] = useState(false);
+  const [leftMenuOpen, setLeftMenuOpen] = useState(false);
 
-  const toggleMenu = () => setMenuOpen(!menuOpen);
+  const toggleRightMenu = () => setRightMenuOpen(!rightMenuOpen);
-  const MenuButton = () => (
+  const toggleLeftMenu = () => setLeftMenuOpen(!leftMenuOpen);
-    <button className={styles.menuButton} onClick={toggleMenu}>
+
+  const RightMenuButton = () => (
+    <button className={styles.rightMenuButton} onClick={toggleRightMenu}>
+      ☰
+    </button>
+  );
+  const LeftMenuButton = () => (
+    <button className={styles.leftMenuButton} onClick={toggleLeftMenu}>
       ☰
     </button>
   );
@@ -18,9 +26,12 @@ function App() {
     <div className={styles.appContainer}>
       <div className={styles.mobileContent}>
         <div className={styles.mobileTopNav}>
-          <MenuButton />
+          <LeftMenuButton />
+          <RightMenuButton />
+        </div>
+        <div className={styles.mobileLeftNav}>
+          <LeftMenuButton />
         </div>
-        <div className={styles.mobileLeftNav}></div>
         <div className={styles.mobileAlphaZone}>
           <div className={styles.tabbedContainer}>
             <div className={clsx(styles.tab, styles.colorPickerContainer)}>
@@ -35,16 +46,39 @@ function App() {
           <div className={styles.paletteEditorContainer}></div>
         </div>
         <div className={styles.mobileRightNav}>
-          <MenuButton />
+          <RightMenuButton />
         </div>
       </div>
 
-      <div className={clsx(styles.mobileMenu, { [styles.open]: menuOpen })}>
+      <div
-        <button className={styles.closeButton} onClick={toggleMenu}>
+        className={clsx(styles.leftMobileMenu, {
+          [styles.open]: leftMenuOpen,
+        })}
+      >
+        <div className={styles.leftMenuWrapper}>
+          <div className={styles.topNav}>
+            <button className={styles.closeButton} onClick={toggleLeftMenu}>
               ×
             </button>
+          </div>
+          <div className={styles.paletteLibraryContainer}>User Info</div>
+        </div>
+      </div>
+
+      <div
+        className={clsx(styles.rightMobileMenu, {
+          [styles.open]: rightMenuOpen,
+        })}
+      >
+        <div className={styles.rightMenuWrapper}>
+          <div className={styles.topNav}>
+            <button className={styles.closeButton} onClick={toggleRightMenu}>
+              ×
+            </button>
+          </div>
           <div className={styles.paletteLibraryContainer}>Palette Library</div>
         </div>
+      </div>
 
       <div className={styles.mainContent}>
         <div className={styles.alphaZone}>