57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
/**
|
|
* @file app/(app)/layout.tsx
|
|
* @description Main application layout component that manages responsive sidebars and drawer overlays.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useSidebarStore } from "@/lib/stores/useSidebarStore";
|
|
import { ServerSidebar } from "@/components/sidebar/ServerSidebar";
|
|
import { ChannelSidebar } from "@/components/sidebar/ChannelSidebar";
|
|
import { MemberSidebar } from "@/components/sidebar/MemberSidebar";
|
|
import { UserProfile } from "@/components/sidebar/UserProfile";
|
|
import { MobileDrawer } from "@/components/ui/MobileDrawer";
|
|
|
|
/**
|
|
* Client component serving as the primary application layout, handling the server, channel, and member sidebars with mobile drawer support.
|
|
*
|
|
* @param {Object} props - The component props.
|
|
* @param {React.ReactNode} props.children - The child layout or page content to render in the central main view.
|
|
* @returns {JSX.Element} The application layout structure with responsive sidebars.
|
|
*/
|
|
export default function AppLayout({ children }: { children: React.ReactNode }) {
|
|
const { isNavOpen, isMembersOpen, closeAll } = useSidebarStore();
|
|
|
|
return (
|
|
<div className="flex h-screen w-full overflow-hidden bg-background text-foreground">
|
|
{/* Left Navigation: Server + Channels + User Profile */}
|
|
<MobileDrawer
|
|
isOpen={isNavOpen}
|
|
onClose={closeAll}
|
|
side="left"
|
|
breakpoint="md"
|
|
>
|
|
<div className="flex flex-col h-full shrink-0">
|
|
<div className="flex flex-1 min-h-0">
|
|
<ServerSidebar />
|
|
<ChannelSidebar />
|
|
</div>
|
|
<UserProfile />
|
|
</div>
|
|
</MobileDrawer>
|
|
|
|
{/* Center: Main Area */}
|
|
<div className="flex-1 flex min-w-0">{children}</div>
|
|
|
|
{/* Right: List of Members */}
|
|
<MobileDrawer
|
|
isOpen={isMembersOpen}
|
|
onClose={closeAll}
|
|
side="right"
|
|
breakpoint="xl"
|
|
>
|
|
<MemberSidebar />
|
|
</MobileDrawer>
|
|
</div>
|
|
);
|
|
}
|