52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import { GuildSelector } from "@/components/shared/guild-selector";
|
||
|
|
|
||
|
|
interface HiddenSidebarProps {
|
||
|
|
guildId: string;
|
||
|
|
onGuildChange: (guildId: string | null) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function HiddenSidebar({ guildId, onGuildChange }: HiddenSidebarProps) {
|
||
|
|
const [visible, setVisible] = useState(false);
|
||
|
|
let hideTimer: ReturnType<typeof setTimeout> | null = null;
|
||
|
|
|
||
|
|
const handleMouseEnter = () => {
|
||
|
|
if (hideTimer) clearTimeout(hideTimer);
|
||
|
|
setVisible(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleMouseLeave = () => {
|
||
|
|
hideTimer = setTimeout(() => setVisible(false), 300);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{/* Hotspot trigger */}
|
||
|
|
<div
|
||
|
|
className="fixed left-0 top-0 bottom-0 w-1 z-50"
|
||
|
|
onMouseEnter={handleMouseEnter}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Sidebar */}
|
||
|
|
<div
|
||
|
|
className={`fixed left-0 top-0 bottom-0 z-40 w-56 glass-intense border-r border-glass-border transition-transform duration-150 ease-out ${
|
||
|
|
visible ? "translate-x-0" : "-translate-x-full"
|
||
|
|
}`}
|
||
|
|
onMouseEnter={handleMouseEnter}
|
||
|
|
onMouseLeave={handleMouseLeave}
|
||
|
|
>
|
||
|
|
<div className="flex h-11 items-center gap-2 px-4 border-b border-glass-border">
|
||
|
|
<span className="text-xs font-semibold tracking-wider uppercase text-text-secondary">
|
||
|
|
Guilds
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="p-3 space-y-4">
|
||
|
|
<GuildSelector value={guildId} onChange={onGuildChange} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|