File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import Link from 'next/link';
import { usePathname } from 'next/navigation';
interface SidebarNavItem {
label: string;
href: string;
}
// 현재 정의된 화면은 홈뿐이다 — 신규 화면이 추가될 때마다 이 목록에 항목을 늘린다.
const SIDEBAR_NAV_ITEMS: SidebarNavItem[] = [{ label: '홈', href: '/' }];
interface AdminSidebarProps {
isMobileOpen: boolean;
isDesktopCollapsed: boolean;
onCloseMobile: () => void;
}
/**
* 사이드바 View — 내비 목록을 그린다. 데스크톱 push/접힘과 모바일 오버레이+백드롭은 전부
* Tailwind 반응형 클래스로 처리한다(CSS-first) — JS로 브레이크포인트를 판별하지 않는다.
*/
export function AdminSidebar({
isMobileOpen,
isDesktopCollapsed,
onCloseMobile,
}: AdminSidebarProps) {
const pathname = usePathname();
return (
<>
{isMobileOpen && (
<button
type="button"
aria-label="사이드바 닫기"
onClick={onCloseMobile}
className="fixed inset-0 z-30 bg-foreground/50 md:hidden"
/>
)}
<aside
className={`fixed inset-y-0 left-0 z-40 flex flex-col overflow-hidden border-r border-foreground/15 bg-background transition-all duration-200 md:relative md:z-auto md:translate-x-0 ${
isMobileOpen ? 'w-64 translate-x-0' : 'w-64 -translate-x-full'
} ${isDesktopCollapsed ? 'md:w-16' : 'md:w-64'}`}
>
<nav className="flex flex-1 flex-col gap-1 p-4">
{SIDEBAR_NAV_ITEMS.map((item) => {
const isActive = pathname === item.href;
return (
<Link
key={item.href}
href={item.href}
aria-current={isActive ? 'page' : undefined}
className={`rounded-md px-3 py-2 text-sm whitespace-nowrap ${
isActive
? 'bg-foreground/10 text-foreground'
: 'text-foreground/70'
}`}
>
<span className={isDesktopCollapsed ? 'md:hidden' : undefined}>
{item.label}
</span>
{isDesktopCollapsed && (
<span aria-hidden className="hidden md:inline">
{item.label.slice(0, 1)}
</span>
)}
</Link>
);
})}
</nav>
</aside>
</>
);
}