58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
/**
|
|
* @file components/sidebar/DirectMessageSidebar.tsx
|
|
* @description Sidebar listing direct messages and friends list when no server is selected.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useSidebarStore } from "@/lib/stores/useSidebarStore";
|
|
import { PanelLeftClose } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
/**
|
|
* DirectMessageSidebar component that renders navigation for direct messages and friends.
|
|
* Includes a header with collapsible controls and links for viewing chat channels and active conversations.
|
|
*
|
|
* @returns {JSX.Element} The direct message sidebar component layout.
|
|
*/
|
|
export function DirectMessageSidebar() {
|
|
const { toggleNav } = useSidebarStore();
|
|
|
|
return (
|
|
<div className="flex-1 w-full md:w-60 bg-surface/50 border-r border-background flex flex-col h-full shrink-0">
|
|
{/* Header */}
|
|
<div className="h-14 border-b border-background flex items-center justify-between px-4 font-bold text-white shadow-sm">
|
|
<span>Direct Messages</span>
|
|
<button
|
|
type="button"
|
|
onClick={toggleNav}
|
|
title="Collapse the sidebar"
|
|
className="p-1.5 rounded-md text-muted hover:text-white hover:bg-surface transition-colors cursor-pointer"
|
|
>
|
|
<PanelLeftClose className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Navigation & List */}
|
|
<div className="flex-1 overflow-y-auto p-3 space-y-4">
|
|
<div className="space-y-1">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-3 px-3 py-2 rounded-md text-sm text-white bg-accent/20 font-medium transition-all"
|
|
>
|
|
<span>Friends</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-xs font-semibold text-muted px-2 mb-2 uppercase tracking-wider">
|
|
Direct Messages
|
|
</div>
|
|
<div className="text-sm text-muted px-2 py-1 italic">
|
|
No active chats
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|