layout/AppNavbar.tsx: Remove Hidden component (#1570)

Hidden component has been deprecated in MUI v5. This change also improves the rendering of app navbar by removing the layout shift caused by the hidden component. Reference https://mui.com/material-ui/migration/v5-component-changes/#hidden
podkrepi-bg · Aug 28, 2023 · e1d4018 · e1d4018
1 parent 17932bb
commit e1d4018
Showing 1 changed file with 23 additions and 24 deletions.
diff --git a/src/components/client/layout/AppNavBar.tsx b/src/components/client/layout/AppNavBar.tsx
@@ -80,38 +80,37 @@ export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) {
             <PodkrepiLogo locale={locale} variant="adaptive" />
           </ButtonBase>
         </Link>
-        <Hidden mdDown>
-          <Grid
-            container
-            wrap="nowrap"
-            direction="row"
-            justifyContent="flex-end"
-            sx={(theme) => ({
-              marginLeft: theme.spacing(2),
-              marginRight: theme.spacing(5),
-              [theme.breakpoints.up('lg')]: {
-                marginRight: theme.spacing(10),
-              },
-            })}>
-            <Grid item>
-              <MainNavMenu>
-                {status === 'authenticated' ? <PrivateMenu /> : <PublicMenu />}
-                <Grid item>
-                  <LocaleButton />
-                </Grid>
-              </MainNavMenu>
-            </Grid>
+        <Grid
+          container
+          wrap="nowrap"
+          direction="row"
+          justifyContent="flex-end"
+          sx={(theme) => ({
+            marginLeft: theme.spacing(2),
+            marginRight: theme.spacing(5),
+            [theme.breakpoints.up('lg')]: {
+              marginRight: theme.spacing(10),
+            },
+            display: { md: 'flex', xs: 'none' },
+          })}>
+          <Grid item>
+            <MainNavMenu>
+              {status === 'authenticated' ? <PrivateMenu /> : <PublicMenu />}
+              <Grid item>
+                <LocaleButton />
+              </Grid>
+            </MainNavMenu>
           </Grid>
-        </Hidden>
-        <Hidden mdUp>
+        </Grid>
+        <Grid sx={{ display: { xs: 'flex', md: 'none' } }}>
           <IconButton
             size="small"
             edge="end"
             onClick={navMenuToggle}
             aria-labelledby="navigation menu">
             <Menu fontSize="large" />
           </IconButton>
-        </Hidden>
+        </Grid>
       </Toolbar>
     </AppBar>
   )