diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 36e0743..03e827a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -70,8 +70,8 @@ const App: React.FC = () => { const [anchorEl, setAnchorEl] = useState(null); const [notifAnchorEl, setNotifAnchorEl] = useState(null); const [categories, setCategories] = useState<{ name: string; slug: string }[]>([]); - const [drawerOpen, setDrawerOpen] = useState(false); const isMobile = useMediaQuery(muiTheme.breakpoints.down('md')); + const [drawerOpen, setDrawerOpen] = useState(!isMobile); useEffect(() => { api @@ -110,8 +110,8 @@ const App: React.FC = () => { const hamburger = ( setDrawerOpen(true)} - aria-label="open navigation" + onClick={() => setDrawerOpen((o) => !o)} + aria-label="toggle navigation" sx={{ mx: 0.5 }} > @@ -217,7 +217,7 @@ const App: React.FC = () => { }} > - {isMobile && mobileAnchor === 'left' && hamburger} + {mobileAnchor === 'left' && hamburger} { )} - {isMobile && mobileAnchor === 'right' && hamburger} + {mobileAnchor === 'right' && hamburger} - setDrawerOpen(true)} - onClose={() => setDrawerOpen(false)} - disableBackdropTransition - disableDiscovery - > - setDrawerOpen(false)} /> - + {isMobile && ( + setDrawerOpen(true)} + onClose={() => setDrawerOpen(false)} + disableBackdropTransition + disableDiscovery + > + setDrawerOpen(false)} /> + + )} - {!isMobile && ( + {!isMobile && drawerOpen && (