37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { useState } from "react";
|
|
import { Outlet } from "react-router-dom";
|
|
import { FiMenu, FiChevronsLeft } from "react-icons/fi";
|
|
import ChatSidebar from "@/components/social/chat/ChatSidebar";
|
|
|
|
export default function ChatLayout() {
|
|
const [open, setOpen] = useState(true);
|
|
|
|
return (
|
|
<div
|
|
className={[
|
|
"grid h-screen transition-[grid-template-columns] duration-200",
|
|
open ? "grid-cols-[280px_1fr]" : "grid-cols-[0px_1fr]",
|
|
].join(" ")}
|
|
>
|
|
{/* Sidebar — hidden via overflow+width collapse, not unmount (keeps scroll pos) */}
|
|
<div className="overflow-hidden">
|
|
<ChatSidebar />
|
|
</div>
|
|
|
|
<section className="relative flex h-full flex-col overflow-hidden">
|
|
{/* Sidebar toggle — sits at the top-left of the chat pane */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="absolute left-3 top-3 z-20 flex h-7 w-7 items-center justify-center rounded-full bg-brand-bgLight/60 text-brand-text/60 hover:bg-brand-lines/20 hover:text-brand-text transition-colors"
|
|
aria-label={open ? "Hide sidebar" : "Show sidebar"}
|
|
>
|
|
{open ? <FiChevronsLeft size={15} /> : <FiMenu size={15} />}
|
|
</button>
|
|
|
|
<Outlet />
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|