From 4e9f83e4ffbb88b0c335cec4b794c3a7f1e24c8d Mon Sep 17 00:00:00 2001 From: Tanmay Singh <157793653+tanmay-563@users.noreply.github.com> Date: Sun, 19 Oct 2025 15:28:56 +0530 Subject: [PATCH] chore(menu): improve sidebar collapse/expand UX with transitions and overlay on mobile --- package.json | 21 ++++++++---- src/components/Navbar.tsx | 15 ++++---- .../components/dialog/addTransaction.scss | 2 +- src/styles/components/grid.scss | 4 +-- src/styles/components/loadingOverlay.scss | 2 +- src/styles/components/menu.scss | 34 ++++++++++++------- src/styles/components/navbar.scss | 2 +- src/styles/main.scss | 34 +++++++++---------- src/styles/pages/home.scss | 4 +-- src/styles/pages/instruments.scss | 2 +- 10 files changed, 67 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index a3874b0..82a8e86 100644 --- a/package.json +++ b/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 ", "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" } } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 1af4ed2..3ed7ff9 100644 --- a/src/components/Navbar.tsx +++ b/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) }}>
- +Logo Panam @@ -36,15 +37,11 @@ const Navbar = ({ onRefresh, }
- setDialogType('addTransaction')}/> -
+ setDialogType('addTransaction')} alt="Add" />
- onRefresh()}/> -
+ onRefresh()} alt="Refresh" />
- { - onShowSettings(!showSettings) - }}/> + onShowSettings(!showSettings)} alt="Settings" />
diff --git a/src/styles/components/dialog/addTransaction.scss b/src/styles/components/dialog/addTransaction.scss index 735ec32..670be40 100644 --- a/src/styles/components/dialog/addTransaction.scss +++ b/src/styles/components/dialog/addTransaction.scss @@ -1,4 +1,4 @@ -@import "../../variables"; +@use "../../variables"; .modal{ padding: 50px; diff --git a/src/styles/components/grid.scss b/src/styles/components/grid.scss index b5926a4..0900f61 100644 --- a/src/styles/components/grid.scss +++ b/src/styles/components/grid.scss @@ -1,5 +1,5 @@ -@import "../variables"; -@import "../responsive"; +@use "../variables"; +@use "../responsive"; .box1{ overflow: auto; diff --git a/src/styles/components/loadingOverlay.scss b/src/styles/components/loadingOverlay.scss index 73fa057..83252f8 100644 --- a/src/styles/components/loadingOverlay.scss +++ b/src/styles/components/loadingOverlay.scss @@ -1,4 +1,4 @@ -@import "../variables"; +@use "../variables"; .loading-overlay { height: 100vh; diff --git a/src/styles/components/menu.scss b/src/styles/components/menu.scss index 704ee24..651fbf8 100644 --- a/src/styles/components/menu.scss +++ b/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%; } } } -} \ No newline at end of file +} diff --git a/src/styles/components/navbar.scss b/src/styles/components/navbar.scss index f5716cc..e50be8b 100644 --- a/src/styles/components/navbar.scss +++ b/src/styles/components/navbar.scss @@ -1,4 +1,4 @@ -@import "../responsive"; +@use "../responsive"; .navbar { width: 100%; diff --git a/src/styles/main.scss b/src/styles/main.scss index be8b827..f751be5 100644 --- a/src/styles/main.scss +++ b/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; diff --git a/src/styles/pages/home.scss b/src/styles/pages/home.scss index f6d1285..f564299 100644 --- a/src/styles/pages/home.scss +++ b/src/styles/pages/home.scss @@ -1,5 +1,5 @@ -@import "../variables"; -@import "../responsive"; +@use "../variables"; +@use "../responsive"; .home { display: grid; diff --git a/src/styles/pages/instruments.scss b/src/styles/pages/instruments.scss index 4dbd7f5..97a84dc 100644 --- a/src/styles/pages/instruments.scss +++ b/src/styles/pages/instruments.scss @@ -1,4 +1,4 @@ -@import "../variables"; +@use "../variables"; .title-box{ display: flex;