refactor: css breakpoints instead of js for navbar

mui's js breakpoints will initially render with default values and therefore e.g. the hamburger menu will flicker on desktop
amelioro · Jul 18, 2024 · aa984f5 · aa984f5
1 parent 3159bee
commit aa984f5
Showing 1 changed file with 28 additions and 42 deletions.
diff --git a/src/web/common/components/Layout.tsx b/src/web/common/components/Layout.tsx
@@ -1,13 +1,5 @@
 import { Menu } from "@mui/icons-material";
-import {
-  AppBar,
-  IconButton,
-  Link as MuiLink,
-  Toolbar,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { AppBar, IconButton, Link as MuiLink, Toolbar, Tooltip, useTheme } from "@mui/material";
 import { NextPage } from "next";
 import { Roboto } from "next/font/google";
 import Image from "next/image";
@@ -42,8 +34,6 @@ const Layout: NextPage<LayoutProps> = ({ children }) => {
   const { sessionUser, authUser } = useSessionUser();
   const { asPath } = useRouter();
 
-  const usingBigScreen = useMediaQuery(theme.breakpoints.up("sm"));
-
   const [isInitialRender, setIsInitialRender] = useState(true);
   const [isUserDrawerOpen, setIsUserDrawerOpen] = useState(false);
   const [isSiteDrawerOpen, setIsSiteDrawerOpen] = useState(false);
@@ -67,11 +57,9 @@ const Layout: NextPage<LayoutProps> = ({ children }) => {
         <Toolbar variant="dense">
           <div className="flex flex-1 items-center justify-between">
             <div className="flex items-center gap-4">
-              {!usingBigScreen && (
-                <IconButton onClick={() => setIsSiteDrawerOpen(true)} sx={{ padding: "0" }}>
-                  <Menu />
-                </IconButton>
-              )}
+              <IconButton onClick={() => setIsSiteDrawerOpen(true)} className="block p-0 sm:hidden">
+                <Menu />
+              </IconButton>
               <SiteDrawer
                 username={sessionUser?.username}
                 isSiteDrawerOpen={isSiteDrawerOpen}
@@ -92,39 +80,37 @@ const Layout: NextPage<LayoutProps> = ({ children }) => {
                   Alpha
                 </MuiLink>
               </div>
-              {usingBigScreen && (
-                <>
-                  <NavLink href="/playground">Playground</NavLink>
-                  {sessionUser && <NavLink href={`/${sessionUser.username}`}>My Topics</NavLink>}
-                </>
+
+              <NavLink href="/playground" className="hidden sm:block">
+                Playground
+              </NavLink>
+              {sessionUser && (
+                <NavLink href={`/${sessionUser.username}`} className="hidden sm:block">
+                  My Topics
+                </NavLink>
               )}
             </div>
 
             <div className="flex items-center gap-4">
               <NavLink href="https://ameliorate.app/docs" target="_blank" data-tour="docs">
                 Docs
               </NavLink>
-
-              {usingBigScreen && (
-                <>
-                  <Link href={discordInvite} target="_blank" display="flex">
-                    <Image
-                      src={`/${theme.palette.mode}/Discord-Mark.png`}
-                      height={24}
-                      width={32}
-                      alt="discord link"
-                    />
-                  </Link>
-                  <Link href={githubRepo} target="_blank" display="flex">
-                    <Image
-                      src={`/${theme.palette.mode}/GitHub-Mark.png`}
-                      height={32}
-                      width={32}
-                      alt="github link"
-                    />
-                  </Link>
-                </>
-              )}
+              <Link href={discordInvite} target="_blank" className="hidden sm:flex">
+                <Image
+                  src={`/${theme.palette.mode}/Discord-Mark.png`}
+                  height={24}
+                  width={32}
+                  alt="discord link"
+                />
+              </Link>
+              <Link href={githubRepo} target="_blank" className="hidden sm:flex">
+                <Image
+                  src={`/${theme.palette.mode}/GitHub-Mark.png`}
+                  height={32}
+                  width={32}
+                  alt="github link"
+                />
+              </Link>
 
               {!isLoggedIn && (
                 <NavLink