chore(menu): improve sidebar collapse/expand UX with transitions and overlay on mobile

package.json

@@ -2,7 +2,13 @@
   "name": "stonks",
   "version": "1.0.0",
   "description": "A Google Apps Script webapp for managing investments, built with React and Parcel.",
-  "keywords": ["google-apps-script", "react", "parcel", "finance", "stocks"],
+  "keywords": [
+    "google-apps-script",
+    "react",
+    "parcel",
+    "finance",
+    "stocks"
+  ],
   "author": "Akshay M <akshayknr7@gmail.com>",
   "scripts": {
     "dev": "npm run clean && cp -r src/backend/ ./src/appsscript.json ./dist && NODE_ENV=development parcel src/index.html --host 0.0.0.0 --dist-dir dist -p 8000 ",
@@ -15,17 +21,17 @@
     "push:dev": "npm run build:dev && clasp push --project=.beta-clasp.json",
     "push:beta": "npm run build:beta && clasp push --project=.beta-clasp.json",
     "push:prod": "npm run build:prod && clasp push",
-    "deploy:dev": "npm run push:dev && clasp deploy --project=.beta-clasp.json -d dev/demo -i $DEV_DEPLOYMENT_ID", 
-    "deploy:beta": "npm run push:beta && clasp deploy --project=.beta-clasp.json -d beta -i $BETA_DEPLOYMENT_ID", 
+    "deploy:dev": "npm run push:dev && clasp deploy --project=.beta-clasp.json -d dev/demo -i $DEV_DEPLOYMENT_ID",
+    "deploy:beta": "npm run push:beta && clasp deploy --project=.beta-clasp.json -d beta -i $BETA_DEPLOYMENT_ID",
     "deploy:prod": "npm run push:prod && clasp deploy -d prod -i $PROD_DEPLOYMENT_ID",
     "clean": "rm -rf .parcel-cache && rm -rf dist/*"
   },
   "license": "ISC",
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^5.16.4",
-    "@mui/material": "^5.16.4",
+    "@mui/material": "^5.18.0",
     "@mui/x-data-grid": "^7.9.0",
     "@mui/x-date-pickers": "^7.11.0",
     "dotenv": "^16.4.5",
@@ -52,6 +58,7 @@
     "@types/node": "^20.14.10",
     "nodemon": "^3.1.4",
     "parcel": "^2.12.0",
-    "process": "^0.11.10"
+    "process": "^0.11.10",
+    "rimraf": "^6.0.1"
   }
 }

src/components/Navbar.tsx

@@ -1,4 +1,5 @@
-import LogoIcon from "../../public/logo_light.svg";
+import LogoIcon from "./logo.svg";               // string URL
+import { ReactComponent as Logo } from "./logo.svg";  // React component
 import AddIcon from "../../public/add.svg";
 import RefreshIcon from "../../public/refresh.svg";
 import SettingsIcon from "../../public/settings.svg";
@@ -19,7 +20,7 @@ const Navbar = ({   onRefresh,
                 onShowSettings(false)
         }}>
             <div className="logo-box">
-                <LogoIcon className="logo"/>
+<img src={LogoIcon} className="logo" alt="Logo" />
                 <span>
                     Panam
                 </span>
