135 lines
7.4 KiB
JavaScript
135 lines
7.4 KiB
JavaScript
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from '@/components/ui/sidebar';
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
|
|
|
import { BadgeCheck, ChevronsUpDown, Star, History, ChevronDown, LogOut, ChevronRight } from 'lucide-react';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "@/components/ui/collapsible"
|
|
|
|
export function AppSidebar({ auth }) {
|
|
const { tags } = usePage().props;
|
|
|
|
const SidebarItem = (props) => {
|
|
const searchParams = new URL(window.location).searchParams;
|
|
const isActive = (!searchParams.has(props.query) && props.name === 'All') || (searchParams.has(props.query) && searchParams.get(props.query) === props.path_word);
|
|
|
|
// To current, replace
|
|
if (searchParams.has(props.query)) {
|
|
searchParams.set(props.query, props.path_word);
|
|
} else {
|
|
searchParams.set(props.query, props.path_word);
|
|
}
|
|
|
|
return (
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild isActive={ isActive }>
|
|
<Link
|
|
href={ "/?" + searchParams.toString() }><span>{ props.name }</span></Link>
|
|
</SidebarMenuButton>
|
|
{ props.count && <SidebarMenuBadge>{ props.count }</SidebarMenuBadge> }
|
|
</SidebarMenuItem>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Sidebar>
|
|
<SidebarContent>
|
|
<Collapsible defaultOpen className="group/collapsible">
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel asChild>
|
|
<CollapsibleTrigger>
|
|
Tags <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
|
|
</CollapsibleTrigger>
|
|
</SidebarGroupLabel>
|
|
<CollapsibleContent>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
<SidebarItem path_word="all" query="tag" name="All" />
|
|
{ tags.theme.map(item => <SidebarItem query="tag" key={ item.path_word } { ...item } />) }
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</CollapsibleContent>
|
|
</SidebarGroup>
|
|
</Collapsible>
|
|
|
|
<Collapsible className="group/collapsible">
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel asChild>
|
|
<CollapsibleTrigger>
|
|
Region <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
|
|
</CollapsibleTrigger>
|
|
</SidebarGroupLabel>
|
|
<CollapsibleContent>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
<SidebarItem path_word="all" query="top" name="All" />
|
|
{ tags.top.map(item => <SidebarItem query="top" key={ item.path_word } { ...item } />) }
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</CollapsibleContent>
|
|
</SidebarGroup>
|
|
</Collapsible>
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
>
|
|
<Avatar className="h-8 w-8 rounded-lg">
|
|
<AvatarFallback className="rounded-lg">
|
|
{ auth.user.name.slice(0, 1).toLocaleUpperCase() }
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
<span className="truncate font-semibold">
|
|
{ auth.user.name }
|
|
</span>
|
|
</div>
|
|
<ChevronsUpDown className="ml-auto size-4" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
|
side="bottom"
|
|
align="end"
|
|
sideOffset={ 4 }
|
|
>
|
|
<DropdownMenuLabel className="p-0 font-normal">
|
|
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
|
<Avatar className="h-8 w-8 rounded-lg">
|
|
<AvatarFallback className="rounded-lg">
|
|
{ auth.user.name.slice(0, 1).toLocaleUpperCase() }
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
<span className="truncate font-semibold">
|
|
{ auth.user.name }
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem asChild><Link href={ route('profile.edit') }><BadgeCheck /> Profile</Link></DropdownMenuItem>
|
|
<DropdownMenuItem asChild><Link href={ route('comics.favourites') }><Star /> Favourites</Link></DropdownMenuItem>
|
|
<DropdownMenuItem asChild><Link href={ route('comics.histories') }><History /> History</Link></DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild><Link method="post" href={ route('logout') }><LogOut /> Log out</Link></DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
)
|
|
}
|