Add WhatsApp multi-user broadcast system

frontend/src/components/layout/AppLayout.jsx

@@ -1,112 +1,97 @@
-import React, { useState, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Outlet, useLocation } from "react-router-dom";
-import { AnimatePresence } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { TopBar } from "./TopBar";
-import { Sidebar } from "./Sidebar";
+import { Sidebar, SIDEBAR_COLLAPSED, SIDEBAR_EXPANDED } from "./Sidebar";
 import { BottomNavigation } from "./BottomNavigation";
 import { useIsMobile } from "../../hooks/useIsMobile";
 import { useGoldPrice } from "../../hooks/useMarketData";
 
-/**
- * AppLayout
- *
- * The single shell that wraps every authenticated page.
- *
- * Desktop:  Fixed sidebar (collapsible) + sticky top bar + scrollable main
- * Mobile:   Sticky top bar + scrollable main + fixed bottom navigation
- *
- * Sidebar width is tracked in state and passed as a CSS variable so the
- * main area can shift without a layout jump.
- */
+const LS_KEY = "tm_sidebar_collapsed";
+const MAIN_TRANSITION = "margin-left 0.3s cubic-bezier(0.4,0,0.2,1)";
+
 export function AppLayout() {
   const isMobile = useIsMobile();
   const { gold } = useGoldPrice();
   const location = useLocation();
 
-  // Sidebar width — 220 expanded, 64 collapsed.
-  // We sync this from Sidebar via a CSS custom property so the main
-  // margin can transition smoothly without prop drilling.
-  const [sidebarWidth, setSidebarWidth] = useState(220);
+  // Collapsed state — persisted in localStorage
+  const [collapsed, setCollapsed] = useState(() => {
+    try { return localStorage.getItem(LS_KEY) === "true"; }
+    catch { return false; }
+  });
 
-  // Listen for sidebar collapse events via a CSS variable observer.
-  // Sidebar manages its own state; we just track the rendered width.
-  useEffect(() => {
-    const root = document.documentElement;
-    root.style.setProperty("--sidebar-width", `${sidebarWidth}px`);
-  }, [sidebarWidth]);
+  // Mobile drawer open state
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((c) => {
+      const next = !c;
+      try { localStorage.setItem(LS_KEY, String(next)); } catch {}
+      return next;
+    });
+  }, []);
 
