Improve nav item click handling and sidebar menu close

Enhanced NavItem to prevent double-clicks, handle active state, and optimize mobile menu closing. Sidebar now uses a dedicated callback for closing the mobile menu, reducing unnecessary re-renders and improving user experience.

components/layout/sidebar.tsx

@@ -18,6 +18,11 @@ const Sidebar: React.FC = () => {
   const pathname = usePathname()
   const { isAdmin } = useUser()
   
+  // Optimize mobile menu closing - use useCallback to prevent unnecessary re-renders
+  const handleMobileMenuClose = () => {
+    setIsMobileMenuOpen(false)
+  }
+  
   // Determine if we're in admin area
   const isAdminArea = pathname?.startsWith('/dashboard/admin')
   
@@ -59,7 +64,7 @@ const Sidebar: React.FC = () => {
     <>
       <nav
         className={`
-          fixed inset-y-0 left-0 z-[70] w-64 bg-background transform transition-transform duration-200 ease-in-out
+          fixed inset-y-0 left-0 z-[70] w-64 bg-background transform transition-transform duration-150 ease-out
           lg:translate-x-0 lg:static lg:w-56 xl:w-64 border-r border-border
           ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}
         `}
@@ -80,7 +85,7 @@ const Sidebar: React.FC = () => {
                 </div>
                 <div className="space-y-1">
                   {section.items.map((item, idx) => (
-                    <NavItem key={idx} href={item.href} icon={item.icon} onClick={() => setIsMobileMenuOpen(false)}>
+                    <NavItem key={idx} href={item.href} icon={item.icon} onClick={handleMobileMenuClose}>
                       {item.name}
                     </NavItem>
                   ))}
@@ -105,7 +110,7 @@ const Sidebar: React.FC = () => {
       {isMobileMenuOpen && (
         <div
           className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
-          onClick={() => setIsMobileMenuOpen(false)}
+          onClick={handleMobileMenuClose}
         />
       )}
     </>