feat: implement full mobile responsiveness for header navigation bar and dashboard sidebar drawers

src/App.tsx

@@ -41,6 +41,8 @@ interface ReturnRequest {
 
 export default function App() {
   const [currentPage, setCurrentPage] = useState<Page>('home')
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
   const [activeTab, setActiveTab] = useState<'login' | 'register'>('login')
 
   // Onboarding Status
@@ -1928,7 +1930,8 @@ export default function App() {
         <div className="flex min-h-screen bg-background text-on-background font-sans antialiased">
 
           {/* Sidebar */}
-          <aside className="menu">
+          <> {isSidebarOpen && <div className="sidebar-backdrop" onClick={() => setIsSidebarOpen(false)}></div>} <aside className={`menu ${isSidebarOpen ? 'is-active' : ''}`}>
+
             <div>
               <div className="px-6 mb-12">
                 <h1 className="font-caslon text-2xl font-bold text-primary">Tradhox</h1>
@@ -1995,13 +1998,20 @@ export default function App() {
                 View Store
               </button>
             </div>
-          </aside>
+          </aside> </>
 
           {/* Main Workspace Frame */}
           <main className="workspace-container bg-background">
 
             {/* Top Workspace Header */}
             <header className="dashboard-header">
+              <button 
+                className="menu-toggle-btn text-secondary mr-3"
+                style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+                onClick={() => setIsSidebarOpen(true)}
+              >
+                <span className="material-symbols-outlined">menu</span>
+              </button>
               <div className="search-wrapper">
                 <span className="material-symbols-outlined text-secondary">search</span>
                 <input 

src/index.css

@@ -1446,25 +1446,7 @@ body {
   border-color: var(--primary-container);
 }
 
-.workspace-container {
-  margin-left: 16rem;
-  width: calc(100% - 16rem);
-  min-height: 100vh;
-  box-sizing: border-box;
-}
 
-/* Fix sidebar alignment */
-aside.menu {
-  width: 16rem;
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100vh;
-  background-color: #ffffff;
-  border-right: 1px solid var(--border);
-  z-index: 50;
-  padding: 2rem 1.5rem;
-}
 
 /* Dashboard Layout and Elements */
 aside.menu {
@@ -1934,3 +1916,86 @@ aside.menu {
 .btn-delete:hover {
   background-color: #fce8e6;
 }
+/* Responsive Sidebar & Workspace Container */
+.workspace-container {
+  min-height: 100vh;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+aside.menu {
+  width: 16rem;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  background-color: #ffffff;
+  border-right: 1px solid var(--border);
+  z-index: 50;
+  padding: 2rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+@media (min-width: 1024px) {
+  .workspace-container {
+    margin-left: 16rem;
+    width: calc(100% - 16rem);
+  }
+  .menu-toggle-btn {
+    display: none !important;
+  }
+}
+
+@media (max-width: 1023px) {
+  .workspace-container {
+    margin-left: 0;
+    width: 100%;
+  }
+  aside.menu {
+    display: none;
+  }
+  aside.menu.is-active {
+    display: flex !important;
+    z-index: 100;
+    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
+  }
+  .sidebar-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 90;
+  }
+}
+
+/* Bulma burger style custom styling */
+.navbar-burger {
+  display: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+@media (max-width: 1023px) {
+  .navbar-burger {
+    display: block;
+  }
+  .navbar-menu.is-flex {
+    display: none !important;
+  }
+  .navbar-menu.is-active {
+    display: block !important;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: #ffffff;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+    padding: 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .navbar-menu.is-active .navbar-item {
+    display: block;
+    padding: 0.75rem 1rem;
+  }
+}