324 lines
15 KiB
TypeScript
324 lines
15 KiB
TypeScript
// * Packages
|
|
import { Link, usePage } from "@inertiajs/react";
|
|
import { ElementType, ReactNode, useEffect, useRef } from "react";
|
|
import {
|
|
ChevronDown,
|
|
MoreHorizontal,
|
|
Home,
|
|
Users,
|
|
SquareArrowOutUpRight,
|
|
Telescope,
|
|
StickyNote,
|
|
Cog,
|
|
} from "lucide-react";
|
|
import { route } from "ziggy-js";
|
|
// * Components shadcn
|
|
import {
|
|
Sidebar,
|
|
SidebarHeader,
|
|
SidebarContent,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuAction,
|
|
useSidebar,
|
|
} from "@/components/ui/sidebar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Collapsible,
|
|
CollapsibleTrigger,
|
|
CollapsibleContent,
|
|
} from "@/components/ui/collapsible";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { Button } from "@/components/ui/button";
|
|
// * Other
|
|
import ApplicationLogo from "@/back/Components/ApplicationLogo";
|
|
import { Views } from "@/lib/utils";
|
|
import str from "@/hooks/use-string";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import { AppEnv, AuthProp, LaravelEnum } from "@/back/types/global";
|
|
|
|
type NavList = Array<{
|
|
title: string,
|
|
show: boolean,
|
|
links: Array<{
|
|
title: string,
|
|
model?: string,
|
|
link?: string,
|
|
show: boolean,
|
|
icon: ElementType,
|
|
actions?: (model: string) => ReactNode,
|
|
}>
|
|
}>
|
|
|
|
type CustomDropdownMenuItem = {
|
|
route: string;
|
|
policy?: boolean;
|
|
icon?: ElementType;
|
|
trans?: string;
|
|
};
|
|
|
|
export default function AppSidebar() {
|
|
const { appEnv, auth, enumUserRole } = usePage().props as unknown as {
|
|
appEnv: AppEnv;
|
|
auth: AuthProp;
|
|
enumUserRole: LaravelEnum;
|
|
};
|
|
const authPolicies = auth.policies;
|
|
const { state } = useSidebar();
|
|
const prevStateRef = useRef(state);
|
|
const isCollapsed = state === "collapsed";
|
|
const navList: NavList = [
|
|
{
|
|
title: useTrans("back.pages"),
|
|
show: true,
|
|
links: [
|
|
{
|
|
title: useTrans("back.dashboard"),
|
|
model: "dashboard",
|
|
show: true,
|
|
icon: Home,
|
|
},
|
|
{
|
|
title: useTrans("back.your_website"),
|
|
link: route("front.homepage"),
|
|
show: true,
|
|
icon: SquareArrowOutUpRight,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: useTrans("back.modules"),
|
|
show: authPolicies.dynamicPages.viewAny || authPolicies.pageConfigs.viewAny,
|
|
links: [
|
|
{
|
|
title: str(useTrans("models.classes.dynamic-page", { choice: 2 })).ucFirst().value(),
|
|
model: "dynamic-pages",
|
|
show: authPolicies.dynamicPages.viewAny,
|
|
icon: StickyNote,
|
|
actions: (model: string) => filterActions({ items: [
|
|
authPolicies.dynamicPages.create && (
|
|
<CustomDropdownMenuItem
|
|
key="create"
|
|
route={route(`back.${model}.create`)}
|
|
/>
|
|
),
|
|
authPolicies.dynamicPages.viewTrash && (
|
|
<CustomDropdownMenuItem
|
|
key="trash"
|
|
route={route(`back.${model}.trash`)}
|
|
icon={Views.ARCHIVATION.icon}
|
|
trans={str(useTrans(`crud.actions.${Views.ARCHIVATION.label}`)).ucFirst().value()}
|
|
/>
|
|
),
|
|
]})
|
|
},
|
|
{
|
|
title: str(useTrans("models.classes.page-config", { choice: 2 })).ucFirst().value(),
|
|
model: "page-configs",
|
|
show: authPolicies.pageConfigs.viewAny,
|
|
icon: Cog,
|
|
actions: (model: string) => filterActions({ items: [
|
|
authPolicies.pageConfigs.create && (
|
|
<CustomDropdownMenuItem
|
|
key="create"
|
|
route={route(`back.${model}.create`)}
|
|
/>
|
|
),
|
|
authPolicies.pageConfigs.viewTrash && (
|
|
<CustomDropdownMenuItem
|
|
key="trash"
|
|
route={route(`back.${model}.trash`)}
|
|
icon={Views.ARCHIVATION.icon}
|
|
trans={str(useTrans(`crud.actions.${Views.ARCHIVATION.label}`)).ucFirst().value()}
|
|
/>
|
|
),
|
|
]})
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: str(useTrans("enums.user-role.admin")).plural().value(),
|
|
show: auth.user.role === enumUserRole.conceptor.value,
|
|
links: [
|
|
{
|
|
title: str(useTrans("models.classes.user")).ucFirst().plural().value(),
|
|
model: "users",
|
|
icon: Users,
|
|
show: authPolicies.users.viewAny,
|
|
actions: (model: string) => filterActions({ model }),
|
|
},
|
|
{
|
|
title: useTrans("back.telescope"),
|
|
link: route("telescope"),
|
|
icon: Telescope,
|
|
show: appEnv.mode === "local",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const filterActions = ({ items, model }: { items?: ReactNode[], model?: string }) => {
|
|
// Set create action by default.
|
|
if (!items && model) {
|
|
items = [authPolicies[model].create && <CustomDropdownMenuItem key="create" route={route(`back.${model}.create`)} />];
|
|
}
|
|
const visibleItems = items ? items.filter(Boolean) : null;
|
|
return visibleItems && visibleItems.length > 0 ? <>{visibleItems}</> : null;
|
|
};
|
|
|
|
const CustomDropdownMenuItem = ({
|
|
route,
|
|
icon: Icon = Views.CREATION.icon,
|
|
trans = str(useTrans(`crud.actions.${Views.CREATION.label}`)).ucFirst().value(),
|
|
}: CustomDropdownMenuItem) => {
|
|
return (
|
|
<DropdownMenuItem className="p-0">
|
|
<Button variant="ghost" asChild>
|
|
<Link href={route} className="w-full">
|
|
<Icon />
|
|
{trans}
|
|
</Link>
|
|
</Button>
|
|
</DropdownMenuItem>
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (prevStateRef.current !== state) {
|
|
const elmts = document.querySelectorAll(".sidebar-transition");
|
|
elmts.forEach((element) => {
|
|
element.classList.add("animation-transition");
|
|
setTimeout(() => {
|
|
element.classList.remove("animation-transition");
|
|
}, 400);
|
|
});
|
|
prevStateRef.current = state;
|
|
}
|
|
}, [state]);
|
|
|
|
return (
|
|
<Sidebar collapsible="icon" className="z-30">
|
|
<SidebarHeader className="sidebar-transition">
|
|
<ApplicationLogo isCollapsed={isCollapsed} />
|
|
</SidebarHeader>
|
|
<SidebarContent className={`sidebar-transition ${isCollapsed ? "pt-2" : ""}`}>
|
|
{navList.map(
|
|
(navGroup) => navGroup.show && (
|
|
<Collapsible
|
|
key={navGroup.title}
|
|
className="group/collapsible"
|
|
defaultOpen
|
|
>
|
|
<SidebarGroup>
|
|
{!isCollapsed && (
|
|
<SidebarGroupLabel asChild>
|
|
<CollapsibleTrigger>
|
|
{navGroup.title}
|
|
<ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
|
|
</CollapsibleTrigger>
|
|
</SidebarGroupLabel>
|
|
)}
|
|
<CollapsibleContent>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{navGroup.links.map(
|
|
(navLink) => {
|
|
const sidebarButton = (
|
|
<SidebarMenuButton
|
|
className={`${
|
|
route().current(`back.${navLink.model}.*`)
|
|
? "text-secondary-foreground"
|
|
: "text-primary-foreground"
|
|
}`}
|
|
asChild
|
|
>
|
|
{navLink.link ? (
|
|
<a
|
|
href={navLink.link}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<navLink.icon />
|
|
{navLink.title}
|
|
</a>
|
|
) : (
|
|
<Link
|
|
href={route(`back.${navLink.model}.index`)}
|
|
className="bg-transparent"
|
|
>
|
|
<navLink.icon />
|
|
{navLink.title}
|
|
</Link>
|
|
)}
|
|
</SidebarMenuButton>
|
|
);
|
|
return (navLink.show && (
|
|
<SidebarMenuItem
|
|
key={navLink.title}
|
|
className={`transition-colors rounded-md ${
|
|
route().current(
|
|
`back.${navLink.model}.*`,
|
|
) ? "bg-secondary text-secondary-foreground" : "bg-opacity-0"
|
|
}`}
|
|
>
|
|
{isCollapsed ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
{sidebarButton}
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">
|
|
<p>{navLink.title}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : (
|
|
sidebarButton
|
|
)}
|
|
{navLink.model && navLink.actions?.(navLink.model) && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<SidebarMenuAction
|
|
className={`${
|
|
route().current(
|
|
`back.${navLink.model}.*`,
|
|
) ? "text-secondary-foreground" : ""
|
|
} !top-0 !right-0 px-4 h-full`}
|
|
>
|
|
<MoreHorizontal />
|
|
</SidebarMenuAction>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
side="right"
|
|
align="start"
|
|
>
|
|
{navLink.actions(navLink.model)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
</SidebarMenuItem>
|
|
));
|
|
},
|
|
)}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</CollapsibleContent>
|
|
</SidebarGroup>
|
|
</Collapsible>
|
|
),
|
|
)}
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
);
|
|
}
|