src/components/shared/sidebar.tsx - develop - IvanRyabchenko/random-coffee-admin

src/components/shared/sidebar.tsx
77 строк2 KB
Ivan Ryabchenko
feat(layout): add protected dashboard layout with sidebar navigation
16 май 2026, 19:31
16 май 2026, 19:31e36e3ea
'use client'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { LayoutDashboard, Package, Tag, LogOut, Coffee } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useAuthStore } from '@/store/auth-store'
import { Button } from '@/components/ui/button'

interface NavItem {
  href: string
  icon: React.ElementType
  label: string
}

const NAV_ITEMS: NavItem[] = [
  { href: '/dashboard', icon: LayoutDashboard, label: 'Дашборд' },
  { href: '/products', icon: Package, label: 'Товары' },
  { href: '/categories', icon: Tag, label: 'Категории' },
]

function clearAuthCookie(): void {
  document.cookie = 'auth_token=; max-age=0; path=/'
}

export default function Sidebar(): React.ReactElement {
  const pathname = usePathname()
  const router = useRouter()
  const logout = useAuthStore((s) => s.logout)

  function handleLogout(): void {
    clearAuthCookie()
    logout()
    router.push('/login')
  }

  return (
    <aside className="flex h-screen w-60 flex-col border-r border-border bg-card">
      <div className="flex items-center gap-2 px-5 py-5 border-b border-border">
        <Coffee className="h-5 w-5 text-primary" />
        <span className="font-semibold text-sm text-foreground">RandomCoffee</span>
      </div>

      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
        {NAV_ITEMS.map(({ href, icon: Icon, label }) => {
          const isActive = pathname === href
          return (
            <Link
              key={href}
              href={href}
              className={cn(
                'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                isActive
                  ? 'bg-primary text-primary-foreground'
                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
              )}
            >
              <Icon className="h-4 w-4 shrink-0" />
              {label}
            </Link>
          )
        })}
      </nav>

      <div className="px-3 py-4 border-t border-border">
        <Button
          variant="ghost"
          className="w-full justify-start gap-3 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
          onClick={handleLogout}
        >
          <LogOut className="h-4 w-4 shrink-0" />
          Выйти
        </Button>
      </div>
    </aside>
  )
}