mirror of
https://github.com/Shadowfita/docmost.git
synced 2025-11-14 08:41:04 +10:00
fix tree
* fix tree root element ref * fix tree node toggle bug * fix tree node reparenting on the backend * highlight active home menu on the sidebar
This commit is contained in:
@ -85,3 +85,8 @@
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
}
|
||||
}
|
||||
|
||||
.activeButton {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
}
|
||||
|
||||
@ -20,25 +20,28 @@ import React from "react";
|
||||
import { useAtom } from "jotai";
|
||||
import { SearchSpotlight } from "@/features/search/search-spotlight";
|
||||
import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import SpaceContent from "@/features/page/tree/components/space-content.tsx";
|
||||
import clsx from "clsx";
|
||||
import APP_ROUTE from "@/lib/app-route.ts";
|
||||
|
||||
interface PrimaryMenuItem {
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
path?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const primaryMenu: PrimaryMenuItem[] = [
|
||||
{ icon: IconHome, label: "Home" },
|
||||
{ icon: IconHome, label: "Home", path: "/home" },
|
||||
{ icon: IconSearch, label: "Search" },
|
||||
{ icon: IconSettings, label: "Settings" },
|
||||
// { icon: IconFilePlus, label: 'New Page' },
|
||||
];
|
||||
|
||||
export function Navbar() {
|
||||
const [tree] = useAtom(treeApiAtom);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const handleMenuItemClick = (label: string) => {
|
||||
if (label === "Home") {
|
||||
@ -61,7 +64,12 @@ export function Navbar() {
|
||||
const primaryMenuItems = primaryMenu.map((menuItem) => (
|
||||
<UnstyledButton
|
||||
key={menuItem.label}
|
||||
className={classes.menu}
|
||||
className={clsx(
|
||||
classes.menu,
|
||||
location.pathname.toLowerCase() === menuItem?.path
|
||||
? classes.activeButton
|
||||
: "",
|
||||
)}
|
||||
onClick={() => handleMenuItemClick(menuItem.label)}
|
||||
>
|
||||
<div className={classes.menuItemInner}>
|
||||
|
||||
Reference in New Issue
Block a user