86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
/**
|
|
* 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 { usePathname } from "next/navigation";
|
|
import { ChevronRight, Menu, Settings } from "lucide-react";
|
|
// components
|
|
import { BreadcrumbLink } from "../breadcrumb-link";
|
|
// 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
|
|
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"
|
|
aria-label="Открыть меню"
|
|
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,
|
|
};
|
|
|
|
export const AdminHeader = observer(function AdminHeader() {
|
|
const pathName = usePathname();
|
|
|
|
// 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;
|
|
};
|
|
|
|
const breadcrumbItems = generateBreadcrumbItems(pathName || "");
|
|
|
|
return (
|
|
<div className="nodedc-admin-header nodedc-glass-modal 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 />
|
|
{breadcrumbItems.length >= 0 && (
|
|
<nav className="min-w-0" aria-label="Навигация God Mode">
|
|
<ol className="nodedc-admin-breadcrumbs">
|
|
<BreadcrumbLink href="/general/" label="Настройки" icon={<Settings className="h-4 w-4" />} />
|
|
{breadcrumbItems.map((item, index) => {
|
|
if (!item.title) return null;
|
|
const isCurrent = index === breadcrumbItems.length - 1;
|
|
|
|
return (
|
|
<Fragment key={`${item.href}-${item.title}`}>
|
|
<li className="nodedc-admin-breadcrumb-separator" aria-hidden="true">
|
|
<ChevronRight className="size-4" />
|
|
</li>
|
|
<BreadcrumbLink href={item.href} label={item.title} isCurrent={isCurrent} />
|
|
</Fragment>
|
|
);
|
|
})}
|
|
</ol>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|