85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
SidebarMenuAction,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
} from '@boring.tools/ui'
|
|
import { Link, useLocation } from '@tanstack/react-router'
|
|
import { ChevronRightIcon, NotebookTextIcon, PlusIcon } from 'lucide-react'
|
|
import { useEffect } from 'react'
|
|
import { useLocalStorage } from 'usehooks-ts'
|
|
import { usePageList } from '../hooks/usePage'
|
|
|
|
export const SidebarPage = () => {
|
|
const location = useLocation()
|
|
const [value, setValue] = useLocalStorage('sidebar-page-open', false)
|
|
const { data, error } = usePageList()
|
|
|
|
useEffect(() => {
|
|
const firstElement = location.href.split('/')[1]
|
|
if (firstElement === 'page') {
|
|
setValue(true)
|
|
}
|
|
}, [location, setValue])
|
|
|
|
return (
|
|
<Collapsible asChild open={value} onOpenChange={() => setValue(!value)}>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild tooltip="Page">
|
|
<Link to="/page" activeProps={{ className: 'bg-sidebar-accent' }}>
|
|
<NotebookTextIcon />
|
|
<span>Page</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
|
|
<CollapsibleTrigger asChild>
|
|
<SidebarMenuAction className="data-[state=open]:rotate-90">
|
|
<ChevronRightIcon />
|
|
<span className="sr-only">Toggle</span>
|
|
</SidebarMenuAction>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub>
|
|
{!error &&
|
|
data?.map((page) => (
|
|
<SidebarMenuSubItem key={page.id}>
|
|
<SidebarMenuSubButton asChild>
|
|
<Link
|
|
to={`/page/${page?.id}`}
|
|
activeProps={{
|
|
className: 'bg-sidebar-primary',
|
|
}}
|
|
>
|
|
<span>{page.title}</span>
|
|
</Link>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
))}
|
|
|
|
<SidebarMenuSubItem className="opacity-60">
|
|
<SidebarMenuSubButton asChild>
|
|
<Link
|
|
to="/page/create"
|
|
activeProps={{
|
|
className: 'bg-sidebar-primary',
|
|
}}
|
|
>
|
|
<span className="flex items-center gap-1">
|
|
<PlusIcon className="w-3 h-3" />
|
|
New page
|
|
</span>
|
|
</Link>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
)
|
|
}
|