Vertical Nav

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Mail, Settings, Users, BarChart3, Home, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function VerticalNavSection() {
29  const [activeNav, setActiveNav] = useState('dashboard');
30
31  const navItems = [
32    { id: 'dashboard', label: 'Dashboard', icon: Home },
33    { id: 'analytics', label: 'Analytics', icon: BarChart3 },
34    { id: 'users', label: 'Users', icon: Users },
35    { id: 'messages', label: 'Messages', icon: Mail },
36    { id: 'settings', label: 'Settings', icon: Settings },
37  ];
38
39  return (
40    <SectionCard title="Vertical Nav" sourceSlug="/ui/source/ui-elements/vertical-nav">
41      <div className="flex gap-6">
42        {/* Full Labels */}
43        <div className="w-52 rounded-xl border border-gray-200 bg-white p-2 dark:border-white/5 dark:bg-gray-dark">
44          {navItems.map((item) => (
45            <button key={item.id} onClick={() => setActiveNav(item.id)} className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${activeNav === item.id ? 'bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-400' : 'text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-white/5'}`}>
46              <item.icon className="size-4" />
47              {item.label}
48            </button>
49          ))}
50        </div>
51        {/* Icon Only */}
52        <div className="w-14 rounded-xl border border-gray-200 bg-white p-2 dark:border-white/5 dark:bg-gray-dark">
53          {navItems.map((item) => (
54            <button key={item.id} onClick={() => setActiveNav(item.id)} className={`flex w-full items-center justify-center rounded-lg p-2.5 transition-colors ${activeNav === item.id ? 'bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-400' : 'text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-white/5'}`} title={item.label}>
55              <item.icon className="size-4" />
56            </button>
57          ))}
58        </div>
59      </div>
60    </SectionCard>
61  );
62}