Update ToggleMenu icon and animation on open

src/components/common/BasicScripts.astro

@@ -45,7 +45,8 @@ import { UI } from '~/utils/config';
       document.querySelector("#header > div > div:last-child")?.classList.add("hidden");
     });
 
-    attachEvent('[data-aw-toggle-menu]', 'click', function () {
+    attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
+      elem.classList.toggle("expanded");
       document.body.classList.toggle("overflow-hidden");
       document.getElementById("header")?.classList.toggle("h-screen");
       document.getElementById("header")?.classList.toggle("expanded");

src/components/common/ToggleMenu.astro

@@ -1,22 +1,34 @@
 ---
-import { Icon } from 'astro-icon/components';
-
 export interface Props {
   label?: string;
   class?: string;
-  iconClass?: string;
-  iconName?: string;
 }
 
 const {
   label = 'Toggle Menu',
   class:
-    className = 'ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition',
-  iconClass = 'w-6 h-6',
-  iconName = 'tabler:menu',
+    className = "flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group",
 } = Astro.props;
 ---
 
-<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
-  <Icon name={iconName} class={iconClass} />
+<button
+  class={className}
+  aria-label={label}
+  data-aw-toggle-menu
+>
+  <span class="sr-only">{label}</span>
+  <slot>
+    <span
+      aria-hidden="true"
+      class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:rotate-45 group-[.expanded]:translate-y-2.5"
+    ></span>
+    <span
+      aria-hidden="true"
+      class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:opacity-0"
+    ></span>
+    <span
+      aria-hidden="true"
+      class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:-rotate-45 group-[.expanded]:-translate-y-2.5"
+    ></span>
+  </slot>
 </button>