fix(nav): enable menu expansion and click support on mobile

Resolved issue where the navigation sub menu  could not be expanded
or clicked on mobile devices. Updated event handling and styles to
ensure proper interaction.

src/layouts/partials/Header.astro

@@ -55,7 +55,13 @@ const { pathname } = Astro.url;
           <>
             {menu.hasChildren ? (
               <li class="nav-item nav-dropdown group relative">
-                <span
+                <input
+                  type="checkbox"
+                  id={`submenu-${menu.name}`}
+                  class="peer hidden lg:hidden"
+                />
+                <label
+                  for={`submenu-${menu.name}`}
                   class={`nav-link inline-flex items-center ${
                     menu.children?.map(({ url }) => url).includes(pathname) ||
                     menu.children
@@ -69,8 +75,8 @@ const { pathname } = Astro.url;
                   <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
                     <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                   </svg>
-                </span>
-                <ul class="nav-dropdown-list hidden group-hover:block lg:invisible lg:absolute lg:block lg:opacity-0 lg:group-hover:visible lg:group-hover:opacity-100">
+                </label>
+                <ul class=" hidden peer-checked:block lg:invisible lg:absolute lg:block lg:opacity-0 lg:group-hover:visible lg:group-hover:opacity-100">
                   {menu.children?.map((child) => (
                     <li class="nav-dropdown-item">
                       <a