Open and close menu on small devices

app/(backend)/layout.tsx

@@ -13,7 +13,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
 
   return (
     <div className="dashboard">
-      <Sidebar />
+      <Sidebar open={sidebarOpen} close={() => setSidebarOpen(false)} />
 
       {/* Mobile Sidebar Overlay */}
       {sidebarOpen && (

components/Header/index.tsx

@@ -9,39 +9,45 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
   return (
     <header
       data-cmp="Header"
-      className="header h-16 border-b border-border sticky top-0 z-20 px-4 md:px-8 flex items-center justify-between"
+      className="header border-border sticky top-0 z-20 flex h-16 items-center justify-between border-b px-4 md:px-8"
     >
       <div className="flex items-center md:hidden">
-        <button title="Menu" onClick={onMenuClick} className="p-2 -ml-2 text-foreground hover:bg-muted rounded-md">
+        <button
-          <Menu className="w-6 h-6" />
+          title="Menu"
+          onClick={onMenuClick}
+          className="text-foreground hover:bg-muted -ml-2 rounded-md p-2"
+        >
+          <Menu className="h-6 w-6" />
         </button>
       </div>
 
-      <div className="hidden md:flex flex-1 max-w-xl relative">
+      <div className="relative hidden max-w-xl flex-1 md:flex">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
         <input
           type="text"
           placeholder="Search modules, users, or files..."
-          className="w-full pl-10 pr-4 py-2 bg-muted/50 border-none rounded-lg text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
+          className="bg-muted/50 text-foreground focus:ring-primary/20 w-full rounded-lg border-none py-2 pr-4 pl-10 text-sm transition-all focus:ring-2 focus:outline-none"
         />
       </div>
 
       <div className="flex items-center space-x-4">
         <button
           title="Notifications"
-          className="relative p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors"
+          className="text-muted-foreground hover:text-foreground hover:bg-muted relative rounded-full p-2 transition-colors"
         >
-          <Bell className="w-5 h-5" />
+          <Bell className="h-5 w-5" />
-          <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-destructive rounded-full border-2 border-card"></span>
+          <span className="bg-destructive border-card absolute top-1.5 right-1.5 h-2 w-2 rounded-full border-2"></span>
         </button>
 
-        <div className="flex items-center space-x-3 pl-4 border-l border-border/50">
+        <div className="border-border/50 flex items-center space-x-3 border-l pl-4">
-          <div className="text-right hidden sm:block">
+          <div className="hidden text-right sm:block">
-            <p className="text-sm font-medium text-foreground">Community Admin</p>
+            <p className="text-foreground text-sm font-medium">
-            <p className="text-xs text-muted-foreground">Super Administrator</p>
+              Community Admin
+            </p>
+            <p className="text-muted-foreground text-xs">Super Administrator</p>
           </div>
-          <div className="w-9 h-9 bg-primary/10 rounded-full flex items-center justify-center border border-primary/20">
+          <div className="bg-primary/10 border-primary/20 flex h-9 w-9 items-center justify-center rounded-full border">
-            <User className="w-5 h-5 text-primary" />
+            <User className="text-primary h-5 w-5" />
           </div>
         </div>
       </div>

components/Sidebar/index.tsx

@@ -1,4 +1,13 @@
-import { Building2, Calendar, FileText, LayoutDashboard, LogOut, Music, Settings, Users } from "lucide-react";
+import {
+  Building2,
+  Calendar,
+  FileText,
+  LayoutDashboard,
+  LogOut,
+  Music,
+  Settings,
+  Users,
+} from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import React from "react";
@@ -12,46 +21,60 @@ const navItems = [
   { icon: Settings, label: "Settings", path: "#settings" },
 ];
 
-const Sidebar: React.FC = () => {
+type SidebarProps = {
+  open?: boolean;
+  close: () => void;
+};
+
+const Sidebar: React.FC<SidebarProps> = ({ open, close }) => {
   const pathName = usePathname();
 
   return (
     <aside
       data-cmp="Sidebar"
-      className="side-bar hidden md:flex flex-col w-64 h-screen border-r border-border fixed left-0 top-0 z-30"
+      className={`side-bar border-border fixed top-0 left-0 z-30 h-screen w-64 flex-col border-r md:flex ${open ? "flex" : "hidden"}`}
     >
-      <div className="p-6 border-b border-border">
+      <div className="border-border border-b p-6">
         <div className="flex items-center space-x-3">
-          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+          <div className="bg-primary flex h-8 w-8 items-center justify-center rounded-lg">
-            <Building2 className="w-5 h-5 text-primary-foreground" />
+            <Building2 className="text-primary-foreground h-5 w-5" />
           </div>
-          <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
+          <span className="from-primary bg-gradient-to-r to-purple-600 bg-clip-text text-xl font-bold text-transparent">
             CGR Admin
           </span>
         </div>
       </div>
 
-      <nav className="flex-1 overflow-y-auto py-6 px-3 space-y-1">
+      <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-6">
         {navItems.map((item) => {
           const isActive = pathName === item.path;
           return (
             <Link
               key={item.label}
               href={item.path}
-              className={`flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+              className={`flex items-center space-x-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
-                isActive ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                isActive
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
               }`}
+              onClick={() => {
+                if (open) {
+                  close();
+                }
+              }}
             >
-              <item.icon className={`w-5 h-5 ${isActive ? "text-primary" : ""}`} />
+              <item.icon
+                className={`h-5 w-5 ${isActive ? "text-primary" : ""}`}
+              />
               <span>{item.label}</span>
             </Link>
           );
         })}
       </nav>
 
-      <div className="p-4 border-t border-border">
+      <div className="border-border border-t p-4">
-        <button className="flex items-center space-x-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors">
+        <button className="text-destructive hover:bg-destructive/10 flex w-full items-center space-x-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors">
-          <LogOut className="w-5 h-5" />
+          <LogOut className="h-5 w-5" />
           <span>Sign Out</span>
         </button>
       </div>