Make nav switching entirely css-based

regalijan · Oct 19, 2023 · 6f9e073 · 6f9e073
1 parent cba05d6
commit 6f9e073
Showing 1 changed file with 56 additions and 85 deletions.
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -2,7 +2,6 @@ import {
   Avatar,
   Box,
   Button,
-  Center,
   CloseButton,
   Container,
   Drawer,
@@ -70,26 +69,74 @@ 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"
+            <Flex
+              alignSelf="center"
+              gap="0.5rem"
               gridColumn="1"
               gridRow="1"
               justifyContent="space-between"
               p="0"
-              w="calc(100vw - 6rem)"
+              textAlign="center"
             >
               <a href="/">
                 <img
-                  src="/files/logo192.png"
                   alt="Car Crushers Logo"
-                  style={{ width: "36px" }}
+                  height="36"
+                  src="/files/logo192.png"
+                  width="36"
                 />
               </a>
+              <Spacer />
+              <Spacer />
+              <Flex alignItems="center" className="nav-links">
+                <HStack gap="3rem" whiteSpace="nowrap">
+                  <Link href="/about" size="lg">
+                    About Us
+                  </Link>
+                  <Link href="/team" size="lg">
+                    Our Team
+                  </Link>
+                  <Link href="/support" size="lg">
+                    Support
+                  </Link>
+                  <Link
+                    display={hasMod() ? undefined : "none"}
+                    href="/mod-queue"
+                    size="lg"
+                  >
+                    Moderation
+                  </Link>
+                </HStack>
+              </Flex>
+              <Spacer />
+              <Spacer />
+              <div className="nav-links">
+                {data.hide ? null : data.id ? (
+                  <HStack spacing="3">
+                    <Avatar src={getAvatarUrl(data)} />
+                    <Text>{data.username}</Text>
+                    <Button
+                      onClick={async () => await destroySession()}
+                      size="md"
+                      variant="ghost"
+                    ></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"
@@ -98,89 +145,13 @@ export default function (props: {
                 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>
-            </Container>
-            <Flex
-              alignSelf="center"
-              className="desktop-nav"
-              display="flex"
-              gap="0.5rem"
-              gridColumn="1"
-              gridRow="1"
-              justifyContent="space-between"
-              p="0"
-              textAlign="center"
-            >
-              <a href="/" style={{ alignSelf: "center" }}>
-                <img
-                  src="/files/logo192.png"
-                  width="32"
-                  alt="Car Crushers Logo"
-                />
-              </a>
-              <Spacer />
-              <Spacer />
-              <Center gap="1.25rem" whiteSpace="nowrap">
-                <Link href="/about" size="lg">
-                  About Us
-                </Link>
-                <Link href="/team" size="lg">
-                  Our Team
-                </Link>
-                <Link href="/support" size="lg">
-                  Support
-                </Link>
-                <Link
-                  display={hasMod() ? undefined : "none"}
-                  href="/mod-queue"
-                  size="lg"
-                >
-                  Moderation
-                </Link>
-              </Center>
-              <Spacer />
-              <Spacer />
-              {data.hide ? null : data.id ? (
-                <HStack spacing="3">
-                  <Avatar
-                    display={data.id ? "flex" : "none"}
-                    src={getAvatarUrl(data)}
-                  />
-                  <Text>{data.id ? data.username : ""}</Text>
-                  <Button
-                    colorScheme="blue"
-                    onClick={async () => await destroySession()}
-                    size="md"
-                    style={{ display: data.id ? "block" : "none" }}
-                  >
-                    <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>
-              )}
             </Flex>
           </Container>
         </Box>