@@ -36,15 +37,11 @@ const Navbar = ({   onRefresh,
             }
             <div className="icons">
                 <div title="Add Transaction">
-                    <AddIcon className="icon" onClick={()=> setDialogType('addTransaction')}/>
-                </div>
+                    <img src={AddIcon} className="icon" onClick={() => setDialogType('addTransaction')} alt="Add" />                </div>
                 <div title="Refresh data">
-                    <RefreshIcon className="icon" onClick={()=> onRefresh()}/>
-                </div>
+                    <img src={RefreshIcon} className="icon" onClick={() => onRefresh()} alt="Refresh" />                </div>
                 <div id="settings-icon" title="Settings">
-                    <SettingsIcon className="icon" onClick={()=> {
-                        onShowSettings(!showSettings)
-                    }}/>
+                    <img src={SettingsIcon} className="icon" onClick={() => onShowSettings(!showSettings)} alt="Settings" />
                 </div>
             </div>
 

src/styles/components/dialog/addTransaction.scss

@@ -1,4 +1,4 @@
-@import "../../variables";
+@use "../../variables";
 
 .modal{
   padding: 50px;

src/styles/components/grid.scss

@@ -1,5 +1,5 @@
-@import "../variables";
-@import "../responsive";
+@use "../variables";
+@use "../responsive";
 
 .box1{
   overflow: auto;

src/styles/components/loadingOverlay.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables";
 
 .loading-overlay {
   height: 100vh;

src/styles/components/menu.scss

@@ -1,35 +1,45 @@
-@import "../variables";
-@import "../responsive";
+@use "../variables";
+@use "../responsive";
 
 .menu-container {
   width: 250px;
   border-right: 2px solid $soft-bg;
   position: relative;
-  transition: transform 0.2s ease-in-out;
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; // smoother transition
 
-  @include lg{
+  @include lg {
     width: max-content;
   }
 
   @include md {
-    position: absolute;
+    position: fixed;  // fixed to viewport for overlay effect
     top: 0;
+    left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 1000;
     overflow-y: auto;
+    background-color: rgba(0, 0, 0, 0.3); // optional overlay background for focus
+    opacity: 0;
+    pointer-events: none; // prevent interaction when collapsed
   }
 
   &.expand {
-    @include md{
-      transform: translateX(0px);
+    @include md {
+      transform: translateX(0);
       width: fit-content;
+      opacity: 1;
+      pointer-events: auto;
+      background-color: rgba(0, 0, 0, 0.3); // show overlay only when expanded
     }
   }
 
   &.collapse {
-    @include md{
+    @include md {
       transform: translateX(-100vw);
+      opacity: 0;
+      pointer-events: none;
+      background-color: transparent; // no overlay when collapsed
     }
   }
 }
@@ -60,7 +70,7 @@
       padding: 10px;
       border-radius: 5px;
 
-      .listItemTitle{
+      .listItemTitle {
       }
 
       &:hover {
@@ -72,13 +82,13 @@
       background-color: $soft-bg;
     }
 
-    .menu-icon{
+    .menu-icon {
       height: 20px;
 
-      svg{
+      svg {
         height: 100%;
         width: 100%;
       }
     }
   }
-}
+}

src/styles/components/navbar.scss

@@ -1,4 +1,4 @@
-@import "../responsive";
+@use "../responsive";
 
 .navbar {
   width: 100%;

src/styles/main.scss

@@ -1,20 +1,20 @@
-@import "pages/home";
-@import "components/dialog/addTransaction";
-@import "components/dialog/dialog";
-@import "components/menu";
-@import "components/footer";
-@import "components/loadingOverlay";
-@import "components/iconSelector";
-@import "components/navbar";
-@import "pages/instruments";
-@import "components/alertBox";
-@import "components/grid";
-@import "components/settings";
-@import "pages/addInstrument";
-@import "pages/deleteInstrument";
-@import "pages/calculator";
-@import "pages/error";
-@import "variables";
+@use "pages/home";
+@use "components/dialog/addTransaction";
+@use "components/dialog/dialog";
+@use "components/menu";
+@use "components/footer";
+@use "components/loadingOverlay";
+@use "components/iconSelector";
+@use "components/navbar";
+@use "pages/instruments";
+@use "components/alertBox";
+@use "components/grid";
+@use "components/settings";
+@use "pages/addInstrument";
+@use "pages/deleteInstrument";
+@use "pages/calculator";
+@use "pages/error";
+@use "variables";
 
 * {
   margin: 0;

src/styles/pages/home.scss

@@ -1,5 +1,5 @@
-@import "../variables";
-@import "../responsive";
+@use "../variables";
+@use "../responsive";
 
 .home {
   display: grid;

src/styles/pages/instruments.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables";
 
 .title-box{
   display: flex;