chore: make the theme switcher button visible on all screen sizes

raexera · Sep 12, 2024 · de7c479 · de7c479
1 parent 5d26e0f
commit de7c479
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 27 deletions.
diff --git a/src/components/Drawer.astro b/src/components/Drawer.astro
@@ -1,5 +1,4 @@
 ---
-import { Icon } from "astro-icon/components";
 import { LINKS } from "@/consts";
 import { cn } from "@/lib/utils";
 const { pathname } = Astro.url;
@@ -22,28 +21,14 @@ const subpath = pathname.match(/[^/]+/g);
             "transition-colors duration-300 ease-in-out",
             pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
               ? "pointer-events-none bg-black text-white dark:bg-white dark:text-black"
-              : "",
+              : ""
           )}
         >
           {LINK.TEXT}
         </a>
       ))
     }
   </nav>
-  <div class="mt-5 flex">
-    <button
-      id="drawer-theme-button"
-      aria-label="Toggle light and dark theme"
-      class="flex items-center space-x-2 rounded-full border border-black/10 bg-transparent stroke-current p-2 px-4 transition-colors duration-300 ease-in-out hover:bg-black/20 hover:stroke-black dark:border-white/25 dark:hover:bg-white/20 hover:dark:stroke-white"
-    >
-      <Icon name="sun" class="block size-6 dark:hidden" />
-      <Icon name="moon" class="hidden size-6 dark:block" />
-      <span class="text-sm text-black dark:text-white">
-        <span class="block dark:hidden">Light</span>
-        <span class="hidden dark:block">Dark</span>
-      </span>
-    </button>
-  </div>
 </div>
 
 <style>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -10,21 +10,19 @@ const subpath = pathname.match(/[^/]+/g);
 <header id="header" class="fixed top-0 z-50 h-16 w-full">
   <Container size="md">
     <div class="relative h-full w-full">
-      <div
-        class="absolute left-0 top-1/2 flex -translate-y-1/2 gap-1 font-semibold"
-      >
+      <div class="absolute left-0 top-1/2 flex -translate-y-1/2 font-semibold">
         <a
           href="/"
-          class="flex gap-1 text-current transition-colors duration-300 ease-in-out hover:text-black dark:hover:text-white"
+          class="flex text-current transition-colors duration-300 ease-in-out hover:text-black dark:hover:text-white"
         >
           <div class="font-bold uppercase">
             {SITE.TITLE}
           </div>
         </a>
       </div>
 
-      <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-        <nav class="hidden items-center justify-center gap-1 text-sm md:flex">
+      <div class="absdivte left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+        <nav class="hidden items-center justify-center text-sm md:flex">
           {
             LINKS.map((LINK) => (
               <a
@@ -35,7 +33,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}
@@ -45,17 +43,17 @@ const subpath = pathname.match(/[^/]+/g);
         </nav>
       </div>
 
-      <div class="buttons absolute right-0 top-1/2 flex -translate-y-1/2 gap-1">
+      <div class="buttons absolute right-0 top-1/2 flex -translate-y-1/2 gap-2">
         <button
           id="header-theme-button"
           aria-label={`Toggle light and dark theme`}
           class={cn(
-            "hidden md:flex",
+            "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/10 dark:border-white/25",
-            "transition-colors duration-300 ease-in-out",
+            "transition-colors duration-300 ease-in-out"
           )}
         >
           <Icon name="sun" class="block size-full dark:hidden" />
@@ -71,7 +69,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/10 dark:border-white/25",
-            "transition-colors duration-300 ease-in-out",
+            "transition-colors duration-300 ease-in-out"
           )}
         >
           <svg