Feat(collapsable nav for varsatile sidebar and other navigations ✨ ): Implemented a 'Nav' component for rendering navigation links with collapsible and expanded states. Utilizes Next.js 'Link' for navigation, Lucide icons for visuals, and tooltips for enhanced user interaction. Supports both collapsed and expanded views with appropriate styling, including button variants and tooltips for condensed display.

Author: lalitdotdev

components/ui/nav.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import Link from 'next/link';
+import { LucideIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+import { buttonVariants } from './button';
+
+interface NavProps {
+  isCollapsed: boolean;
+  links: {
+    title: string;
+    label?: string;
+    icon: LucideIcon;
+    variant: 'default' | 'ghost';
+  }[];
+}
+
+export function Nav({ links, isCollapsed }: NavProps) {
+  return (
+    <div data-collapsed={isCollapsed} className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2">
+      <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
+        {links.map((link, index) =>
+          isCollapsed ? (
+            <Tooltip key={index} delayDuration={0}>
+              <TooltipTrigger asChild>
+                <Link
+                  href="#"
+                  className={cn(
+                    buttonVariants({ variant: link.variant, size: 'icon' }),
+                    'h-9 w-9',
+                    link.variant === 'default' &&
+                      'dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white',
+                  )}
+                >
+                  <link.icon className="h-4 w-4" />
+                  <span className="sr-only">{link.title}</span>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right" className="flex items-center gap-4">
+                {link.title}
+                {link.label && <span className="ml-auto text-muted-foreground">{link.label}</span>}
+              </TooltipContent>
+            </Tooltip>
+          ) : (
+            <Link
+              key={index}
+              href="#"
+              className={cn(
+                buttonVariants({ variant: link.variant, size: 'sm' }),
+                link.variant === 'default' && 'dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white',
+                'justify-start',
+              )}
+            >
+              <link.icon className="mr-2 h-4 w-4" />
+              {link.title}
+              {link.label && (
+                <span className={cn('ml-auto', link.variant === 'default' && 'text-background dark:text-white')}>
+                  {link.label}
+                </span>
+              )}
+            </Link>
+          ),
+        )}
+      </nav>
+    </div>
+  );
+}