Dropdown change on mobile

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@firq/fgosite",
-	"version": "0.2.0-pre.43",
+	"version": "0.2.0-pre.46",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@firq/fgosite",
-			"version": "0.2.0-pre.43",
+			"version": "0.2.0-pre.46",
 			"dependencies": {
 				"@astro-community/astro-embed-youtube": "^0.5.2",
 				"@astrojs/check": "^0.9.4",

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.45",
+	"version": "0.2.0-pre.46",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",

src/components/navbar/navbar.astro

@@ -1,34 +1,20 @@
 ---
-import { Image } from 'astro:assets'
+import NavbarDesktop from './navbarDesktop.astro'
-import logo from '@assets/logo.svg'
+import NavbarLogo from './navbarLogo.astro'
-import hamburger from 'iconoir/icons/menu.svg'
+import NavbarMobile from './navbarMobile.astro'
-const hamburger_src_url = `url("${hamburger.src}")`
 ---
 
 <header>
-  <a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
+  <NavbarLogo/>
-    <Image src={logo} alt="" loading="eager"/>
+  <NavbarDesktop>
-    <span class="visually-hidden">Logo</span>
-  </a>
-  <ul class="desktop">
     <slot name="desktop" />
-  </ul>
+  </NavbarDesktop>
-  <button
+  <NavbarMobile>
-    class="mobile"
+    <slot name="mobile" />
-    aria-label="Navigation Button"
+  </NavbarMobile>
-    tabindex="0"
-    onclick="this.focus()"
-    role="button"
-  >
-    <ul>
-      <slot name="mobile" />
-    </ul>
-    <div class="placeholder"></div>
-    <div class="hamburger-menu" role="navigation"></div>
-  </button>
 </header>
 
-<style define:vars={{ hamburger_src_url }}>
+<style>
   header {
     z-index: 1000;
     position: sticky;
@@ -41,105 +27,11 @@ const hamburger_src_url = `url("${hamburger.src}")`
     line-height: 1.5em;
     border-bottom: 2px solid var(--c-accent-1) ;
   }
-  header > a {
-    margin-left: 16px;
-    padding-top: 8px;
-    display: block;
-    height: 48px;
-    width: 48px;
-  }
-  a > img {
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
-  }
-  .desktop {
-    align-items: center;
-    justify-content: space-around;
-    display: none;
-    flex-wrap: wrap;
-    flex-direction: row;
-    height: 64px;
-    width: 100%;
-    list-style-type: none;
-    row-gap: 0.5em;
-    column-gap: 0.5ch;
-    margin: 0px;
-    line-height: 1.5em;
-  }
-  .mobile > ul {
-    background-color: var(--c-primary-background);
-    align-items: center;
-    flex-wrap: wrap;
-    flex-direction: column;
-    display: flex;
-    width: 100%;
-    list-style-type: none;
-    line-height: 3em;
-  }
-
-  .placeholder {
-    display: flex;
-    width: 100%;
-  }
-
-  .mobile {
-    display: flex;
-    background-color: var(--c-primary-background);
-    border: 0px;
-    width: 100%;
-    height: 64px;
-  }
-
-  .mobile > ul {
-    display: none;
-    padding: 0px;
-  }
-
-  .mobile:focus-within > ul {
-    display: flex;
-  }
-
-  .mobile:focus-within > .placeholder {
-    display: none;
-  }
-
-  .mobile:focus-within {
-    justify-content: top;
-    height: auto;
-  }
-  header:focus-within > a {
-    display: flex;
-    justify-self: top;
-  }
-
-  .hamburger-menu {
-    mask: var(--hamburger_src_url) no-repeat center;
-    mask-size: cover;
-    background-color: var(--c-primary-text);
-    width: 2.25rem;
-    height: 2.25rem;
-    position: static;
-    align-self: flex-start;
-    margin-right: 1rem;
-    margin-top: 0.825rem;
-  }
 
   @media (min-width: 1140px) {
-    .mobile {
-      display: none;
-    }
-    .desktop {
-      display: flex;
-    }
-
     header {
       height: 64px;
       align-items: center;
     }
-
-    header > a {
-      padding-top: 0px;
-    }
   }
 </style>

src/components/navbar/navbarDesktop.astro

@@ -0,0 +1,29 @@
+---
+
+---
+
+<ul>
+  <slot />
+</ul>
+
+<style>
+  ul {
+    align-items: center;
+    justify-content: space-around;
+    display: none;
+    flex-wrap: wrap;
+    flex-direction: row;
+    height: 64px;
+    width: 100%;
+    list-style-type: none;
+    row-gap: 0.5em;
+    column-gap: 0.5ch;
+    margin: 0px;
+    line-height: 1.5em;
+  }
+  @media (min-width: 1140px) {
+    ul {
+      display: flex;
+    }
+  }
+</style>

src/components/navbar/navbarLogo.astro

@@ -0,0 +1,32 @@
+---
+import { Image } from 'astro:assets'
+import logo from '@assets/logo.svg'
+---
+
+<a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
+  <Image src={logo} alt="" loading="eager" />
+  <span class="visually-hidden">Logo</span>
+</a>
+
+<style>
+  a {
+    margin-left: 16px;
+    padding-top: 8px;
+    height: 48px;
+    width: 48px;
+    display: flex;
+    justify-self: top;
+    align-items: center;
+  }
+
+    a > img {
+    height: 42px;
+    width: 42px;
+    object-fit: contain;
+  }
+  @media (min-width: 1140px) {
+    a {
+      padding-top: 0px;
+    }
+  }
+</style>

src/components/navbar/navbarMobile.astro

@@ -0,0 +1,70 @@
+---
+import hamburger from 'iconoir/icons/menu.svg'
+const hamburger_src_url = `url("${hamburger.src}")`
+---
+
+<div class="dropdown">
+  <input type="checkbox" id="dropdown" />
+  <ul class="dropdown-content">
+    <slot />
+  </ul>
+  <label for="dropdown" class="dropdown-btn">
+    <div class="hamburger-menu" role="navigation"></div>
+  </label>
+</div>
+
+<style define:vars={{ hamburger_src_url }}>
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+  }
+
+  input[type="checkbox"]:checked ~ .dropdown-content {
+    display: flex;
+    height: auto;
+  }
+
+  .dropdown-content {
+    display: none;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-items: center;
+    background-color: var(--c-primary-background);
+    width: 100%;
+    height: 0px;
+    list-style-type: none;
+    line-height: 3em;
+    margin: 0.5rem 0px 0px;
+    padding: 0;
+  }
+
+  .dropdown-btn {
+    height: 64px;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dropdown {
+    display: flex;
+    justify-content: flex-end;
+    background-color: var(--c-primary-background);
+    border: 0px;
+    width: 100%;
+  }
+
+  .hamburger-menu {
+    mask: var(--hamburger_src_url) no-repeat center;
+    mask-size: cover;
+    background-color: var(--c-primary-text);
+    width: 2.25rem;
+    height: 2.25rem;
+    margin-right: 4px;
+  }
+
+  @media (min-width: 1140px) {
+    .dropdown {
+      display: none;
+    }
+  }
+</style>