86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
/**
|
|
* @file components/layout/AppSidebar.tsx
|
|
* @description Responsive sidebar wrapper for server and channel sidebars with collapsible desktop support.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useSidebarStore } from "@/lib/stores/useSidebarStore";
|
|
import { ServerSidebar } from "@/components/sidebar/ServerSidebar";
|
|
import { ChannelSidebar } from "@/components/sidebar/ChannelSidebar";
|
|
import { UserPanel } from "@/components/sidebar/UserPanel";
|
|
import {
|
|
useActiveServer,
|
|
type ServerWithChannels,
|
|
} from "@/lib/context/ServerContext";
|
|
import { clsx } from "clsx";
|
|
import {
|
|
DirectMessageSidebar,
|
|
SidebarConversation,
|
|
} from "../sidebar/DirectMessageSidebar";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
/** Properties for the AppSidebar component. */
|
|
interface AppSidebarProps {
|
|
servers: ServerWithChannels[];
|
|
conversations: SidebarConversation[];
|
|
}
|
|
|
|
/** Renders the responsive application sidebar containing server navigation, channel lists, and user profile. */
|
|
export function AppSidebar({ servers, conversations = [] }: AppSidebarProps) {
|
|
const { isNavOpen, closeAll } = useSidebarStore();
|
|
const { activeServer } = useActiveServer();
|
|
const pathname = usePathname();
|
|
|
|
const isServerRoute = pathname?.startsWith("/servers");
|
|
const isDirectMessageView = !isServerRoute && !activeServer;
|
|
|
|
return (
|
|
<>
|
|
{/* 1. DESKTOP VIEW (md:flex) */}
|
|
<aside
|
|
className={clsx(
|
|
"hidden md:flex flex-col h-full bg-surface shrink-0 transition-all duration-300 ease-in-out overflow-hidden border-r border-background",
|
|
isNavOpen ? "w-78 opacity-100" : "w-0 opacity-0 pointer-events-none",
|
|
)}
|
|
>
|
|
<div className="flex flex-1 min-h-0 w-78">
|
|
<ServerSidebar servers={servers} />
|
|
{isDirectMessageView ? (
|
|
<DirectMessageSidebar conversations={conversations} />
|
|
) : (
|
|
<ChannelSidebar />
|
|
)}
|
|
</div>
|
|
<div className="w-78">
|
|
<UserPanel />
|
|
</div>
|
|
</aside>
|
|
|
|
{/* 2. MOBILE VIEW (md:hidden) */}
|
|
{isNavOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/60 z-30 md:hidden"
|
|
onClick={closeAll}
|
|
/>
|
|
)}
|
|
|
|
<div
|
|
className={clsx(
|
|
"fixed inset-y-0 left-0 z-40 flex flex-col h-full w-full bg-surface transition-transform duration-200 ease-in-out md:hidden",
|
|
isNavOpen ? "translate-x-0" : "-translate-x-full",
|
|
)}
|
|
>
|
|
<div className="flex flex-1 min-h-0 w-full">
|
|
<ServerSidebar servers={servers} />
|
|
{isDirectMessageView ? (
|
|
<DirectMessageSidebar conversations={conversations} />
|
|
) : (
|
|
<ChannelSidebar />
|
|
)}
|
|
</div>
|
|
<UserPanel />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|