From 8a0f995f864bd0c1c7c89914e416a681c65007cb Mon Sep 17 00:00:00 2001
From: rxyhn <rxyhn.dev@gmail.com>
Date: Fri, 13 Sep 2024 04:44:45 +0700
Subject: [PATCH] chore: optimize

---
 src/components/Boxes.tsx    |  9 +++------
 src/components/Drawer.astro | 15 ---------------
 src/components/Header.astro | 12 +++++-------
 3 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/src/components/Boxes.tsx b/src/components/Boxes.tsx
index f93bc18..d35ae28 100644
--- a/src/components/Boxes.tsx
+++ b/src/components/Boxes.tsx
@@ -13,21 +13,18 @@ export default function Boxes({ className = "" }: GridProps) {
   useEffect(() => {
     const updateDimensions = () => {
       if (containerRef.current) {
-        const { scrollHeight } = document.documentElement;
         setDimensions({
           width: window.innerWidth,
-          height: Math.max(window.innerHeight, scrollHeight),
+          height: window.innerHeight,
         });
       }
     };
 
     window.addEventListener("resize", updateDimensions);
-    window.addEventListener("scroll", updateDimensions);
     updateDimensions();
 
     return () => {
       window.removeEventListener("resize", updateDimensions);
-      window.removeEventListener("scroll", updateDimensions);
     };
   }, []);
 
@@ -45,8 +42,8 @@ export default function Boxes({ className = "" }: GridProps) {
   return (
     <div
       ref={containerRef}
-      className={`absolute flex h-full w-full justify-center overflow-hidden bg-white dark:bg-black ${className}`}
-      style={{ height: `${dimensions.height}px`, zIndex: 0 }}
+      className={`absolute inset-0 flex justify-center overflow-hidden bg-white dark:bg-black ${className}`}
+      style={{ height: "100vh", zIndex: 0 }}
     >
       {/* Left gradient overlay */}
       <div className="absolute left-0 top-0 h-full w-1/2">
diff --git a/src/components/Drawer.astro b/src/components/Drawer.astro
index bdbd933..ec62521 100644
--- 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
index 41e733a..d72f104 100644
--- 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}
@@ -24,7 +22,7 @@ const subpath = pathname.match(/[^/]+/g);
       </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">
+        <nav class="hidden items-center justify-center text-sm md:flex">
           {
             LINKS.map((LINK) => (
               <a
@@ -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",