66 lines
2.5 KiB
TypeScript
66 lines
2.5 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 { observer } from "mobx-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
// plane internal packages
|
|
import { Tooltip } from "@plane/propel/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 sidebarMenuGroups = [
|
|
{ label: "ИНСТАНС", items: sidebarMenu.slice(0, 4) },
|
|
{ label: "ВОЗМОЖНОСТИ", items: sidebarMenu.slice(4) },
|
|
];
|
|
|
|
const handleItemClick = () => {
|
|
if (window.innerWidth < 768) {
|
|
toggleSidebar(!isSidebarCollapsed);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col overflow-y-scroll px-3 py-4">
|
|
{sidebarMenuGroups.map((group) => (
|
|
<div key={group.label} className="shrink-0 border-b border-white/6 py-3 first:pt-0 last:border-b-0 last:pb-0">
|
|
{!isSidebarCollapsed && <div className="nodedc-admin-sidebar-section-label">{group.label}</div>}
|
|
<div className="flex flex-col gap-1">
|
|
{group.items.map((item) => {
|
|
const isActive = item.href === pathName || Boolean(pathName?.startsWith(item.href));
|
|
return (
|
|
<Link key={item.href} href={item.href} onClick={handleItemClick}>
|
|
<Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
|
|
<div
|
|
className={cn(
|
|
"nodedc-settings-sidebar-item group flex w-full items-center gap-3 px-3 py-2 text-14 font-medium transition-colors outline-none",
|
|
isSidebarCollapsed ? "justify-center" : "w-full"
|
|
)}
|
|
data-active={isActive}
|
|
>
|
|
{<item.Icon className="h-4 w-4 flex-shrink-0" />}
|
|
{!isSidebarCollapsed && <div className="min-w-0 truncate transition-colors">{item.name}</div>}
|
|
</div>
|
|
</Tooltip>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
});
|