43 lines
No EOL
1.6 KiB
TypeScript
43 lines
No EOL
1.6 KiB
TypeScript
import { useAtomValue } from "jotai";
|
|
import { SidebarNav, BottomNav, SidebarToggle } from "./nav";
|
|
import { sidebarAtom } from "./sidebarAtom";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface LayoutProps {
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export default function Layout({ children }: LayoutProps) {
|
|
const sidebarState = useAtomValue(sidebarAtom);
|
|
const isSidebarOpen = !sidebarState.isCollapsed;
|
|
|
|
return (
|
|
<div className="flex flex-col md:flex-row relative">
|
|
{/* Desktop Sidebar - 데스크탑에서만 보이는 사이드바 */}
|
|
<aside className={cn("hidden md:flex md:flex-col",
|
|
"transition-all duration-300 ease-in-out",
|
|
"border-r bg-background sticky top-0 h-screen",
|
|
isSidebarOpen ? 'w-64' : 'w-16')}>
|
|
<div className="flex items-center justify-between p-2 border-b">
|
|
{isSidebarOpen && (
|
|
<h2 className="text-lg font-semibold ml-4">Ionian</h2>
|
|
)}
|
|
<SidebarToggle className="size-10 p-2 ml-1" />
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto">
|
|
<SidebarNav />
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 flex flex-col min-h-0 p-0 md:pb-0 pb-14">
|
|
{children}
|
|
</main>
|
|
|
|
{/* Mobile Bottom Navigation - 모바일에서만 보이는 하단 네비게이션 */}
|
|
<div className="md:hidden fixed bottom-0 left-0 right-0 z-30">
|
|
<BottomNav />
|
|
</div>
|
|
</div>
|
|
);
|
|
} |