-  // Reset sidebar observer when isMobile changes
+  // Close mobile drawer on route change
+  useEffect(() => { setMobileOpen(false); }, [location.pathname]);
+
+  // Sync CSS variable for any consumers that read it
   useEffect(() => {
-    if (isMobile) {
-      document.documentElement.style.setProperty("--sidebar-width", "0px");
-    } else {
-      document.documentElement.style.setProperty("--sidebar-width", `${sidebarWidth}px`);
-    }
-  }, [isMobile, sidebarWidth]);
+    const w = isMobile ? 0 : collapsed ? SIDEBAR_COLLAPSED : SIDEBAR_EXPANDED;
+    document.documentElement.style.setProperty("--sidebar-width", `${w}px`);
+  }, [isMobile, collapsed]);
+
+  const sidebarW = isMobile ? 0 : collapsed ? SIDEBAR_COLLAPSED : SIDEBAR_EXPANDED;
 
   return (
-    <div className="app-shell" style={{ minHeight: "100vh", background: "var(--bg-primary)" }}>
-      {/* ── Top bar — always visible ───────────────────────── */}
-      <TopBar gold={gold} isMobile={isMobile} />
+    <div style={{ minHeight: "100vh", background: "var(--bg-primary)" }}>
 
-      {/* ── Sidebar — desktop only ─────────────────────────── */}
-      {!isMobile && (
-        <SidebarWithWidthCallback onWidthChange={setSidebarWidth} />
-      )}
+      {/* Top bar — full width, always on top */}
+      <TopBar
+        gold={gold}
+        isMobile={isMobile}
+        onMenuClick={() => setMobileOpen(true)}
+      />
 
-      {/* ── Main content area ──────────────────────────────── */}
+      {/* Sidebar */}
+      <Sidebar
+        collapsed={collapsed}
+        onToggle={toggleCollapsed}
+        isMobile={isMobile}
+        mobileOpen={mobileOpen}
+        onMobileClose={() => setMobileOpen(false)}
+      />
+
+      {/* Main content */}
       <main
-        className="app-main"
         id="main-content"
         tabIndex={-1}
         role="main"
         style={{
           marginTop: 52,
-          marginLeft: isMobile ? 0 : "var(--sidebar-width, 220px)",
+          marginLeft: sidebarW,
           minHeight: "calc(100vh - 52px)",
           padding: isMobile ? "16px 14px 80px" : "28px 32px 48px",
-          transition: "margin-left 0.22s cubic-bezier(0.16, 1, 0.3, 1)",
+          transition: isMobile ? "none" : MAIN_TRANSITION,
           boxSizing: "border-box",
-          maxWidth: isMobile ? "100%" : "calc(1080px + var(--sidebar-width, 220px))",
+          willChange: "margin-left",
         }}
       >
         <AnimatePresence mode="wait" initial={false}>
-          <Outlet
+          <motion.div
             key={location.pathname}
-            context={{ gold, isMobile }}
-          />
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{    opacity: 0, y: -4 }}
+            transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+          >
+            <Outlet context={{ gold, isMobile }} />
+          </motion.div>
         </AnimatePresence>
       </main>
 
-      {/* ── Bottom navigation — mobile only ────────────────── */}
+      {/* Bottom nav — mobile only */}
       {isMobile && <BottomNavigation />}
     </div>
   );
 }
-
-/**
- * SidebarWithWidthCallback
- *
- * Wraps Sidebar and measures its rendered width via ResizeObserver
- * so AppLayout can update the main margin without prop drilling into Sidebar.
- */
-function SidebarWithWidthCallback({ onWidthChange }) {
-  const ref = React.useRef(null);
-
-  React.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const ro = new ResizeObserver(([entry]) => {
-      onWidthChange(Math.round(entry.contentRect.width));
-    });
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [onWidthChange]);
-
-  return (
-    <div ref={ref} style={{ position: "fixed", top: 52, left: 0, bottom: 0, zIndex: 90 }}>
-      <Sidebar />
-    </div>
-  );
-}

frontend/src/components/layout/Sidebar.jsx

@@ -1,201 +1,336 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { NavLink } from "react-router-dom";
-import { ChevronLeft, ChevronRight, Sparkles } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
+import { Menu, Sparkles, X } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
 import { NAV_ITEMS } from "../../constants/navigation";
 
-const SIDEBAR_W_EXPANDED  = 220;
-const SIDEBAR_W_COLLAPSED = 64;
+export const SIDEBAR_EXPANDED  = 260;
+export const SIDEBAR_COLLAPSED = 72;
 
-export function Sidebar() {
-  const [collapsed, setCollapsed] = useState(false);
-  const [hovered, setHovered]     = useState(null);
+const TRANSITION = { duration: 0.3, ease: [0.4, 0, 0.2, 1] };
+const LABEL_TRANSITION = { duration: 0.18, ease: [0.4, 0, 0.2, 1] };
 
-  const width = collapsed ? SIDEBAR_W_COLLAPSED : SIDEBAR_W_EXPANDED;
+// ── Tooltip ──────────────────────────────────────────────────────────────────
 
+function Tooltip({ label, visible }) {
   return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ opacity: 0, x: -6, scale: 0.95 }}
