2
0
mirror of https://github.com/inventree/InvenTree.git synced 2025-06-16 20:15:44 +00:00

add nav state to manage navigation state

This commit is contained in:
Matthias Mair
2024-04-09 23:01:07 +02:00
parent dbbe2929d1
commit 364dcd9bf8
2 changed files with 26 additions and 2 deletions

View File

@ -2,7 +2,7 @@ import { ActionIcon, Container, Group, Indicator, Tabs } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { IconBell, IconSearch } from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { useMatch, useNavigate, useParams } from 'react-router-dom';
import { api } from '../../App';
@ -10,6 +10,7 @@ import { navTabs as mainNavTabs } from '../../defaults/links';
import { ApiEndpoints } from '../../enums/ApiEndpoints';
import { InvenTreeStyle } from '../../globalStyle';
import { apiUrl } from '../../states/ApiState';
import { useLocalState } from '../../states/LocalState';
import { SpotlightButton } from '../buttons/SpotlightButton';
import { ScanButton } from '../items/ScanButton';
import { MainMenu } from './MainMenu';
@ -20,8 +21,12 @@ import { SearchDrawer } from './SearchDrawer';
export function Header() {
const { classes } = InvenTreeStyle();
const [setNavigationOpen, navigationOpen] = useLocalState((state) => [
state.setNavigationOpen,
state.navigationOpen
]);
const [navDrawerOpened, { open: openNavDrawer, close: closeNavDrawer }] =
useDisclosure(false);
useDisclosure(navigationOpen);
const [
searchDrawerOpened,
{ open: openSearchDrawer, close: closeSearchDrawer }
@ -60,6 +65,18 @@ export function Header() {
refetchOnWindowFocus: false
});
// Sync Navigation Drawer state with zustand
useEffect(() => {
if (navigationOpen === navDrawerOpened) return;
setNavigationOpen(navDrawerOpened);
}, [navDrawerOpened]);
useEffect(() => {
if (navigationOpen === navDrawerOpened) return;
if (navigationOpen) openNavDrawer();
else closeNavDrawer();
}, [navigationOpen]);
return (
<div className={classes.layoutHeader}>
<SearchDrawer opened={searchDrawerOpened} onClose={closeSearchDrawer} />

View File

@ -31,6 +31,8 @@ interface LocalStateProps {
clearTableColumnNames: () => void;
detailDrawerStack: number;
addDetailDrawer: (value: number | false) => void;
navigationOpen: boolean;
setNavigationOpen: (value: boolean) => void;
}
export const useLocalState = create<LocalStateProps>()(
@ -87,6 +89,11 @@ export const useLocalState = create<LocalStateProps>()(
detailDrawerStack:
value === false ? 0 : get().detailDrawerStack + value
});
},
// navigation
navigationOpen: false,
setNavigationOpen: (value) => {
set({ navigationOpen: value });
}
}),
{