358 lines
14 KiB
TypeScript
358 lines
14 KiB
TypeScript
"use client";
|
|
import React, { CSSProperties } from 'react'
|
|
import { Link, usePathname } from "@/components/navigation";
|
|
import { useState } from "react";
|
|
import { ChevronDown, Dot, LucideIcon } from "lucide-react";
|
|
import { GripVertical } from 'lucide-react';
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger
|
|
} from "@/components/ui/collapsible";
|
|
import {
|
|
Tooltip,
|
|
TooltipTrigger,
|
|
TooltipContent,
|
|
TooltipProvider
|
|
} from "@/components/ui/tooltip";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuGroup,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuPortal,
|
|
DropdownMenuSubContent
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import { Submenu } from "@/lib/menus"
|
|
|
|
// for dnd
|
|
|
|
import {
|
|
useSortable,
|
|
arrayMove,
|
|
SortableContext,
|
|
verticalListSortingStrategy,
|
|
horizontalListSortingStrategy,
|
|
} from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { useConfig } from '@/hooks/use-config';
|
|
import { MultiCollapseMenuButton } from './classic-multi-collapse-button';
|
|
import { useMediaQuery } from '@/hooks/use-media-query';
|
|
import { useMobileMenuConfig } from '@/hooks/use-mobile-menu';
|
|
import { useMenuHoverConfig } from '@/hooks/use-menu-hover';
|
|
|
|
|
|
interface CollapseMenuButtonProps {
|
|
icon: string;
|
|
label: string;
|
|
active: boolean;
|
|
submenus: Submenu[];
|
|
collapsed: boolean | undefined;
|
|
id: string
|
|
|
|
}
|
|
|
|
export function CollapseMenuButton({
|
|
icon,
|
|
label,
|
|
active,
|
|
submenus,
|
|
collapsed,
|
|
id,
|
|
|
|
}: CollapseMenuButtonProps) {
|
|
const pathname = usePathname();
|
|
const isSubmenuActive = submenus.some((submenu) => submenu.active || pathname.startsWith(submenu.href));
|
|
const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);
|
|
const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig()
|
|
const [config] = useConfig();
|
|
const [hoverConfig] = useMenuHoverConfig();
|
|
const { hovered } = hoverConfig;
|
|
const sidebarTheme = config.sidebarTheme !== 'light' ? `dark theme-${config.sidebarTheme}` : `theme-${config.sidebarTheme}`
|
|
const isDesktop = useMediaQuery("(min-width: 1280px)");
|
|
const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({
|
|
id: id,
|
|
|
|
})
|
|
|
|
React.useEffect(() => {
|
|
setIsCollapsed(isSubmenuActive);
|
|
}, [isSubmenuActive, pathname]);
|
|
|
|
|
|
const style: CSSProperties = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition: transition,
|
|
opacity: isDragging ? 0.8 : 1,
|
|
zIndex: isDragging ? 1 : 0,
|
|
position: "relative",
|
|
};
|
|
|
|
if (config.sidebar === 'compact' && isDesktop) {
|
|
return (
|
|
<Collapsible
|
|
open={isCollapsed}
|
|
onOpenChange={setIsCollapsed}
|
|
|
|
|
|
>
|
|
<CollapsibleTrigger
|
|
|
|
asChild
|
|
>
|
|
<Button
|
|
|
|
variant={active ? "default" : "ghost"}
|
|
fullWidth
|
|
color={active ? 'default' : 'secondary'}
|
|
className={cn('flex-col h-auto py-1.5 px-3.5 capitalize font-semibold ring-offset-sidebar', {
|
|
'data-[state=open]:bg-secondary': !active
|
|
})}
|
|
|
|
|
|
>
|
|
|
|
<Icon icon={icon} className={cn('h-6 w-6 mb-1 ')} />
|
|
|
|
<p
|
|
className={cn(
|
|
"max-w-[200px] text-[11px] truncate ",
|
|
)}
|
|
>
|
|
{label}
|
|
</p>
|
|
|
|
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
|
|
{submenus.map(({ href, label, active }, index) => (
|
|
|
|
|
|
<Button
|
|
key={index}
|
|
color={active ? 'default' : 'secondary'}
|
|
variant="ghost"
|
|
fullWidth
|
|
size='sm'
|
|
className={cn('w-full justify-center text-center p-0 h-auto hover:bg-transparent hover:text-default capitalize text-xs font-normal mb-1.5 first:mt-2 last:mb-0', {
|
|
'font-semibold': active
|
|
})}
|
|
asChild
|
|
>
|
|
<Link href={href}>
|
|
|
|
{label}
|
|
</Link>
|
|
</Button>
|
|
|
|
))}
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
)
|
|
}
|
|
return !collapsed || hovered ? (
|
|
<Collapsible
|
|
open={isCollapsed}
|
|
onOpenChange={setIsCollapsed}
|
|
|
|
|
|
>
|
|
<CollapsibleTrigger
|
|
className=""
|
|
asChild
|
|
>
|
|
<div className='peer flex items-center group [&[data-state=open]>button>div>div>svg]:rotate-180' >
|
|
|
|
<Button
|
|
style={style}
|
|
ref={setNodeRef}
|
|
variant={active ? "default" : "ghost"}
|
|
color='secondary'
|
|
className={cn('justify-start capitalize group h-auto py-2.5 md:px-3 px-3 ring-offset-sidebar group-data-[state=open]:bg-secondary ', {
|
|
'hover:md:ps-8': config.sidebar === 'draggable' && isDesktop
|
|
})}
|
|
fullWidth
|
|
>
|
|
<div className="w-full items-center flex justify-between">
|
|
|
|
<div className="flex items-center">
|
|
{config.sidebar === 'draggable' && isDesktop && (
|
|
<GripVertical
|
|
|
|
{...attributes} {...listeners} className={cn('inset-t-0 absolute me-1 h-5 w-5 ltr:-translate-x-6 rtl:translate-x-6 invisible opacity-0 group-hover:opacity-100 transition-all group-hover:visible ltr:group-hover:-translate-x-5 rtl:group-hover:translate-x-5 ', {
|
|
|
|
})} />
|
|
)}
|
|
<span className="me-4">
|
|
<Icon icon={icon} className="h-5 w-5" />
|
|
</span>
|
|
<p
|
|
className={cn(
|
|
"max-w-[150px] truncate",
|
|
!collapsed || hovered
|
|
? "translate-x-0 opacity-100"
|
|
: "-translate-x-96 opacity-0"
|
|
)}
|
|
>
|
|
{label}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"whitespace-nowrap inline-flex items-center justify-center rounded-full h-5 w-5 bg-menu-arrow text-menu-menu-foreground group-hover:bg-menu-arrow-active transition-all duration-300 ",
|
|
!collapsed || hovered
|
|
? "translate-x-0 opacity-100"
|
|
: "-translate-x-96 opacity-0", {
|
|
'bg-menu-arrow-active': active
|
|
}
|
|
)}
|
|
>
|
|
<ChevronDown
|
|
size={16}
|
|
className="transition-transform duration-200"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
|
|
{submenus.map(({ href, label, active, children: subChildren }, index) => (
|
|
|
|
subChildren?.length === 0 ? (
|
|
<Button
|
|
onClick={() => setMobileMenuConfig({ ...mobileMenuConfig, isOpen: false })}
|
|
key={index}
|
|
color='secondary'
|
|
variant="ghost"
|
|
className={cn('w-full justify-start h-auto hover:bg-transparent hover:ring-offset-0 capitalize text-sm font-normal mb-1.5 last:mb-0 first:mt-2 md:px-5 px-5', {
|
|
'font-medium': active,
|
|
'dark:opacity-80': !active,
|
|
})}
|
|
asChild
|
|
>
|
|
<Link href={href}>
|
|
|
|
<span
|
|
className={cn(
|
|
"h-1.5 w-1.5 me-3 rounded-full transition-all duration-150 ring-1 ring-default-600 ",
|
|
{
|
|
"ring-4 bg-default ring-opacity-30 ring-default": active,
|
|
|
|
}
|
|
)}
|
|
></span>
|
|
<p
|
|
className={cn(
|
|
"max-w-[170px] truncate",
|
|
!collapsed || hovered
|
|
? "translate-x-0 opacity-100"
|
|
: "-translate-x-96 opacity-0"
|
|
)}
|
|
>
|
|
{label}
|
|
</p>
|
|
</Link>
|
|
</Button>
|
|
) : (
|
|
<React.Fragment key={index}>
|
|
<MultiCollapseMenuButton
|
|
label={label}
|
|
active={active}
|
|
submenus={subChildren as any}
|
|
|
|
|
|
/>
|
|
</React.Fragment>
|
|
)
|
|
|
|
|
|
))}
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
) : (
|
|
<DropdownMenu >
|
|
<TooltipProvider disableHoverableContent>
|
|
<Tooltip delayDuration={100}>
|
|
<TooltipTrigger asChild>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant={active ? "default" : "ghost"}
|
|
color='secondary'
|
|
className="w-full justify-center"
|
|
size="icon"
|
|
>
|
|
|
|
<Icon icon={icon} className="h-5 w-5" />
|
|
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right" align="start" alignOffset={2}>
|
|
{label}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
<DropdownMenuContent side="right" sideOffset={20} align="start" className={` border-sidebar space-y-1.5 ${sidebarTheme}`} >
|
|
<DropdownMenuLabel className="max-w-[190px] truncate">
|
|
{label}
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator className='bg-default-300' />
|
|
<DropdownMenuGroup>
|
|
|
|
|
|
{submenus.map(({ href, label, icon, active, children }, index) => (
|
|
children?.length === 0 ? (
|
|
<DropdownMenuItem key={index} asChild className={cn('focus:bg-secondary', {
|
|
'bg-secondary text-secondary-foreground ': active
|
|
})}>
|
|
<Link className="cursor-pointer flex-flex gap-3" href={href}>
|
|
{icon && (
|
|
<Icon icon={icon} className=' h-4 w-4' />
|
|
)}
|
|
<p className="max-w-[180px] truncate">{label} </p>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
) : (
|
|
<DropdownMenuSub key={index}>
|
|
<DropdownMenuSubTrigger>
|
|
<span>{label}</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<ScrollArea className='h-[200px]'>
|
|
|
|
|
|
{children?.map(({ href, label, active }, index) => (
|
|
|
|
|
|
<DropdownMenuItem key={`nested-index-${index}`}>
|
|
<Link href={href}>{label}</Link>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</ScrollArea>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
)
|
|
|
|
|
|
))}
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|