Improved styling

+Added an icon for the side menu toggle
+Added side menu opening animation
*Refreshed some CSS

public/assets/side-menu.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <g fill="none" stroke="#000" stroke-linecap="round" stroke-width="10">
+  <path d="m20 25h60"/>
+  <path d="m20 50h60"/>
+  <path d="m20 75h60"/>
+ </g>
+</svg>

src/components/App.css

@@ -11,4 +11,14 @@
     flex-direction: row;
     flex-wrap: wrap;
     flex: 1;
+}
+
+.invis-button {
+    display: block;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
+    appearance: none;
 }

src/components/sidemenu/SideMenu.css

@@ -10,4 +10,15 @@
     height: 100%;
     background-color: #111;
     z-index: 2000;
+    width: 15em;
+    transition: transform 0.3s ease-in-out;
+}
+
+.side-menu.closed {
+    transform: translateX(100%);
+}
+
+.layers-menu ul {
+    list-style-type: none;
+    padding-inline-start: 0;
 }

src/components/sidemenu/SideMenu.js

@@ -7,13 +7,11 @@ import SelTrackColorMode from './SelTrackColorMode';
 export default function SideMenu() {
     const { sideMenuOpen } = useContext(MainContext);
 
-    if (!sideMenuOpen) {
-        return null;
-    }
+    const sideMenuClass = sideMenuOpen ? 'side-menu' : 'side-menu closed';
 
     return (
         <div className='side-menu-wrapper'>
-            <div className='side-menu'>
+            <div className={sideMenuClass}>
                 <LayersMenu />
                 <SelTrackColorMode />
             </div>

src/components/toolbar/SideMenuToggle.js

@@ -1,8 +1,9 @@
 import { useContext } from 'react';
 import MainContext from '../../contexts/MainContext';
+import { ReactSVG } from "react-svg";
 
 export default function SideMenuToggle() {
-    const { sideMenuOpen, setSideMenuOpen } = useContext(MainContext);
+    const { setSideMenuOpen } = useContext(MainContext);
 
     const toggleSideMenu = () => {
         setSideMenuOpen((prev) => !prev);
@@ -10,8 +11,10 @@ export default function SideMenuToggle() {
 
     return (
         <div className='side-menu-toggle'>
-            <button onClick={toggleSideMenu}>
-                {sideMenuOpen ? 'Hide Menu' : 'Show Menu'}
+            <button onClick={toggleSideMenu} className='invis-button'>
+                <ReactSVG
+                    src="/assets/side-menu.svg"
+                />
             </button>
         </div>
     );

src/components/toolbar/Toolbar.css

@@ -45,4 +45,19 @@
     background-color: rgb(85, 204, 85);
     opacity: 1;
     animation: fadeOut 1s ease-in-out 2s forwards; /* Start fading out after 2 seconds */
-}
+}
+
+.side-menu-toggle svg {
+    display: block;
+    height: 2rem;
+    width: 2rem;
+}
+
+.side-menu-toggle g {
+    stroke: #aaa;
+}
+
+.side-menu-toggle:hover g {
+    stroke: #fff;
+}
+