snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

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

@@ -0,0 +1,87 @@
+/**
+ * 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>
+  );
+});