138 lines
4.0 KiB
TypeScript
138 lines
4.0 KiB
TypeScript
import { Link, useLocation } from '@tanstack/react-router'
|
|
import {
|
|
Inbox,
|
|
Layers3,
|
|
MessagesSquare,
|
|
NotebookPen,
|
|
Search,
|
|
} from 'lucide-react'
|
|
import { type ReactNode, useState } from 'react'
|
|
import { Avatar, AvatarFallback } from '#/components/ui/avatar'
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarSeparator,
|
|
} from '#/components/ui/sidebar'
|
|
import { ConnectionManagerDialog } from '#/features/connections/connection-manager-dialog'
|
|
|
|
type WorkspaceNavigationProps = {
|
|
children?: ReactNode
|
|
footer?: ReactNode
|
|
hasTemporaryDecks?: boolean
|
|
}
|
|
|
|
export function WorkspaceNavigation({
|
|
children,
|
|
footer,
|
|
hasTemporaryDecks,
|
|
}: WorkspaceNavigationProps) {
|
|
const [managingAccounts, setManagingAccounts] = useState(false)
|
|
const pathname = useLocation({ select: (location) => location.pathname })
|
|
const navigation = [
|
|
{
|
|
title: '連絡',
|
|
to: '/support',
|
|
icon: MessagesSquare,
|
|
active: pathname === '/support',
|
|
},
|
|
{
|
|
title: '記録',
|
|
to: '/journal',
|
|
icon: NotebookPen,
|
|
active: pathname === '/journal',
|
|
},
|
|
{
|
|
title: 'リーダー',
|
|
to: '/inbox',
|
|
icon: Inbox,
|
|
active: pathname === '/inbox',
|
|
},
|
|
{
|
|
title: 'Twitter Lite',
|
|
to: '/deck',
|
|
icon: Search,
|
|
active: pathname === '/' || pathname === '/deck',
|
|
},
|
|
] as const
|
|
|
|
return (
|
|
<Sidebar
|
|
collapsible="none"
|
|
className="workspace-navigation w-16! shrink-0 border-r"
|
|
>
|
|
<SidebarHeader className="items-center py-4">
|
|
<div
|
|
className="flex size-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
|
|
role="img"
|
|
aria-label="ワークスペース"
|
|
>
|
|
<Layers3 className="size-5" aria-hidden="true" />
|
|
</div>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup className="px-3">
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{navigation.map((item) => (
|
|
<SidebarMenuItem key={item.to}>
|
|
<SidebarMenuButton
|
|
aria-label={item.title}
|
|
aria-current={item.active ? 'page' : undefined}
|
|
tooltip={{ children: item.title, hidden: false }}
|
|
isActive={item.active}
|
|
render={<Link to={item.to} />}
|
|
className="size-10 justify-center p-0"
|
|
>
|
|
<item.icon />
|
|
<span className="sr-only">{item.title}</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
{children && (
|
|
<>
|
|
<SidebarSeparator className="mx-3 w-auto" />
|
|
<SidebarGroup className="px-3">
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>{children}</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</>
|
|
)}
|
|
</SidebarContent>
|
|
<SidebarFooter className="items-center px-3 pb-4">
|
|
{footer && <SidebarMenu>{footer}</SidebarMenu>}
|
|
<SidebarMenu className="mt-2">
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
aria-label="接続アカウントを管理"
|
|
tooltip={{ children: '接続アカウントを管理', hidden: false }}
|
|
className="size-10 justify-center p-0"
|
|
onClick={() => setManagingAccounts(true)}
|
|
>
|
|
<Avatar className="size-8">
|
|
<AvatarFallback>Y</AvatarFallback>
|
|
</Avatar>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarFooter>
|
|
{managingAccounts && (
|
|
<ConnectionManagerDialog
|
|
onClose={() => setManagingAccounts(false)}
|
|
hasTemporaryDecks={hasTemporaryDecks}
|
|
/>
|
|
)}
|
|
</Sidebar>
|
|
)
|
|
}
|