diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx index a9505f209e..55a7c2a901 100644 --- a/src/frontend/src/components/nav/Header.tsx +++ b/src/frontend/src/components/nav/Header.tsx @@ -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 (
diff --git a/src/frontend/src/states/LocalState.tsx b/src/frontend/src/states/LocalState.tsx index 24044d0ce5..9686b0640f 100644 --- a/src/frontend/src/states/LocalState.tsx +++ b/src/frontend/src/states/LocalState.tsx @@ -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()( @@ -87,6 +89,11 @@ export const useLocalState = create()( detailDrawerStack: value === false ? 0 : get().detailDrawerStack + value }); + }, + // navigation + navigationOpen: false, + setNavigationOpen: (value) => { + set({ navigationOpen: value }); } }), {