ldc-laravel-base-project/resources/ts/back/Components/Layout/Sidebar/AppSidebar.tsx

import { Link, usePage } from "@inertiajs/react";
import {
  ChevronDownIcon,
  MoreHorizontalIcon,
  HomeIcon,
  SquareArrowOutUpRightIcon,
  TelescopeIcon,
} from "lucide-react";
import { type ElementType, type ReactNode, useEffect, useRef } from "react";

import ApplicationLogo from "@/back/Components/ApplicationLogo";
import { SidebarRegistry } from "@/back/Components/Layout/Sidebar/SidebarRegistry";
import Views from "@/back/lib/actions";
import type { AuthProp, UserModel, ConfigBackend } from "@/back/types/global";
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuAction,
  useSidebar,
} from "@/components/ui/sidebar";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import str from "@/hooks/use-string";
import useTrans from "@/hooks/use-translations";
import { GetTranslation } from "@/lib/utils";

export interface NavListLinksProps {
  /** Title of the button. */
  title: string;
  /** Main model of the button (used for route checking). */
  model?: string;
  /** External link of the button (if it's a not CRUD, just a simple link). */
  link?: string;
  /** Define some conditions for active or not the button (in addition to the route model checking if defined). */
  activeCondition?: boolean[];
  /** Condition to set the visibility of the button. */
  show: boolean;
  /** Lucide icon of the button. */
  icon: ElementType;
  /** Define some actions in side popover (like create/trash). */
  actions?: (model: string) => ReactNode;
}

export type NavListProps = {
  /** Title of the group. */
  title: string;
  /** Condition to set the visibility of the group. */
  show: boolean;
  /** Links presents in the group. */
  links: NavListLinksProps[];
}[];

/**
 * Get sidenav actions.
 *
 * @param ReactNode items
 * @param string model
 * @return
 */
export const filterActions = ({
  auth,
  configBackend,
  items,
  model,
}: {
  auth: AuthProp;
  configBackend: ConfigBackend;
  items?: ReactNode[];
  model?: string;
}): ReactNode => {
  let computedItems = items;
  const transDefaultSideAction = str(
    GetTranslation(`uwil-backend::crud.actions.${Views.CREATION.label}`),
  )
    .ucFirst()
    .value();
  // Set create action by default.
  if (!computedItems && model) {
    const modelCamelCase = str(model).camelCase().value();
    computedItems = [
      auth.policies[modelCamelCase].create && (
        <DropdownMenuItem key="create" className="p-0">
          <Button variant="ghost" asChild>
            <Link
              href={route(`${configBackend.routes.name}${model}.create`)}
              className="w-full"
            >
              <Views.CREATION.icon />
              {transDefaultSideAction}
            </Link>
          </Button>
        </DropdownMenuItem>
      ),
    ];
  }
  const visibleItems = computedItems ? computedItems.filter(Boolean) : null;
  return visibleItems && visibleItems.length > 0 ? visibleItems : null;
};

export default function AppSidebar() {
  const { appEnv, auth, configBackend, enumUserRole } = usePage()
    .props as unknown as {
    appEnv: AppEnv;
    auth: AuthProp;
    configBackend: ConfigBackend;
    enumUserRole: UserModel["role"][];
  };
  const { state } = useSidebar();
  const prevStateRef = useRef(state);
  const isConceptor = enumUserRole.find((role) => role.name === "conceptor");
  const isCollapsed = state === "collapsed";

  // Translations.
  const transPages = useTrans("uwil-backend::back.pages");
  const transDashboard = useTrans("uwil-backend::back.dashboard");
  const transWebsite = useTrans("uwil-backend::back.your_website");
  const transModules = useTrans("uwil-backend::back.modules");
  const transAdmin = useTrans("uwil-backend::enums.user-role.admin");
  const transTelescope = useTrans("uwil-backend::back.telescope");

  const navList: NavListProps = [
    {
      title: transPages,
      show: true,
      links: [
        {
          title: transDashboard,
          model: "dashboard",
          show: true,
          icon: HomeIcon,
        },
        {
          title: transWebsite,
          link: "/",
          show: true,
          icon: SquareArrowOutUpRightIcon,
        },
        ...SidebarRegistry.getAll(auth, configBackend, "pages"),
      ],
    },
    {
      title: transModules,
      show: SidebarRegistry.getAll(auth, configBackend, "modules").length > 0,
      links: SidebarRegistry.getAll(auth, configBackend, "modules"),
    },
    {
      title: str(transAdmin).plural().value(),
      show: auth.user.role.value === isConceptor?.value,
      links: [
        ...SidebarRegistry.getAll(auth, configBackend, "admin"),
        {
          title: transTelescope,
          link: route().has("telescope") ? route("telescope") : undefined,
          icon: TelescopeIcon,
          show: appEnv.mode === "local" && route().has("telescope"),
        },
      ],
    },
  ];

  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 forceLight 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}
                        <ChevronDownIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                      </CollapsibleTrigger>
                    </SidebarGroupLabel>
                  )}
                  <CollapsibleContent>
                    <SidebarGroupContent>
                      <SidebarMenu>
                        {navGroup.links
                          .filter((navLink) => navLink.show)
                          .map((navLink) => {
                            const isActive = navLink.model
                              ? route().current(
                                  `${configBackend.routes.name}${navLink.model}.*`,
                                )
                              : navLink.activeCondition?.some(Boolean);
                            const sidebarButton = (
                              <SidebarMenuButton
                                className={
                                  isActive
                                    ? "text-secondary-foreground"
                                    : "text-primary-foreground"
                                }
                                asChild
                              >
                                {navLink.link ? (
                                  <a
                                    href={navLink.link}
                                    target="_blank"
                                    rel="noreferrer"
                                  >
                                    <navLink.icon />
                                    {navLink.title}
                                  </a>
                                ) : (
                                  <Link
                                    href={
                                      navLink.model
                                        ? route(
                                            `${configBackend.routes.name}${navLink.model}.index`,
                                          )
                                        : "#"
                                    }
                                    className="bg-transparent"
                                  >
                                    <navLink.icon />
                                    {navLink.title}
                                  </Link>
                                )}
                              </SidebarMenuButton>
                            );
                            return (
                              <SidebarMenuItem
                                key={navLink.title}
                                className={`transition-colors rounded-md ${isActive ? "bg-secondary text-secondary-foreground" : "bg-secondary/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={`${isActive ? "text-secondary-foreground" : ""} top-0! right-0! cursor-pointer px-4 h-full`}
                                        >
                                          <MoreHorizontalIcon />
                                        </SidebarMenuAction>
                                      </DropdownMenuTrigger>
                                      <DropdownMenuContent
                                        side="right"
                                        align="start"
                                      >
                                        {navLink.actions(navLink.model)}
                                      </DropdownMenuContent>
                                    </DropdownMenu>
                                  )}
                              </SidebarMenuItem>
                            );
                          })}
                      </SidebarMenu>
                    </SidebarGroupContent>
                  </CollapsibleContent>
                </SidebarGroup>
              </Collapsible>
            ),
        )}
      </SidebarContent>
    </Sidebar>
  );
}