fix: tidy applying theme

tedbennett · Apr 25, 2023 · 4f67708 · 4f67708
1 parent e635232
commit 4f67708
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -3,7 +3,7 @@
 
 <nav class="w-full h-16 fixed z-50 top-0 uppercase font-semibold">
   <div
-    class="w-full h-full flex flex-row bg-white dark:bg-black justify-between items-center p-5 border-b-[1px] border-zinc-500 dark:border-zinc-300"
+    class="w-full h-full flex flex-row justify-between bg-white dark:bg-black items-center p-5 border-b-[1px] border-zinc-500 dark:border-zinc-300"
   >
     <a href="/" aria-label="Home">
       <span class="text-lg">tedb.dev</span>
@@ -21,10 +21,10 @@
       >
     </div>
     <button
-      id="theme-button"
+      data-theme-button
       class="px-3 py-1 font-semibold uppercase hidden sm:block"
     >
-      <span id="theme-button-text">light</span>
+      <span data-theme-button-text>light</span>
     </button>
     <button
       id="burger-button"
@@ -35,30 +35,42 @@
       <div class="h-[0.15rem] w-6 bg-black dark:bg-white"></div>
     </button>
   </div>
-  <div class="w-full z-50 bg-white hidden flex-col p-5 gap-3" id="burger-menu">
+  <div
+    class="w-full z-50 hidden flex-col p-5 gap-3 sm:hidden bg-white dark:bg-black"
+    id="burger-menu"
+  >
     <a href="/projects" aria-label="Projects"><span>projects</span></a>
     <a href="https://github.com/tedbennett" aria-label="Github"
       ><span>github</span></a
     >
     <a href="mailto:ted_bennett@icloud.com" aria-label="Contact"
       ><span>contact</span></a
     >
+    <button data-theme-button class="font-semibold uppercase text-left">
+      <span data-theme-button-text>light</span>
+    </button>
   </div>
 </nav>
 
 <script>
-  import { setTheme, getTheme } from "../helpers/theme";
+  import { setTheme, getTheme, Theme } from "../helpers/theme";
+
+  const applyTheme = (theme: Theme) => {
+    setTheme(theme);
+    const spans = document.querySelectorAll("[data-theme-button-text]");
+    spans.forEach((span) => (span.textContent = theme));
+  };
+
   const theme = getTheme();
-  setTheme(theme);
-  const span = document.getElementById("theme-button-text");
-  span.textContent = theme;
+  applyTheme(theme);
 
-  const button = document.getElementById("theme-button");
-  button.addEventListener("click", () => {
-    const newTheme = getTheme() === "dark" ? "light" : "dark";
-    setTheme(newTheme);
-    span.textContent = newTheme;
-  });
+  const buttons = document.querySelectorAll("[data-theme-button]");
+  buttons.forEach((button) =>
+    button.addEventListener("click", () => {
+      const newTheme = getTheme() === "dark" ? "light" : "dark";
+      applyTheme(newTheme);
+    })
+  );
 
   const burger = document.getElementById("burger-button");
   const menu = document.getElementById("burger-menu");

diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
@@ -5,7 +5,9 @@ import Layout from "../../layouts/Layout.astro";
 
 <Layout title="projects | tedb.dev">
   <div class="container px-4 sm:px-0 mx-auto py-5">
-    <h1 class="text-2xl font-semibold uppercase">projects</h1>
+    <h1 class="text-2xl font-semibold uppercase text-center sm:text-left">
+      projects
+    </h1>
     <div
       class="grid grid-cols-1 lg:grid-cols-2 h-full gap-5 py-5 items-stretch"
     >