Playing with the layout

src/components/sidebar-nav.tsx

@@ -1,8 +1,7 @@
 "use client"
-
+import React from 'react'
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 
@@ -11,15 +10,17 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
     href: string
     title: string
   }[]
+  disabled?: boolean
 }
 
-export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
+export function SidebarNav({ className, items, disabled = false, ...props }: SidebarNavProps) {
   const pathname = usePathname()
 
   return (
     <nav
       className={cn(
         "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
+        disabled && "opacity-50 pointer-events-none",
         className
       )}
       {...props}
@@ -33,12 +34,16 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
             pathname === item.href
               ? "bg-muted hover:bg-muted"
               : "hover:bg-transparent hover:underline",
-            "justify-start"
+            "justify-start",
+            disabled && "cursor-not-allowed"
           )}
+          onClick={disabled ? (e) => e.preventDefault() : undefined}
+          tabIndex={disabled ? -1 : undefined}
+          aria-disabled={disabled}
         >
           {item.title}
         </Link>
       ))}
     </nav>
   )
-}
+}