mirror of
https://github.com/narrrl/holy-flavor-rater.git
synced 2026-11-03 16:41:27 +01:00
sidebar changes
This commit is contained in:
1 parent
5da8ead2ff
commit
683354ec93
1 file changed
+18
-16
+18
-16
@@ -70,8 +70,8 @@ const App: React.FC = () => {
|
|||||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||||
const [notifAnchorEl, setNotifAnchorEl] = useState<null | HTMLElement>(null);
|
const [notifAnchorEl, setNotifAnchorEl] = useState<null | HTMLElement>(null);
|
||||||
const [categories, setCategories] = useState<{ name: string; slug: string }[]>([]);
|
const [categories, setCategories] = useState<{ name: string; slug: string }[]>([]);
|
||||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
||||||
const isMobile = useMediaQuery(muiTheme.breakpoints.down('md'));
|
const isMobile = useMediaQuery(muiTheme.breakpoints.down('md'));
|
||||||
|
const [drawerOpen, setDrawerOpen] = useState(!isMobile);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
api
|
api
|
||||||
@@ -110,8 +110,8 @@ const App: React.FC = () => {
|
|||||||
const hamburger = (
|
const hamburger = (
|
||||||
<IconButton
|
<IconButton
|
||||||
color="inherit"
|
color="inherit"
|
||||||
onClick={() => setDrawerOpen(true)}
|
onClick={() => setDrawerOpen((o) => !o)}
|
||||||
aria-label="open navigation"
|
aria-label="toggle navigation"
|
||||||
sx={{ mx: 0.5 }}
|
sx={{ mx: 0.5 }}
|
||||||
>
|
>
|
||||||
<MenuIcon />
|
<MenuIcon />
|
||||||
@@ -217,7 +217,7 @@ const App: React.FC = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<GlassAppBar>
|
<GlassAppBar>
|
||||||
{isMobile && mobileAnchor === 'left' && hamburger}
|
{mobileAnchor === 'left' && hamburger}
|
||||||
|
|
||||||
<Typography
|
<Typography
|
||||||
variant="h6"
|
variant="h6"
|
||||||
@@ -292,23 +292,25 @@ const App: React.FC = () => {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isMobile && mobileAnchor === 'right' && hamburger}
|
{mobileAnchor === 'right' && hamburger}
|
||||||
</Box>
|
</Box>
|
||||||
</GlassAppBar>
|
</GlassAppBar>
|
||||||
|
|
||||||
<SwipeableDrawer
|
{isMobile && (
|
||||||
anchor={mobileAnchor}
|
<SwipeableDrawer
|
||||||
open={drawerOpen}
|
anchor={mobileAnchor}
|
||||||
onOpen={() => setDrawerOpen(true)}
|
open={drawerOpen}
|
||||||
onClose={() => setDrawerOpen(false)}
|
onOpen={() => setDrawerOpen(true)}
|
||||||
disableBackdropTransition
|
onClose={() => setDrawerOpen(false)}
|
||||||
disableDiscovery
|
disableBackdropTransition
|
||||||
>
|
disableDiscovery
|
||||||
<NavSidebar categories={categories} onNavigate={() => setDrawerOpen(false)} />
|
>
|
||||||
</SwipeableDrawer>
|
<NavSidebar categories={categories} onNavigate={() => setDrawerOpen(false)} />
|
||||||
|
</SwipeableDrawer>
|
||||||
|
)}
|
||||||
|
|
||||||
<Box sx={{ display: 'flex', flexGrow: 1, minHeight: 0 }}>
|
<Box sx={{ display: 'flex', flexGrow: 1, minHeight: 0 }}>
|
||||||
{!isMobile && (
|
{!isMobile && drawerOpen && (
|
||||||
<Box
|
<Box
|
||||||
component="aside"
|
component="aside"
|
||||||
sx={{
|
sx={{
|
||||||
|
|||||||
Reference in new issue
Block a user