Add a responsive navigation bar

andrewhong04 · andrewhong04 · commit 400f99659cda · 2023-02-16T00:31:20.000-05:00
diff --git a/src/components/nav-bar.tsx b/src/components/nav-bar.tsx
@@ -1,22 +1,34 @@
+import React, { useState } from 'react';
 import styles from '@/styles/nav-bar.module.css';
 
 export default function Navbar() {
+  const [isOpen, setOpen] = useState(true);
+
+  function handleMenuClick() {
+    setOpen(!isOpen);
+  }
+
   return (
     <div className={styles.nav}>
       <div className={styles.title}>
         <a href="">pygame</a>
       </div>
-      <ul>
-        <li>
-          <a href="docs">Documentation</a>
-        </li>
-        <li>
-          <a href="tutorials">Tutorials</a>
-        </li>
-        <li>
-          <a href="https://github.com/pygame-community/pygame-ce">Contribute</a>
-        </li>
-      </ul>
+      <div className={styles.mobilemenuicon} onClick={handleMenuClick}>
+        <span className="material-symbols-outlined">menu</span>
+      </div>
+      <div className={isOpen ? styles.routes : styles.mobileroutes}>
+        <ul>
+          <li>
+            <a href="docs">Documentation</a>
+          </li>
+          <li>
+            <a href="tutorials">Tutorials</a>
+          </li>
+          <li>
+            <a href="https://github.com/pygame-community/pygame-ce">Contribute</a>
+          </li>
+        </ul>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -3,7 +3,12 @@ import { Html, Head, Main, NextScript } from 'next/document';
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,0&display=swap"
+        />
+      </Head>
       <body>
         <Main />
         <NextScript />
diff --git a/src/styles/nav-bar.module.css b/src/styles/nav-bar.module.css
@@ -2,8 +2,6 @@
   display: flex;
   color: white;
   justify-content: space-between;
-  gap: 2rem;
-  width: 100vw;
   padding: 0 75px;
   height: 10vh;
   align-items: center;
@@ -14,30 +12,37 @@
   font-size: 1.5rem;
 }
 
+.mobilemenuicon {
+  display: none;
+}
+
 .nav ul {
+  display: flex;
   font-size: 1.05rem;
-  padding: 0;
-  margin: 0;
   list-style: none;
-  display: flex;
-  gap: 1rem;
+  gap: 16px;
 }
 
 .nav a {
-  color: inherit;
+  color: white;
   text-decoration: none;
-  height: 100%;
   display: flex;
   align-items: center;
-  padding: 0.25rem;
+  padding: 4px;
   opacity: 1;
-  transition: 0.5s;
+  transition: 500ms;
 }
 
 .nav a:hover {
   color: #dedede;
 }
 
+.mobileroutes a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  text-align: left;
+}
+
 /* Ultra Small
 -----------------------*/
 @media only screen and (max-width: 600px) {
@@ -46,6 +51,20 @@
   }
 
   .nav {
-    justify-content: center;
+    display: block;
+    justify-content: baseline;
+    padding: 35px 35px;
+  }
+
+  .nav .mobilemenuicon {
+    display: block;
+  }
+
+  .nav ul {
+    display: block;
+  }
+
+  .nav .routes {
+    display: none;
   }
 }
