upstream-plane/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx

/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { observer } from "mobx-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
// plane internal packages
import { Tooltip } from "@makeplane/propel/components/tooltip";
import { cn } from "@plane/utils";
// hooks
import { useTheme } from "@/hooks/store";
import { useSidebarMenu } from "@/hooks/use-sidebar-menu";

export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
  // router
  const pathName = usePathname();
  // store hooks
  const { isSidebarCollapsed, toggleSidebar } = useTheme();
  // derived values
  const sidebarMenu = useSidebarMenu();

  const handleItemClick = () => {
    if (window.innerWidth < 768) {
      toggleSidebar(!isSidebarCollapsed);
    }
  };

  return (
    <div className="vertical-scrollbar scrollbar-sm flex h-full w-full flex-col gap-2.5 overflow-y-scroll px-4 py-4">
      {sidebarMenu.map((item) => {
        const isActive = item.href === pathName || pathName?.startsWith(item.href);
        return (
          <Link key={item.href} href={item.href} onClick={handleItemClick}>
            <div>
              {!isSidebarCollapsed ? (
                <>
                  <div
                    className={cn(
                      "group flex w-full items-center gap-3 rounded-md px-3 py-2 transition-colors outline-none",
                      {
                        "!bg-layer-transparent-active text-primary": isActive,
                        "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
                      },
                      isSidebarCollapsed ? "justify-center" : "w-[260px]"
                    )}
                  >
                    {<item.Icon className="h-4 w-4 flex-shrink-0" />}
                    {!isSidebarCollapsed && (
                      <div className="w-full">
                        <div className={cn(`text-body-xs-medium transition-colors`)}>{item.name}</div>
                        <div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div>
                      </div>
                    )}
                  </div>
                </>
              ) : (
                <Tooltip label={item.name} side="right">
                  <div
                    className={cn(
                      "group flex w-full items-center gap-3 rounded-md px-3 py-2 transition-colors outline-none",
                      {
                        "!bg-layer-transparent-active text-primary": isActive,
                        "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
                      },
                      isSidebarCollapsed ? "justify-center" : "w-[260px]"
                    )}
                  >
                    {<item.Icon className="h-4 w-4 flex-shrink-0" />}
                    {!isSidebarCollapsed && (
                      <div className="w-full">
                        <div className={cn(`text-body-xs-medium transition-colors`)}>{item.name}</div>
                        <div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div>
                      </div>
                    )}
                  </div>
                </Tooltip>
              )}
            </div>
          </Link>
        );
      })}
    </div>
  );
});