updated navigation

This commit is contained in:
Ren Amamiya
2023-04-01 15:46:08 +07:00
parent 383c9e55ac
commit 27082acf5c
7 changed files with 49 additions and 25 deletions

View File

@@ -6,21 +6,19 @@ export default function Chats() {
const [open, setOpen] = useState(true);
return (
<Collapsible.Root open={open} onOpenChange={setOpen} className="h-full shrink-0">
<div className="flex h-full flex-col gap-1 px-2 pb-8">
<Collapsible.Root open={open} onOpenChange={setOpen}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
<div
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? 'rotate-180' : ''
}`}
>
<TriangleUpIcon className="h-4 w-4 text-zinc-500" />
<TriangleUpIcon className="h-4 w-4 text-zinc-700" />
</div>
<h3 className="bg-gradient-to-r from-red-300 via-pink-100 to-blue-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent">
Chats
</h3>
<h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Chats</h3>
</Collapsible.Trigger>
<Collapsible.Content className="h-full"></Collapsible.Content>
<Collapsible.Content></Collapsible.Content>
</div>
</Collapsible.Root>
);