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:
@ -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} />
|
||||
|
@ -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 });
|
||||
}
|
||||
}),
|
||||
{
|
||||
|
Reference in New Issue
Block a user