refactor: header components

raexera · Sep 16, 2024 · 1a85452 · 1a85452
1 parent 61bd031
commit 1a85452
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 152 deletions.
diff --git a/public/js/main.js b/public/js/main.js
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -43,8 +43,5 @@ const { title, description } = Astro.props;
 <meta name="title" content={title} />
 <meta name="description" content={description} />
 
-<!-- Global Scripts -->
-<script is:inline src="/js/main.js"></script>
-
 <!--  View Transitions -->
 <ViewTransitions />
diff --git a/src/components/DrawerToggle.astro b/src/components/DrawerToggle.astro
@@ -0,0 +1,55 @@
+---
+import { Icon } from "astro-icon/components";
+import { cn } from "@/lib/utils";
+---
+
+<button
+  id="drawer_toggle"
+  aria-label={`Toggle drawer open and closed`}
+  class={cn(
+    "flex md:hidden",
+    "size-9 rounded-full p-2 items-center justify-center",
+    "bg-transparent hover:bg-black/20 dark:hover:bg-white/20",
+    "stroke-current hover:stroke-black hover:dark:stroke-white",
+    "border border-black/25 dark:border-white/25",
+    "transition-colors duration-300 ease-in-out"
+  )}
+>
+  <Icon id="drawer-open" name="menu" class="size-full" />
+  <Icon id="drawer-close" name="close" class="size-full" />
+</button>
+
+<style>
+  #drawer_toggle > #drawer-open {
+    @apply block;
+  }
+
+  #drawer_toggle > #drawer-close {
+    @apply hidden;
+  }
+
+  #drawer_toggle.open > #drawer-open {
+    @apply hidden;
+  }
+
+  #drawer_toggle.open > #drawer-close {
+    @apply block;
+  }
+</style>
+
+<script is:inline>
+  function toggleDrawer() {
+    const drawer = document.getElementById("drawer");
+    const drawerButton = document.getElementById("drawer_toggle");
+    drawer?.classList.toggle("open");
+    drawerButton?.classList.toggle("open");
+  }
+
+  function initializeDrawerButton() {
+    const drawerButton = document.getElementById("drawer_toggle");
+    drawerButton?.addEventListener("click", toggleDrawer);
+  }
+
+  document.addEventListener("astro:after-swap", initializeDrawerButton);
+  initializeDrawerButton();
+</script>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,5 +1,7 @@
 ---
 import Container from "@/components/Container.astro";
+import ThemeToggle from "./ThemeToggle.astro";
+import DrawerToggle from "./DrawerToggle.astro";
 import { Icon } from "astro-icon/components";
 import { SITE, LINKS } from "@/consts";
 import { cn } from "@/lib/utils";
@@ -33,7 +35,7 @@ const subpath = pathname.match(/[^/]+/g);
                   "transition-colors duration-300 ease-in-out",
                   pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
                     ? "bg-black text-white dark:bg-white dark:text-black"
-                    : "hover:bg-black/20 hover:text-black dark:hover:bg-white/20 dark:hover:text-white",
+                    : "hover:bg-black/20 hover:text-black dark:hover:bg-white/20 dark:hover:text-white"
                 )}
               >
                 {LINK.TEXT}
@@ -52,7 +54,7 @@ const subpath = pathname.match(/[^/]+/g);
             "bg-transparent hover:bg-black/20 dark:hover:bg-white/20",
             "stroke-current hover:stroke-black hover:dark:stroke-white",
             "border border-black/25 dark:border-white/25",
-            "transition-colors duration-300 ease-in-out",
+            "transition-colors duration-300 ease-in-out"
           )}
         >
           <a
@@ -64,103 +66,13 @@ const subpath = pathname.match(/[^/]+/g);
             <Icon name="github" class="block size-full" />
           </a>
         </button>
