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

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

Hide file tree

Showing 2 changed files with 4 additions and 21 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;
@@ -30,20 +29,6 @@ const subpath = pathname.match(/[^/]+/g);
       ))
     }
   </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,12 +10,10 @@ 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}
@@ -45,12 +43,12 @@ 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",