112 lines
3.7 KiB
TypeScript
112 lines
3.7 KiB
TypeScript
/**
|
|
* @file components/layout/MemberDrawer.tsx
|
|
* @description Responsive drawer and sidebar component that manages the visibility, mobile overlay, click-outside dismissal, and rendering of the member list.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { useSidebarStore } from "@/lib/stores/useSidebarStore";
|
|
import { MemberSidebar } from "@/components/sidebar/MemberSidebar";
|
|
import { X } from "lucide-react";
|
|
import { clsx } from "clsx";
|
|
|
|
/**
|
|
* Renders the desktop sidebar panel and mobile drawer for displaying channel members, handling state triggers and click-outside closing logic.
|
|
*
|
|
* @returns {JSX.Element} The rendered member drawer component for desktop and mobile views.
|
|
*/
|
|
export function MemberDrawer() {
|
|
const { isMembersOpen, closeMembers } = useSidebarStore();
|
|
const desktopSidebarRef = useRef<HTMLElement>(null);
|
|
|
|
useEffect(() => {
|
|
/**
|
|
* Handles mouse click events outside of the desktop sidebar to close it.
|
|
*
|
|
* @param {MouseEvent} event - The native DOM mouse event.
|
|
*/
|
|
function handleClickOutside(event: MouseEvent) {
|
|
const target = event.target as HTMLElement;
|
|
if (target.closest('button[title*="Mitgliederliste"]')) return;
|
|
|
|
if (
|
|
isMembersOpen &&
|
|
desktopSidebarRef.current &&
|
|
!desktopSidebarRef.current.contains(target)
|
|
) {
|
|
closeMembers();
|
|
}
|
|
}
|
|
|
|
if (isMembersOpen) {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
}
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isMembersOpen, closeMembers]);
|
|
|
|
/**
|
|
* Internal header component for the member drawer containing title labeling and close action button.
|
|
*
|
|
* @param {Object} props - The component props.
|
|
* @param {string} props.title - The tooltip title for the close button.
|
|
* @returns {JSX.Element} The header element.
|
|
*/
|
|
const Header = ({ title }: { title: string }) => (
|
|
<div className="h-14 border-b border-surface/50 flex items-center justify-between px-4 shrink-0">
|
|
<span className="font-semibold text-xs text-muted uppercase tracking-wider">
|
|
Members
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={closeMembers}
|
|
className="p-1.5 rounded-md text-muted hover:text-white hover:bg-background transition-colors cursor-pointer"
|
|
title={title}
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop View */}
|
|
<aside
|
|
ref={desktopSidebarRef}
|
|
className={clsx(
|
|
"hidden md:flex flex-col h-full bg-surface shrink-0 transition-all duration-300 ease-in-out overflow-hidden border-l border-surface/50",
|
|
isMembersOpen
|
|
? "w-60 opacity-100"
|
|
: "w-0 opacity-0 pointer-events-none border-l-0",
|
|
)}
|
|
>
|
|
<div className="w-60 flex flex-col h-full">
|
|
<Header title="Mitgliederliste einklappen" />
|
|
<div className="flex-1 overflow-y-auto">
|
|
<MemberSidebar />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Mobile Backdrop & Drawer */}
|
|
{isMembersOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/60 z-30 md:hidden"
|
|
onClick={closeMembers}
|
|
/>
|
|
)}
|
|
|
|
<div
|
|
className={clsx(
|
|
"fixed inset-y-0 right-0 z-40 flex flex-col h-full w-screen sm:w-64 bg-surface transition-transform duration-200 ease-in-out md:hidden shadow-2xl border-l border-surface/50",
|
|
isMembersOpen ? "translate-x-0" : "translate-x-full",
|
|
)}
|
|
>
|
|
<Header title="Schließen" />
|
|
<div className="flex-1 overflow-y-auto">
|
|
<MemberSidebar />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|