From fe4b16ab72df7e41098d1bbd160be84419aaa98a Mon Sep 17 00:00:00 2001
From: DevSolex <devsolex6@gmail.com>
Date: Sun, 31 May 2026 00:30:13 +0100
Subject: [PATCH] feat: implement responsive sidebar navigation

- Add mobile drawer with overlay and desktop sticky sidebar
- Support expand/collapse toggle (w-14 collapsed, w-64 expanded)
- Highlight active route using usePathname()
- Wire Sidebar into dashboard page with mobile menu button

Closes #248
---
 src/app/dashboard/page.tsx                    |  21 +-
 src/components/dashboard/Sidebar.tsx          | 322 +++++++++++-------
 .../dashboard/__tests__/Sidebar.test.tsx      |  75 ++++
 3 files changed, 287 insertions(+), 131 deletions(-)
 create mode 100644 src/components/dashboard/__tests__/Sidebar.test.tsx

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index c86ed4f7..07a4cc61 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -14,6 +14,9 @@ import { useKycStore } from "@/store/kycStore";
 import Link from "next/link";
 import { TransactionSecuritySettings } from "@/components/security/TransactionSecuritySettings";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Sidebar } from "@/components/dashboard/Sidebar";
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 const StakingPanel = dynamic(
   () => import("@/components/dashboard/StakingPanel").then((m) => m.StakingPanel),
@@ -62,17 +65,33 @@ const DataRefreshWrapper = dynamic(
 
 const Index = () => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [activeItem, setActiveItem] = useState("dashboard");
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const { profile } = useKycStore();
 
   return (
     <div className="min-h-screen bg-background flex w-full">
+      <Sidebar
+        isOpen={sidebarOpen}
+        isCollapsed={sidebarCollapsed}
+        onClose={() => setSidebarOpen(false)}
+        onToggleCollapse={() => setSidebarCollapsed((c) => !c)}
+      />
       <div className="flex-1 flex flex-col min-w-0">
         <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
           <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
               <div className="flex justify-between items-center h-16">
                 <div className="flex items-center gap-3">
+                  {/* Mobile menu toggle */}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="lg:hidden"
+                    onClick={() => setSidebarOpen(true)}
+                    aria-label="Open sidebar"
+                  >
+                    <Menu className="w-5 h-5" />
+                  </Button>
                   <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                     <span className="text-white font-bold text-sm">PC</span>
                   </div>
diff --git a/src/components/dashboard/Sidebar.tsx b/src/components/dashboard/Sidebar.tsx
index 3a2cc5ef..bc5918b0 100644
--- a/src/components/dashboard/Sidebar.tsx
+++ b/src/components/dashboard/Sidebar.tsx
@@ -1,140 +1,202 @@
-// 'use client';
+'use client';
 
-// import { motion, AnimatePresence } from "framer-motion";
-// import { 
-//   LayoutDashboard, 
-//   Building2, 
-//   BarChart3, 
-//   Wallet, 
-//   FileText, 
-//   Settings, 
-//   HelpCircle,
-//   ChevronLeft,
-//   X
-// } from "lucide-react";
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  LayoutDashboard,
+  Building2,
+  BarChart3,
+  Wallet,
+  FileText,
+  Settings,
+  HelpCircle,
+  X,
+  ChevronLeft,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 
-// interface SidebarProps {
-//   isOpen: boolean;
-//   onClose: () => void;
-//   activeItem?: string;
-//   onItemClick?: (item: string) => void;
-// }
+const navItems = [
+  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
+  { href: '/properties', label: 'Properties', icon: Building2 },
+  { href: '/dashboard?tab=analytics', label: 'Analytics', icon: BarChart3 },
+  { href: '/dashboard?tab=wallet', label: 'Wallet', icon: Wallet },
+  { href: '/tax-report', label: 'Reports', icon: FileText },
+];
 
-// const menuItems = [
-//   { id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
-//   { id: "properties", label: "Properties", icon: Building2 },
-//   { id: "analytics", label: "Analytics", icon: BarChart3 },
-//   { id: "wallet", label: "Wallet", icon: Wallet },
-//   { id: "reports", label: "Reports", icon: FileText },
-// ];
+const bottomItems = [
+  { href: '/dashboard?tab=settings', label: 'Settings', icon: Settings },
+  { href: '/dashboard?tab=help', label: 'Help & Support', icon: HelpCircle },
+];
 
-// const bottomItems = [
-//   { id: "settings", label: "Settings", icon: Settings },
-//   { id: "help", label: "Help & Support", icon: HelpCircle },
-// ];
+interface SidebarProps {
+  isOpen: boolean;
+  isCollapsed: boolean;
+  onClose: () => void;
+  onToggleCollapse: () => void;
+}
 
-// export const Sidebar = ({ isOpen, onClose, activeItem = "dashboard", onItemClick }: SidebarProps) => {
-//   const SidebarContent = () => (
-//     <div className="flex flex-col h-full">
-//       {/* Logo section for mobile */}
-//       <div className="lg:hidden flex items-center justify-between p-4 border-b border-border">
-//         <div className="flex items-center gap-3">
-//           <div className="w-10 h-10 rounded-xl bg-gradient-primary flex items-center justify-center">
-//             <span className="text-lg font-bold text-primary-foreground">M</span>
-//           </div>
-//           <div>
-//             <h1 className="text-lg font-bold gradient-text">MettaChain</h1>
-//           </div>
-//         </div>
-//         <button
-//           onClick={onClose}
-//           className="p-2 text-muted-foreground hover:text-foreground transition-colors"
-//         >
-//           <X className="w-5 h-5" />
-//         </button>
-//       </div>
+function NavLink({
+  href,
+  label,
+  icon: Icon,
+  isActive,
+  isCollapsed,
+  onClick,
+}: {
+  href: string;
+  label: string;
+  icon: React.ElementType;
+  isActive: boolean;
+  isCollapsed: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      title={isCollapsed ? label : undefined}
+      className={cn(
+        'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all',
+        isCollapsed && 'justify-center px-2',
+        isActive
+          ? 'bg-primary/10 text-primary border border-primary/20'
+          : 'text-muted-foreground hover:text-foreground hover:bg-secondary'
+      )}
+      aria-current={isActive ? 'page' : undefined}
+    >
+      <Icon className="w-5 h-5 shrink-0" />
+      {!isCollapsed && (
+        <>
+          <span>{label}</span>
+          {isActive && <div className="ml-auto w-1.5 h-1.5 rounded-full bg-primary" />}
+        </>
+      )}
+    </Link>
+  );
+}
 
-//       {/* Navigation */}
-//       <nav className="flex-1 p-4 space-y-1">
-//         <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-4 px-3">
-//           Main Menu
-//         </p>
-//         {menuItems.map((item) => (
-//           <button
-//             key={item.id}
-//             onClick={() => onItemClick?.(item.id)}
-//             className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
-//               activeItem === item.id
-//                 ? "bg-primary/10 text-primary border border-primary/20"
-//                 : "text-muted-foreground hover:text-foreground hover:bg-secondary"
-//             }`}
-//           >
-//             <item.icon className="w-5 h-5" />
-//             {item.label}
-//             {activeItem === item.id && (
-//               <div className="ml-auto w-1.5 h-1.5 rounded-full bg-primary" />
-//             )}
-//           </button>
-//         ))}
-//       </nav>
+function SidebarContent({
+  isCollapsed,
+  onClose,
+  onToggleCollapse,
+  isMobileDrawer,
+}: {
+  isCollapsed: boolean;
+  onClose: () => void;
+  onToggleCollapse: () => void;
+  isMobileDrawer?: boolean;
+}) {
+  const pathname = usePathname();
 
-//       {/* Bottom section */}
-//       <div className="p-4 border-t border-border space-y-1">
-//         {bottomItems.map((item) => (
-//           <button
-//             key={item.id}
-//             onClick={() => onItemClick?.(item.id)}
-//             className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-secondary transition-all"
-//           >
-//             <item.icon className="w-5 h-5" />
-//             {item.label}
-//           </button>
-//         ))}
-//       </div>
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border">
+        {(!isCollapsed || isMobileDrawer) && (
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center shrink-0">
+              <span className="text-white font-bold text-sm">PC</span>
+            </div>
+            <span className="font-bold text-base">PropChain</span>
+          </div>
+        )}
+        {isMobileDrawer ? (
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close sidebar">
+            <X className="w-5 h-5" />
+          </Button>
+        ) : (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onToggleCollapse}
+            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            className={cn(isCollapsed && 'mx-auto')}
+          >
+            <ChevronLeft className={cn('w-5 h-5 transition-transform', isCollapsed && 'rotate-180')} />
+          </Button>
+        )}
+      </div>
 
-//       {/* Upgrade card */}
-//       <div className="p-4">
-//         <div className="bg-gradient-primary rounded-xl p-4 text-primary-foreground">
-//           <p className="font-semibold text-sm">Upgrade to Pro</p>
-//           <p className="text-xs mt-1 opacity-90">Unlock advanced analytics and premium features</p>
-//           <button className="mt-3 w-full bg-background/20 hover:bg-background/30 rounded-lg py-2 text-xs font-medium transition-colors">
-//             Upgrade Now
-//           </button>
-//         </div>
-//       </div>
-//     </div>
-//   );
+      {/* Main nav */}
+      <nav className="flex-1 p-3 space-y-1" aria-label="Dashboard navigation">
+        {!isCollapsed && (
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3 px-3">
+            Main Menu
+          </p>
+        )}
+        {navItems.map((item) => (
+          <NavLink
+            key={item.href}
+            {...item}
+            isActive={pathname === item.href.split('?')[0] && item.href === '/dashboard'
+              ? pathname === '/dashboard'
+              : pathname === item.href.split('?')[0]}
+            isCollapsed={isCollapsed && !isMobileDrawer}
+            onClick={isMobileDrawer ? onClose : undefined}
+          />
+        ))}
+      </nav>
 
-//   return (
-//     <>
-//       {/* Desktop sidebar */}
-//       <aside className="hidden lg:block w-64 border-r border-border bg-card h-screen sticky top-0 shrink-0">
-//         <SidebarContent />
-//       </aside>
+      {/* Bottom nav */}
+      <div className="p-3 border-t border-border space-y-1">
+        {bottomItems.map((item) => (
+          <NavLink
+            key={item.href}
+            {...item}
+            isActive={false}
+            isCollapsed={isCollapsed && !isMobileDrawer}
+            onClick={isMobileDrawer ? onClose : undefined}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
 
-//       {/* Mobile sidebar overlay */}
-//       <AnimatePresence>
-//         {isOpen && (
-//           <>
-//             <motion.div
-//               initial={{ opacity: 0 }}
-//               animate={{ opacity: 1 }}
-//               exit={{ opacity: 0 }}
-//               onClick={onClose}
-//               className="lg:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-40"
-//             />
-//             <motion.aside
-//               initial={{ x: -280 }}
-//               animate={{ x: 0 }}
-//               exit={{ x: -280 }}
-//               transition={{ type: "spring", damping: 25, stiffness: 200 }}
-//               className="lg:hidden fixed left-0 top-0 w-[280px] h-screen bg-card border-r border-border z-50"
-//             >
-//               <SidebarContent />
-//             </motion.aside>
-//           </>
-//         )}
-//       </AnimatePresence>
-//     </>
-//   );
-// };
+export function Sidebar({ isOpen, isCollapsed, onClose, onToggleCollapse }: SidebarProps) {
+  return (
+    <>
+      {/* Desktop sidebar */}
+      <aside
+        className={cn(
+          'hidden lg:flex flex-col border-r border-border bg-card h-screen sticky top-0 shrink-0 transition-all duration-300',
+          isCollapsed ? 'w-14' : 'w-64'
+        )}
+        aria-label="Sidebar"
+      >
+        <SidebarContent
+          isCollapsed={isCollapsed}
+          onClose={onClose}
+          onToggleCollapse={onToggleCollapse}
+        />
+      </aside>
+
+      {/* Mobile overlay */}
+      {isOpen && (
+        <div
+          className="lg:hidden fixed inset-0 bg-black/50 z-40"
+          onClick={onClose}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Mobile drawer */}
+      <aside
+        className={cn(
+          'lg:hidden fixed left-0 top-0 w-72 h-screen bg-card border-r border-border z-50 transition-transform duration-300',
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+        aria-label="Sidebar"
+        aria-hidden={!isOpen}
+      >
+        <SidebarContent
+          isCollapsed={false}
+          onClose={onClose}
+          onToggleCollapse={onToggleCollapse}
+          isMobileDrawer
+        />
+      </aside>
+    </>
+  );
+}
diff --git a/src/components/dashboard/__tests__/Sidebar.test.tsx b/src/components/dashboard/__tests__/Sidebar.test.tsx
new file mode 100644
index 00000000..07bff5ff
--- /dev/null
+++ b/src/components/dashboard/__tests__/Sidebar.test.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Sidebar } from '../Sidebar';
+
+// Mock next/navigation
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/dashboard',
+}));
+
+// Mock next/link
+jest.mock('next/link', () => {
+  const Link = ({ href, children, ...props }: { href: string; children: React.ReactNode; [key: string]: unknown }) => (
+    <a href={href} {...props}>{children}</a>
+  );
+  Link.displayName = 'Link';
+  return Link;
+});
+
+const defaultProps = {
+  isOpen: false,
+  isCollapsed: false,
+  onClose: jest.fn(),
+  onToggleCollapse: jest.fn(),
+};
+
+describe('Sidebar', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('renders navigation links', () => {
+    render(<Sidebar {...defaultProps} />);
+    expect(screen.getAllByText('Dashboard').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Properties').length).toBeGreaterThan(0);
+  });
+
+  it('highlights the active route', () => {
+    render(<Sidebar {...defaultProps} />);
+    const activeLinks = screen.getAllByRole('link', { name: /dashboard/i });
+    const activeLink = activeLinks.find((el) => el.getAttribute('aria-current') === 'page');
+    expect(activeLink).toBeTruthy();
+  });
+
+  it('shows mobile drawer when isOpen is true', () => {
+    render(<Sidebar {...defaultProps} isOpen={true} />);
+    // The mobile overlay should be present
+    const overlay = document.querySelector('[aria-hidden="true"]');
+    expect(overlay).toBeTruthy();
+  });
+
+  it('calls onClose when overlay is clicked', () => {
+    const onClose = jest.fn();
+    render(<Sidebar {...defaultProps} isOpen={true} onClose={onClose} />);
+    const overlay = document.querySelector('[aria-hidden="true"]') as HTMLElement;
+    fireEvent.click(overlay);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onToggleCollapse when collapse button is clicked on desktop', () => {
+    const onToggleCollapse = jest.fn();
+    render(<Sidebar {...defaultProps} onToggleCollapse={onToggleCollapse} />);
+    const collapseBtn = screen.getByRole('button', { name: /collapse sidebar/i });
+    fireEvent.click(collapseBtn);
+    expect(onToggleCollapse).toHaveBeenCalledTimes(1);
+  });
+
+  it('hides labels when collapsed', () => {
+    render(<Sidebar {...defaultProps} isCollapsed={true} />);
+    // Desktop sidebar should not show text labels (they're hidden via conditional render)
+    // The desktop aside is hidden on mobile, so we check the desktop aside
+    const desktopAside = document.querySelector('aside.hidden.lg\\:flex');
+    expect(desktopAside).toBeTruthy();
+    // Labels should not be in the desktop sidebar when collapsed
+    const labelsInDesktop = desktopAside?.querySelectorAll('span');
+    expect(labelsInDesktop?.length).toBe(0);
+  });
+});