From 6d2848571d18f7cad33546cc07f99f2c70845b0e Mon Sep 17 00:00:00 2001
From: rxyhn <rxyhn.dev@gmail.com>
Date: Sun, 22 Sep 2024 06:49:52 +0700
Subject: [PATCH] refactor: fix inconsistent id

---
 src/components/DrawerToggle.astro | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/DrawerToggle.astro b/src/components/DrawerToggle.astro
index 1241473..6a54ab1 100644
--- a/src/components/DrawerToggle.astro
+++ b/src/components/DrawerToggle.astro
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 ---
 
 <button
-  id="drawer_toggle"
+  id="drawerToggle"
   aria-label="Toggle drawer open and closed"
   class={cn(
     "md:hidden flex size-9 p-2 rounded-full items-center justify-center",
@@ -14,16 +14,16 @@ import { cn } from "@/lib/utils";
     "transition-colors duration-300",
   )}
 >
-  <Icon id="drawer-open" name="menu" class="block size-full" />
-  <Icon id="drawer-close" name="close" class="hidden size-full" />
+  <Icon id="drawerOpen" name="menu" class="block size-full" />
+  <Icon id="drawerClose" name="close" class="hidden size-full" />
 </button>
 
 <style>
-  #drawer_toggle.open #drawer-open {
+  #drawerToggle.open #drawerOpen {
     display: none;
   }
 
-  #drawer_toggle.open #drawer-close {
+  #drawerToggle.open #drawerClose {
     display: block;
   }
 </style>
@@ -31,18 +31,18 @@ import { cn } from "@/lib/utils";
 <script>
   function toggleDrawer() {
     const drawer = document.getElementById("drawer");
-    const drawerButton = document.getElementById("drawer_toggle");
+    const drawerButton = document.getElementById("drawerToggle");
     drawer?.classList.toggle("open");
     drawerButton?.classList.toggle("open");
   }
 
   document
-    .getElementById("drawer_toggle")
+    .getElementById("drawerToggle")
     ?.addEventListener("click", toggleDrawer);
 
   document.addEventListener("astro:after-swap", () => {
     document
-      .getElementById("drawer_toggle")
+      .getElementById("drawerToggle")
       ?.addEventListener("click", toggleDrawer);
   });
 </script>