62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
||
|
|
import { Menu } from "lucide-react";
|
||
|
|
import { MenuItem } from "@/types/menu";
|
||
|
|
import { LAYOUT_CONFIG } from "@/constants/layout";
|
||
|
|
import { MainSidebar } from "@/components/layout/MainSidebar";
|
||
|
|
|
||
|
|
interface SideMenuProps {
|
||
|
|
menuList: MenuItem[];
|
||
|
|
expandedMenus: Set<string>;
|
||
|
|
isSidebarOpen: boolean;
|
||
|
|
onSidebarToggle: (open: boolean) => void;
|
||
|
|
onMenuClick: (menu: MenuItem) => void;
|
||
|
|
variant?: "mobile" | "desktop";
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 사이드 메뉴 컴포넌트
|
||
|
|
* 모바일에서는 Sheet로, 데스크톱에서는 햄버거 버튼으로 동작
|
||
|
|
*/
|
||
|
|
export function SideMenu({
|
||
|
|
menuList,
|
||
|
|
expandedMenus,
|
||
|
|
isSidebarOpen,
|
||
|
|
onSidebarToggle,
|
||
|
|
onMenuClick,
|
||
|
|
variant = "mobile",
|
||
|
|
}: SideMenuProps) {
|
||
|
|
if (variant === "desktop") {
|
||
|
|
// 데스크톱용 햄버거 버튼
|
||
|
|
return (
|
||
|
|
<Button variant="ghost" size="icon" onClick={() => onSidebarToggle(!isSidebarOpen)} className="h-8 w-8">
|
||
|
|
<Menu className="h-5 w-5" />
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 모바일용 Sheet 메뉴
|
||
|
|
return (
|
||
|
|
<Sheet open={isSidebarOpen} onOpenChange={onSidebarToggle}>
|
||
|
|
<SheetTrigger asChild>
|
||
|
|
<Button variant="ghost" size="icon" className="md:hidden">
|
||
|
|
<Menu className="h-5 w-5" />
|
||
|
|
</Button>
|
||
|
|
</SheetTrigger>
|
||
|
|
<SheetContent side="left" className="w-64 p-0">
|
||
|
|
<div className="flex h-full flex-col">
|
||
|
|
<div className="border-b p-4">
|
||
|
|
<h2 className="font-semibold">{LAYOUT_CONFIG.COMPANY_NAME}</h2>
|
||
|
|
</div>
|
||
|
|
<MainSidebar
|
||
|
|
menuList={menuList}
|
||
|
|
expandedMenus={expandedMenus}
|
||
|
|
onMenuClick={onMenuClick}
|
||
|
|
className="flex-1 p-4"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</SheetContent>
|
||
|
|
</Sheet>
|
||
|
|
);
|
||
|
|
}
|