* 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:
Philipinho
2024-05-20 01:08:31 +01:00
parent 6287f41ef6
commit b06a78b6ec
8 changed files with 85 additions and 42 deletions

View File

@ -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));
}

View File

@ -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}>