Improve header and nav to be responsive

src/components/Header.astro

@@ -1,12 +1,20 @@
 <header>
   <div class="nav-container">
+    <div class="top-nav-wrap">
       <a href="/" class="logo">AstroPaper</a>
-    <nav>
+      <button class="hamburger-menu">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+          ><path d="M4 6h16v2H4zm4 5h12v2H8zm5 5h7v2h-7z"></path>
+        </svg>
+      </button>
+    </div>
+    <nav class="display-none sm:flex">
       <ul>
         <li><a href="/posts">Posts</a></li>
         <li><a href="/tags">Tags</a></li>
         <li><a href="/about">About</a></li>
       </ul>
+      <div class="button-wrapper">
         <button>
           <svg xmlns="http://www.w3.org/2000/svg"
             ><path
@@ -26,32 +34,47 @@
             ></path>
           </svg>
         </button>
+      </div>
     </nav>
   </div>
+  <hr />
 </header>
 
 <style>
-  header {
-    /* @apply bg-slate-700; */
+  hr {
+    @apply border-skin-line opacity-50 mx-4 max-w-3xl sm:mx-auto;
   }
   .nav-container {
-    @apply max-w-3xl mx-auto flex justify-between items-center py-8 border-b-2 border-opacity-40 border-b-skin-line;
+    @apply max-w-3xl mx-auto flex flex-col sm:flex-row justify-between items-center;
+    /* border-b-2 border-opacity-40 border-b-skin-line */
+  }
+  .top-nav-wrap {
+    @apply w-full p-4 sm:py-8 flex justify-between items-center;
   }
   .logo {
-    @apply font-semibold text-3xl;
+    @apply font-semibold text-xl sm:text-3xl;
+  }
+  .hamburger-menu {
+    @apply p-2 sm:hidden;
+  }
+  .hamburger-menu svg {
+    @apply fill-skin-base w-6 h-6;
   }
   nav {
-    @apply flex items-center space-x-2;
+    @apply w-full py-2 flex flex-col items-center sm:justify-end sm:flex-row sm:space-x-2 bg-skin-fill shadow sm:shadow-none;
   }
   nav ul {
-    @apply flex space-x-4;
+    @apply flex flex-col sm:flex-row sm:space-x-4;
   }
   nav li {
-    @apply py-2;
+    @apply py-2 text-center my-2;
   }
   nav a {
     @apply py-2 px-3 font-medium hover:text-skin-accent;
   }
+  .button-wrapper {
+    @apply flex my-2 sm:space-x-2;
+  }
   nav button {
     @apply p-2;
   }
@@ -61,9 +84,9 @@
 </style>
 
 <script>
+  // Toggle Theme
   const themeBtn = document.querySelector("#theme-btn");
   const htmlClassList = document.querySelector("html")?.classList;
-
   themeBtn?.addEventListener("click", function () {
     if (htmlClassList?.contains("theme-dark")) {
       localStorage.setItem("theme", "light");
@@ -73,4 +96,15 @@
       htmlClassList?.add("theme-dark");
     }
   });
+
+  // Toggle menu
+  const menuBtn = document.querySelector(".hamburger-menu");
+  const navClassList = document.querySelector("nav")?.classList;
+  menuBtn!.addEventListener("click", function () {
+    if (navClassList?.contains("display-none")) {
+      navClassList?.remove("display-none");
+    } else {
+      navClassList?.add("display-none");
+    }
+  });
 </script>