Sidebar

'use client';

import { useState } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import { Sidebar, type SidebarMenuItem } from '@hanui/react';
import { LayoutDashboard, FileText, Settings } from 'lucide-react';

const menuItems: SidebarMenuItem[] = [
  {
    label: '대시보드',
    href: '/dashboard',
    icon: <LayoutDashboard className="w-5 h-5" />,
  },
  {
    label: '콘텐츠',
    icon: <FileText className="w-5 h-5" />,
    children: [
      { label: '게시물', href: '/posts' },
      { label: '페이지', href: '/pages' },
    ],
  },
  {
    label: '설정',
    href: '/settings',
    icon: <Settings className="w-5 h-5" />,
  },
];

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);

  const items = menuItems.map((item) => ({
    ...item,
    active: item.href === pathname,
    children: item.children?.map((child) => ({
      ...child,
      active: child.href === pathname,
    })),
  }));

  return (
    <div className="min-h-screen">
      <Sidebar
        menuItems={items}
        siteTitle="My App"
        onMenuClick={(href) => router.push(href)}
        onCollapsedChange={setCollapsed}
      />
      <main className={`transition-all duration-300 ${collapsed ? 'ml-16' : 'ml-64'}`}>
        {children}
      </main>
    </div>
  );
}