-
-        <button
-          id="header-theme-button"
-          aria-label={`Toggle light and dark theme`}
-          class={cn(
-            "flex",
-            "size-9 rounded-full p-2 items-center justify-center",
-            "bg-transparent hover:bg-black/20 dark:hover:bg-white/20",
-            "stroke-current hover:stroke-black hover:dark:stroke-white",
-            "border border-black/25 dark:border-white/25",
-            "transition-colors duration-300 ease-in-out",
-          )}
-        >
-          <Icon name="sun" class="block size-full dark:hidden" />
-          <Icon name="moon" class="hidden size-full dark:block" />
-        </button>
-
-        <button
-          id="header-drawer-button"
-          aria-label={`Toggle drawer open and closed`}
-          class={cn(
-            "flex md:hidden",
-            "size-9 rounded-full p-2 items-center justify-center",
-            "bg-transparent hover:bg-black/20 dark:hover:bg-white/20",
-            "stroke-current hover:stroke-black hover:dark:stroke-white",
-            "border border-black/25 dark:border-white/25",
-            "transition-colors duration-300 ease-in-out",
-          )}
-        >
-          <svg
-            id="drawer-open"
-            class="size-full"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          >
-            <path d="M3 12h18"></path>
-            <path d="M3 6h18"></path>
-            <path d="M3 18h18"></path>
-          </svg>
-          <svg
-            id="drawer-close"
-            class="size-full"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          >
-            <path d="M18 6L6 18"></path>
-            <path d="M6 6l12 12"></path>
-          </svg>
-        </button>
+        <ThemeToggle />
+        <DrawerToggle />
       </div>
     </div>
   </Container>
 </header>
 
-<style>
-  #header-drawer-button > #drawer-open {
-    @apply block;
-  }
-
-  #header-drawer-button > #drawer-close {
-    @apply hidden;
-  }
-
-  #header-drawer-button.open > #drawer-open {
-    @apply hidden;
-  }
-
-  #header-drawer-button.open > #drawer-close {
-    @apply block;
-  }
-</style>
-
-<script is:inline>
-  function toggleDrawer() {
-    const drawer = document.getElementById("drawer");
-    const drawerButton = document.getElementById("header-drawer-button");
-    drawer?.classList.toggle("open");
-    drawerButton?.classList.toggle("open");
-  }
-
-  function initializeDrawerButton() {
-    const drawerButton = document.getElementById("header-drawer-button");
-    drawerButton?.addEventListener("click", toggleDrawer);
-  }
-
-  document.addEventListener("astro:after-swap", initializeDrawerButton);
-  initializeDrawerButton();
-</script>
-
 <script is:inline>
   function onScroll() {
     const header = document.getElementById("header");

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
@@ -0,0 +1,64 @@
+---
+import { Icon } from "astro-icon/components";
+import { cn } from "@/lib/utils";
+---
+
+<button
+  id="theme_toggle"
+  aria-label={`Toggle light and dark theme`}
+  class={cn(
+    "flex",
+    "size-9 rounded-full p-2 items-center justify-center",
+    "bg-transparent hover:bg-black/20 dark:hover:bg-white/20",
+    "stroke-current hover:stroke-black hover:dark:stroke-white",
+    "border border-black/25 dark:border-white/25",
+    "transition-colors duration-300 ease-in-out"
+  )}
+>
+  <Icon name="sun" class="block size-full dark:hidden" />
+  <Icon name="moon" class="hidden size-full dark:block" />
+</button>
+
+<style>
+  html {
+    color-scheme: light;
+    background-color: white;
+  }
+
+  html.dark {
+    color-scheme: dark;
+    background-color: black;
+  }
+</style>
+
+<script is:inline>
+  const theme = (() => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+      return localStorage.getItem("theme");
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  })();
+
+  if (theme === "light") {
+    document.documentElement.classList.remove("dark");
+  } else {
+    document.documentElement.classList.add("dark");
+  }
+
+  window.localStorage.setItem("theme", theme);
+
+  const handleToggleClick = () => {
+    const element = document.documentElement;
+    element.classList.toggle("dark");
+
+    const isDark = element.classList.contains("dark");
+    localStorage.setItem("theme", isDark ? "dark" : "light");
+  };
+
+  document
+    .getElementById("theme_toggle")
+    .addEventListener("click", handleToggleClick);
+</script>
diff --git a/src/icons/close.svg b/src/icons/close.svg
diff --git a/src/icons/menu.svg b/src/icons/menu.svg
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -28,16 +28,9 @@
 
 html {
   overflow-y: scroll;
-  color-scheme: light;
-  background-color: white;
   font-family: "Inter", sans-serif;
 }
 
-html.dark {
-  color-scheme: dark;
-  background-color: black;
-}
-
 html,
 body {
   @apply h-full w-full bg-white text-black/75 antialiased dark:bg-black dark:text-white/75;