91 lines
3 KiB
TypeScript
91 lines
3 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 type { ServerWithChannels } from "@/lib/context/ServerContext";
|
|
import type { UserStatus } from "@/db/schema";
|
|
import { clsx } from "clsx";
|
|
|
|
/**
|
|
* Properties representing the user in the sidebar.
|
|
*
|
|
* @interface SidebarUser
|
|
* @property {string} username - The display name of the user.
|
|
* @property {string} color - The custom color assigned to the user's avatar or profile.
|
|
* @property {UserStatus} status - The current online status of the user.
|
|
*/
|
|
export interface SidebarUser {
|
|
username: string;
|
|
color: string;
|
|
status: UserStatus;
|
|
}
|
|
|
|
/**
|
|
* Properties for the AppSidebar component.
|
|
*
|
|
* @interface AppSidebarProps
|
|
* @property {ServerWithChannels[]} servers - List of available servers including their channels.
|
|
* @property {SidebarUser} user - Information about the currently authenticated user.
|
|
*/
|
|
interface AppSidebarProps {
|
|
servers: ServerWithChannels[];
|
|
user: SidebarUser;
|
|
}
|
|
|
|
/**
|
|
* Renders the responsive application sidebar containing server navigation, channel lists, and user profile.
|
|
*
|
|
* @param {AppSidebarProps} props - The component props.
|
|
* @returns {JSX.Element} The rendered mobile overlay and responsive sidebar structure.
|
|
*/
|
|
export function AppSidebar({ servers, user }: AppSidebarProps) {
|
|
const { isNavOpen, closeAll } = useSidebarStore();
|
|
|
|
return (
|
|
<>
|
|
{/* 1. DESKTOP VIEW (md:flex) - Collapses flexibly via transition/width */}
|
|
<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} />
|
|
<ChannelSidebar />
|
|
</div>
|
|
<div className="w-78">
|
|
<UserPanel user={user} />
|
|
</div>
|
|
</aside>
|
|
|
|
{/* 2. MOBILE VIEW (md:hidden) - Functions as a slide-out drawer */}
|
|
{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} />
|
|
<ChannelSidebar />
|
|
</div>
|
|
<UserPanel user={user} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|