reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

re-enable nip-04 with more polish, prepare for nip-44

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-24 09:05:34 +07:00
parent 3455eb701f
commit 4893ebd932
19 changed files with 376 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/shared/navigation.tsx
View File

@@ -1,9 +1,9 @@
import * as Collapsible from '@radix-ui/react-collapsible';
import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
// import { ChatsList } from '@app/chats/components/list';
import { ChatsList } from '@app/chats/components/list';
import { ComposerModal } from '@shared/composer/modal';
import {
ArrowLeftIcon,
@@ -14,11 +14,13 @@ import {
} from '@shared/icons';
import { LumeBar } from '@shared/lumeBar';
import { useSidebar } from '@stores/sidebar';
export function Navigation() {
const navigate = useNavigate();
const [feeds, setFeeds] = useState(true);
// const [chats, setChats] = useState(true);
const [feeds, toggleFeeds] = useSidebar((state) => [state.feeds, state.toggleFeeds]);
const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
return (
<div className="relative h-full w-[232px] bg-black/80">
@@ -43,7 +45,7 @@ export function Navigation() {
</button>
</div>
</div>
<Collapsible.Root open={feeds} onOpenChange={setFeeds}>
<Collapsible.Root open={feeds} onOpenChange={toggleFeeds}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1">
@@ -80,7 +82,7 @@ export function Navigation() {
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<SpaceIcon className="h-3 w-3 text-white" />
</span>
<span className="text-sm font-medium">Space</span>
Space
</NavLink>
<NavLink
to="/notifications"
@@ -95,12 +97,34 @@ export function Navigation() {
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<BellIcon className="h-3 w-3 text-white" />
</span>
<span className="text-sm font-medium">Notifications</span>
Notifications
</NavLink>
</div>
</Collapsible.Content>
</div>
</Collapsible.Root>
<Collapsible.Root open={chats} onOpenChange={toggleChats}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1">
<div
className={twMerge(
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
open ? '' : 'rotate-180'
)}
>
<NavArrowDownIcon className="h-3 w-3 text-white/50" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
Chats
</h3>
</button>
</Collapsible.Trigger>
<Collapsible.Content>
<ChatsList />
</Collapsible.Content>
</div>
</Collapsible.Root>
</div>
<LumeBar />
</div>