+          animate={{ opacity: 1, x: 0,  scale: 1    }}
+          exit={{    opacity: 0, x: -6, scale: 0.95 }}
+          transition={{ duration: 0.12 }}
+          role="tooltip"
+          style={{
+            position: "absolute",
+            left: SIDEBAR_COLLAPSED + 6,
+            top: "50%",
+            transform: "translateY(-50%)",
+            background: "var(--bg-elevated)",
+            border: "1px solid var(--border-hover)",
+            borderRadius: "var(--radius-md)",
+            padding: "5px 12px",
+            fontSize: 12,
+            fontWeight: 600,
+            color: "var(--text-primary)",
+            whiteSpace: "nowrap",
+            pointerEvents: "none",
+            zIndex: 400,
+            boxShadow: "var(--shadow-lg)",
+          }}
+        >
+          {label}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+// ── Nav Item ─────────────────────────────────────────────────────────────────
+
+function NavItem({ item, collapsed, onClose }) {
+  const [hovered, setHovered] = useState(false);
+  const Icon = item.icon;
+
+  return (
+    <div
+      style={{ position: "relative" }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <NavLink
+        to={item.path}
+        onClick={onClose}
+        aria-label={item.label}
+        style={({ isActive }) => ({
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          height: 40,
+          padding: collapsed ? "0" : "0 12px",
+          justifyContent: collapsed ? "center" : "flex-start",
+          margin: "1px 8px",
+          borderRadius: "var(--radius-md)",
+          background: isActive
+            ? "linear-gradient(135deg, rgba(0,201,167,0.14) 0%, rgba(0,201,167,0.06) 100%)"
+            : hovered
+            ? "rgba(255,255,255,0.04)"
+            : "transparent",
+          color: isActive ? "var(--color-teal)" : hovered ? "var(--text-primary)" : "var(--text-muted)",
+          textDecoration: "none",
+          cursor: "pointer",
+          transition: "background 0.15s ease, color 0.15s ease",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          position: "relative",
+          border: isActive ? "1px solid rgba(0,201,167,0.18)" : "1px solid transparent",
+          boxShadow: isActive ? "0 0 12px rgba(0,201,167,0.08)" : "none",
+        })}
+      >
+        {({ isActive }) => (
+          <>
+            {/* Left active bar */}
+            {isActive && (
+              <motion.div
+                layoutId="activeBar"
+                style={{
+                  position: "absolute",
+                  left: -8,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  width: 3,
+                  height: 20,
+                  borderRadius: "0 2px 2px 0",
+                  background: "var(--color-teal)",
+                  boxShadow: "0 0 8px rgba(0,201,167,0.7)",
+                }}
+                transition={{ type: "spring", stiffness: 500, damping: 35 }}
+              />
+            )}
+
+            <Icon
+              size={17}
+              style={{
+                flexShrink: 0,
+                color: isActive ? "var(--color-teal)" : hovered ? "var(--text-primary)" : "var(--text-muted)",
+                transition: "color 0.15s ease",
+              }}
+            />
+
+            {/* Label */}
+            <AnimatePresence initial={false}>
+              {!collapsed && (
+                <motion.span
+                  key="label"
+                  initial={{ opacity: 0, width: 0 }}
+                  animate={{ opacity: 1, width: "auto" }}
+                  exit={{    opacity: 0, width: 0 }}
+                  transition={LABEL_TRANSITION}
+                  style={{
+                    fontSize: 13,
+                    fontWeight: isActive ? 700 : 500,
+                    overflow: "hidden",
+                    letterSpacing: isActive ? "-0.01em" : 0,
+                  }}
+                >
+                  {item.label}
+                </motion.span>
+              )}
+            </AnimatePresence>
+
+            {/* AI badge */}
+            <AnimatePresence initial={false}>
+              {!collapsed && item.ai && (
+                <motion.span
+                  key="badge"
+                  initial={{ opacity: 0, scale: 0.7 }}
+                  animate={{ opacity: 1, scale: 1   }}
+                  exit={{    opacity: 0, scale: 0.7 }}
+                  transition={LABEL_TRANSITION}
+                  style={{
+                    marginLeft: "auto",
+                    fontSize: 9,
+                    fontWeight: 700,
+                    color: "var(--color-teal)",
+                    background: "var(--color-teal-bg)",
+                    border: "1px solid var(--color-teal-border)",
+                    borderRadius: "var(--radius-pill)",
+                    padding: "1px 5px",
+                    letterSpacing: "0.4px",
+                    flexShrink: 0,
+                  }}
+                >
+                  AI
+                </motion.span>
+              )}
+            </AnimatePresence>
+          </>
+        )}
+      </NavLink>
+
+      {/* Tooltip — collapsed only */}
+      {collapsed && <Tooltip label={item.label} visible={hovered} />}
+    </div>
+  );
+}
+
+// ── Sidebar ───────────────────────────────────────────────────────────────────
+
+export function Sidebar({ collapsed, onToggle, isMobile, mobileOpen, onMobileClose }) {
+  const [aiHovered, setAiHovered] = useState(false);
+
+  // Mobile: close on Escape
+  useEffect(() => {
+    if (!isMobile) return;
+    const handler = (e) => { if (e.key === "Escape") onMobileClose?.(); };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isMobile, onMobileClose]);
+
+  const sidebarContent = (
     <motion.aside
-      animate={{ width }}
-      transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}
+      animate={{ width: collapsed ? SIDEBAR_COLLAPSED : SIDEBAR_EXPANDED }}
+      transition={TRANSITION}
       aria-label="Primary navigation"
       style={{
-        position: "fixed",
-        left: 0,
-        top: 52,
-        bottom: 0,
-        width,
+        height: "100%",
         background: "var(--bg-surface)",
         borderRight: "1px solid var(--border)",
         display: "flex",
         flexDirection: "column",
-        zIndex: 90,
         overflow: "hidden",
+        willChange: "width",
       }}
     >
-      {/* ── Nav Items ── */}
-      <nav style={{ flex: 1, paddingTop: 10, paddingBottom: 8 }} role="navigation">
-        {NAV_ITEMS.map((item) => {
-          const Icon        = item.icon;
-          const showTooltip = collapsed && hovered === item.id;
-
-          return (
-            <div key={item.id} style={{ position: "relative" }}>
-              <NavLink
-                to={item.path}
-                onMouseEnter={() => setHovered(item.id)}
-                onMouseLeave={() => setHovered(null)}
-                aria-label={item.label}
-                style={({ isActive }) => ({
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 11,
-                  height: 42,
-                  padding: collapsed ? "0 20px" : "0 14px",
-                  margin: "2px 8px",
-                  borderRadius: "var(--radius-md)",
-                  background: isActive
-                    ? "linear-gradient(135deg, rgba(0,201,167,0.14) 0%, rgba(0,201,167,0.06) 100%)"
-                    : "transparent",
-                  color: isActive ? "var(--color-teal)" : "var(--text-muted)",
-                  textDecoration: "none",
-                  cursor: "pointer",
-                  transition: "background var(--transition-fast), color var(--transition-fast)",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  position: "relative",
-                  border: isActive
-                    ? "1px solid rgba(0,201,167,0.2)"
-                    : "1px solid transparent",
-                })}
+      {/* ── Header ── */}
+      <div
+        style={{
+          height: 52,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: collapsed ? "center" : "space-between",
+          padding: collapsed ? "0" : "0 14px 0 16px",
+          borderBottom: "1px solid var(--border)",
+          flexShrink: 0,
+        }}
+      >
+        <AnimatePresence initial={false}>
+          {!collapsed && (
+            <motion.div
+              key="brand"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{    opacity: 0 }}
+              transition={{ duration: 0.18 }}
+              style={{ display: "flex", alignItems: "center", gap: 8, overflow: "hidden" }}
+            >
+              <div
+                style={{
+                  width: 28, height: 28, borderRadius: 7, flexShrink: 0,
+                  background: "linear-gradient(135deg, rgba(0,201,167,0.2) 0%, rgba(0,201,167,0.08) 100%)",
+                  border: "1px solid var(--color-teal-border)",
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  color: "var(--color-teal)",
+                }}
+                className="ai-pulse"
               >
-                {({ isActive }) => (
-                  <>
-                    {/* Animated left accent bar */}
-                    {isActive && (
-                      <motion.div
-                        layoutId="sidebarActiveIndicator"
-                        style={{
-                          position: "absolute",
-                          left: -8,
-                          top: "50%",
-                          transform: "translateY(-50%)",
-                          width: 3,
-                          height: 22,
-                          borderRadius: "0 2px 2px 0",
-                          background: "var(--color-teal)",
-                          boxShadow: "0 0 8px rgba(0,201,167,0.6)",
-                        }}
-                        transition={{ type: "spring", stiffness: 500, damping: 35 }}
-                      />
-                    )}
-
-                    <Icon
-                      size={17}
-                      style={{
-                        flexShrink: 0,
-                        color: isActive ? "var(--color-teal)" : "var(--text-muted)",
-                        transition: "color 0.15s ease",
-                      }}
-                    />
-
-                    <AnimatePresence>
-                      {!collapsed && (
-                        <motion.span
-                          initial={{ opacity: 0, x: -6 }}
-                          animate={{ opacity: 1, x: 0 }}
-                          exit={{ opacity: 0, x: -6 }}
-                          transition={{ duration: 0.15 }}
-                          style={{
-                            fontSize: 13,
-                            fontWeight: isActive ? 700 : 500,
-                            letterSpacing: isActive ? "-0.01em" : 0,
-                          }}
-                        >
-                          {item.label}
-                        </motion.span>
-                      )}
-                    </AnimatePresence>
-
-                    {/* AI badge for flagship features */}
-                    {!collapsed && item.ai && (
-                      <motion.span
-                        initial={{ opacity: 0, scale: 0.8 }}
-                        animate={{ opacity: 1, scale: 1 }}
-                        exit={{ opacity: 0, scale: 0.8 }}
-                        style={{
-                          marginLeft: "auto",
-                          fontSize: 9,
-                          fontWeight: 700,
-                          color: "var(--color-teal)",
-                          background: "var(--color-teal-bg)",
-                          border: "1px solid var(--color-teal-border)",
-                          borderRadius: "var(--radius-pill)",
-                          padding: "1px 5px",
-                          letterSpacing: "0.4px",
-                        }}
-                      >
-                        AI
-                      </motion.span>
-                    )}
-                  </>
-                )}
-              </NavLink>
-
-              {/* Collapsed tooltip */}
-              <AnimatePresence>
-                {showTooltip && (
-                  <motion.div
-                    initial={{ opacity: 0, x: -6, scale: 0.95 }}
-                    animate={{ opacity: 1, x: 0,  scale: 1    }}
-                    exit={{ opacity: 0, x: -6, scale: 0.95 }}
-                    transition={{ duration: 0.12 }}
-                    role="tooltip"
-                    style={{
-                      position: "absolute",
-                      left: SIDEBAR_W_COLLAPSED + 8,
-                      top: "50%",
-                      transform: "translateY(-50%)",
-                      background: "var(--bg-elevated)",
-                      border: "1px solid var(--border-hover)",
-                      borderRadius: "var(--radius-md)",
-                      padding: "5px 12px",
-                      fontSize: 12,
-                      fontWeight: 600,
-                      color: "var(--text-primary)",
-                      whiteSpace: "nowrap",
-                      pointerEvents: "none",
-                      zIndex: 300,
-                      boxShadow: "var(--shadow-lg)",
-                    }}
-                  >
-                    {item.label}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          );
-        })}
+                <Sparkles size={14} />
+              </div>
+              <div>
+                <div style={{ fontSize: 13, fontWeight: 800, color: "var(--text-primary)", lineHeight: 1.2 }}>
+                  TradeMind
+                </div>
+                <div style={{ fontSize: 8, color: "var(--color-teal)", letterSpacing: 1.2, fontWeight: 700 }}>
+                  AI FINTECH · NSE INDIA
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Toggle button */}
+        {isMobile ? (
+          <button
+            onClick={onMobileClose}
+            aria-label="Close navigation"
+            style={btnStyle}
+          >
+            <X size={15} />
+          </button>
+        ) : (
+          <button
+            onClick={onToggle}
+            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            style={btnStyle}
+          >
+            <motion.div
+              animate={{ rotate: collapsed ? 180 : 0 }}
+              transition={TRANSITION}
+              style={{ display: "flex", alignItems: "center" }}
+            >
+              <Menu size={15} />
+            </motion.div>
+          </button>
+        )}
+      </div>
+
+      {/* ── Nav ── */}
+      <nav
+        role="navigation"
+        style={{ flex: 1, paddingTop: 8, paddingBottom: 8, overflowY: "auto", overflowX: "hidden" }}
+      >
+        {NAV_ITEMS.map((item) => (
+          <NavItem
+            key={item.id}
+            item={item}
+            collapsed={collapsed}
+            onClose={isMobile ? onMobileClose : undefined}
+          />
+        ))}
       </nav>
 
-      {/* ── AI Copilot Watermark (only expanded) ── */}
-      <AnimatePresence>
-        {!collapsed && (
+      {/* ── AI Status bottom ── */}
+      <div style={{ padding: "8px", flexShrink: 0 }}>
+        {collapsed ? (
+          /* Collapsed: glowing dot */
+          <div
+            onMouseEnter={() => setAiHovered(true)}
+            onMouseLeave={() => setAiHovered(false)}
+            style={{ position: "relative", display: "flex", justifyContent: "center", padding: "8px 0" }}
+          >
+            <div
+              style={{
+                width: 8, height: 8, borderRadius: "50%",
+                background: "var(--color-teal)",
+                boxShadow: "0 0 8px rgba(0,201,167,0.8), 0 0 16px rgba(0,201,167,0.4)",
+              }}
+            />
+            <Tooltip label="TradeMind AI · RF · LSTM · FinBERT" visible={aiHovered} />
+          </div>
+        ) : (
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
+            exit={{    opacity: 0 }}
+            transition={{ duration: 0.2 }}
             style={{
-              margin: "0 12px 8px",
               padding: "8px 10px",
               borderRadius: "var(--radius-md)",
               background: "linear-gradient(135deg, rgba(0,201,167,0.06) 0%, rgba(59,130,246,0.04) 100%)",
               border: "1px solid var(--border)",
               display: "flex",
               alignItems: "center",
-              gap: 6,
+              gap: 7,
             }}
           >
-            <Sparkles size={12} color="var(--color-teal)" />
+            <div
+              style={{
+                width: 7, height: 7, borderRadius: "50%", flexShrink: 0,
+                background: "var(--color-teal)",
+                boxShadow: "0 0 6px rgba(0,201,167,0.8)",
+              }}
+            />
             <div>
               <div style={{ fontSize: 10, fontWeight: 700, color: "var(--color-teal)", letterSpacing: "0.4px" }}>
                 TRADEMIND AI
@@ -206,34 +341,79 @@ export function Sidebar() {
             </div>
           </motion.div>
         )}
+      </div>
+    </motion.aside>
+  );
+
+  // ── Mobile: overlay drawer ──
+  if (isMobile) {
+    return (
+      <AnimatePresence>
+        {mobileOpen && (
+          <>
+            {/* Backdrop */}
+            <motion.div
+              key="backdrop"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{    opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              onClick={onMobileClose}
+              style={{
+                position: "fixed", inset: 0, zIndex: 89,
+                background: "rgba(0,0,0,0.55)",
+                backdropFilter: "blur(4px)",
+                WebkitBackdropFilter: "blur(4px)",
+              }}
+            />
+            {/* Drawer */}
+            <motion.div
+              key="drawer"
+              initial={{ x: -SIDEBAR_EXPANDED }}
+              animate={{ x: 0 }}
+              exit={{    x: -SIDEBAR_EXPANDED }}
+              transition={TRANSITION}
+              style={{
+                position: "fixed", top: 0, left: 0, bottom: 0,
+                width: SIDEBAR_EXPANDED, zIndex: 90,
+              }}
+            >
+              {sidebarContent}
+            </motion.div>
+          </>
+        )}
       </AnimatePresence>
+    );
+  }
 
-      {/* ── Collapse Toggle ── */}
-      <button
-        onClick={() => setCollapsed((c) => !c)}
-        aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-        className="sidebar-collapse-btn"
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: collapsed ? "center" : "flex-start",
-          gap: 8,
-          margin: "0 8px 12px",
-          padding: collapsed ? "9px 20px" : "9px 12px",
-          borderRadius: "var(--radius-md)",
-          background: "transparent",
-          border: "1px solid var(--border)",
-          color: "var(--text-muted)",
-          cursor: "pointer",
-          fontSize: 12,
-          fontWeight: 600,
-          transition: "all var(--transition-fast)",
-          fontFamily: "var(--font-sans)",
-        }}
-      >
-        {collapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
-        {!collapsed && <span>Collapse</span>}
-      </button>
-    </motion.aside>
+  // ── Desktop: fixed rail ──
+  return (
+    <div
+      style={{
+        position: "fixed", top: 52, left: 0, bottom: 0,
+        zIndex: 90,
+        width: collapsed ? SIDEBAR_COLLAPSED : SIDEBAR_EXPANDED,
+        transition: `width ${TRANSITION.duration}s cubic-bezier(0.4,0,0.2,1)`,
+        willChange: "width",
+      }}
+    >
+      {sidebarContent}
+    </div>
   );
 }
+
+// ── Shared button style ───────────────────────────────────────────────────────
+
+const btnStyle = {
+  background: "transparent",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius-md)",
+  padding: "6px 7px",
+  color: "var(--text-muted)",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  transition: "border-color 0.15s ease, color 0.15s ease",
+};

frontend/src/components/layout/TopBar.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { TrendingUp, Bell, Search, LogOut, ChevronRight } from "lucide-react";
+import { TrendingUp, Bell, Search, LogOut, ChevronRight, Menu } from "lucide-react";
 import { useLocation } from "react-router-dom";
 import { motion, useScroll, useTransform } from "framer-motion";
 import { useAuth } from "../../context/AuthContext";
@@ -90,7 +90,7 @@ function GlobalSearch() {
   );
 }
 
-export function TopBar({ gold, isMobile }) {
+export function TopBar({ gold, isMobile, onMenuClick }) {
   const { user, signOut } = useAuth();
   const location = useLocation();
   const time = useCurrentTime();
@@ -122,7 +122,7 @@ export function TopBar({ gold, isMobile }) {
       }}
       role="banner"
     >
-      {/* Brand */}
+      {/* Mobile hamburger + Brand */}
       <div
         style={{
           display: "flex",
@@ -135,6 +135,25 @@ export function TopBar({ gold, isMobile }) {
           minWidth: isMobile ? 140 : 200,
         }}
       >
+        {isMobile && (
+          <button
+            onClick={onMenuClick}
+            aria-label="Open navigation"
+            style={{
+              background: "transparent",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--radius-md)",
+              padding: "6px 7px",
+              color: "var(--text-muted)",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              flexShrink: 0,
+            }}
+          >
+            <Menu size={15} />
+          </button>
+        )}
         <div
           style={{
             width: 30,