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 (