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

apps/admin/components/common/header/core.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const CORE_HEADER_SEGMENT_LABELS: Record<string, string> = {
+  general: "General",
+  ai: "Artificial Intelligence",
+  email: "Email",
+  authentication: "Authentication",
+  image: "Image",
+  google: "Google",
+  github: "GitHub",
+  gitlab: "GitLab",
+  gitea: "Gitea",
+  workspace: "Workspace",
+  create: "Create",
+};

apps/admin/components/common/header/extended.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const EXTENDED_HEADER_SEGMENT_LABELS: Record<string, string> = {};

apps/admin/components/common/header/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+// icons
+import { Menu } from "lucide-react";
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@makeplane/propel/components/breadcrumb";
+// hooks
+import { useTheme } from "@/hooks/store";
+// local imports
+import { CORE_HEADER_SEGMENT_LABELS } from "./core";
+import { EXTENDED_HEADER_SEGMENT_LABELS } from "./extended";
+
+export const HamburgerToggle = observer(function HamburgerToggle() {
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  return (
+    <button
+      type="button"
+      aria-label="Toggle sidebar"
+      className="group flex size-7 cursor-pointer items-center justify-center rounded-sm bg-layer-1 transition-all hover:bg-layer-1-hover md:hidden"
+      onClick={() => toggleSidebar(!isSidebarCollapsed)}
+    >
+      <Menu size={14} className="text-secondary transition-all group-hover:text-primary" />
+    </button>
+  );
+});
+
+const HEADER_SEGMENT_LABELS = {
+  ...CORE_HEADER_SEGMENT_LABELS,
+  ...EXTENDED_HEADER_SEGMENT_LABELS,
+};
+
+// Function to dynamically generate breadcrumb items based on pathname
+const generateBreadcrumbItems = (pathname: string) => {
+  const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
+  pathSegments.pop();
+
+  let currentUrl = "";
+  const breadcrumbItems = pathSegments.map((segment) => {
+    currentUrl += "/" + segment;
+    return {
+      title: HEADER_SEGMENT_LABELS[segment] ?? segment.toUpperCase(),
+      href: currentUrl,
+    };
+  });
+  return breadcrumbItems;
+};
+
+export const AdminHeader = observer(function AdminHeader() {
+  const pathName = usePathname();
+
+  const breadcrumbItems = generateBreadcrumbItems(pathName || "");
+
+  return (
+    <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-subtle bg-surface-1 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <HamburgerToggle />
+        <div>
+          <Breadcrumb aria-label="Breadcrumb">
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  label="Settings"
+                  icon={<SettingsOutline className="h-4 w-4 text-tertiary" />}
+                  render={<Link href="/general/" />}
+                />
+              </BreadcrumbItem>
+              {breadcrumbItems.map(
+                (item) =>
+                  item.title && (
+                    <Fragment key={item.title}>
+                      <BreadcrumbSeparator />
+                      <BreadcrumbItem>
+                        <BreadcrumbLink label={item.title} render={<Link href={item.href} />} />
+                      </BreadcrumbItem>
+                    </Fragment>
+                  )
+              )}
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </div>
+    </div>
+  );
+});