Make nav switching entirely css-based

components/Navigation.tsx

@@ -2,7 +2,6 @@ import {
   Avatar,
   Box,
   Button,
-  Center,
   CloseButton,
   Container,
   Drawer,
@@ -70,45 +69,18 @@ export default function (props: {
 
   return (
     <>
+      <style media="(min-width: 1281px)">
+        {`
+          #nav-menu {
+            display: none
+          }
+        `}
+      </style>
       <Box as="section" pb={{ base: "6" }}>
         <Box as="nav" boxSizing="unset">
           <Container display="grid" maxW="container.xl" py={{ base: "6" }}>
-            <Container
-              alignItems="center"
-              className="mobile-nav"
-              display="flex"
-              gridColumn="1"
-              gridRow="1"
-              justifyContent="space-between"
-              p="0"
-              w="calc(100vw - 6rem)"
-            >
-              <a href="/">
-                <img
-                  src="/files/logo192.png"
-                  alt="Car Crushers Logo"
-                  style={{ width: "36px" }}
-                />
-              </a>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                fill="currentColor"
-                viewBox="0 0 16 16"
-                cursor="pointer"
-                onClick={onOpen}
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
-                />
-              </svg>
-            </Container>
             <Flex
               alignSelf="center"
-              className="desktop-nav"
-              display="flex"
               gap="0.5rem"
               gridColumn="1"
               gridRow="1"
@@ -116,16 +88,18 @@ export default function (props: {
               p="0"
               textAlign="center"
             >
-              <a href="/" style={{ alignSelf: "center" }}>
+              <a href="/">
                 <img
-                  src="/files/logo192.png"
-                  width="32"
                   alt="Car Crushers Logo"
+                  height="36"
+                  src="/files/logo192.png"
+                  width="36"
                 />
               </a>
               <Spacer />
               <Spacer />
-              <Center gap="1.25rem" whiteSpace="nowrap">
+              <Flex alignItems="center" className="nav-links">
+                <HStack gap="3rem" whiteSpace="nowrap">
                   <Link href="/about" size="lg">
                     About Us
                   </Link>
@@ -142,45 +116,42 @@ export default function (props: {
                   >
                     Moderation
                   </Link>
-              </Center>
+                </HStack>
+              </Flex>
               <Spacer />
               <Spacer />
+              <div className="nav-links">
                 {data.hide ? null : data.id ? (
                   <HStack spacing="3">
-                  <Avatar
+                    <Avatar src={getAvatarUrl(data)} />
-                    display={data.id ? "flex" : "none"}
+                    <Text>{data.username}</Text>
-                    src={getAvatarUrl(data)}
-                  />
-                  <Text>{data.id ? data.username : ""}</Text>
                     <Button
-                    colorScheme="blue"
                       onClick={async () => await destroySession()}
                       size="md"
-                    style={{ display: data.id ? "block" : "none" }}
+                      variant="ghost"
-                  >
+                    ></Button>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      fill="currentColor"
-                      viewBox="0 0 16 16"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"
-                      />
-                      <path
-                        fillRule="evenodd"
-                        d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"
-                      />
-                    </svg>
-                  </Button>
                   </HStack>
                 ) : (
                   <Button as="a" colorScheme="blue" href="/api/auth/oauth">
                     Log In
                   </Button>
                 )}
+              </div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="currentColor"
+                viewBox="0 0 16 16"
+                cursor="pointer"
+                onClick={onOpen}
+                id="nav-menu"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+                />
+              </svg>
             </Flex>
           </Container>
         </Box>