From 99fe35aa2379b330656ab2a7978c5d8270fe5fab Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Wed, 30 Oct 2024 20:28:45 +0100
Subject: [PATCH] Dropdown change on mobile

---
 package-lock.json                         |   4 +-
 package.json                              |   2 +-
 src/components/navbar/navbar.astro        | 128 ++--------------------
 src/components/navbar/navbarDesktop.astro |  29 +++++
 src/components/navbar/navbarLogo.astro    |  32 ++++++
 src/components/navbar/navbarMobile.astro  |  70 ++++++++++++
 6 files changed, 144 insertions(+), 121 deletions(-)
 create mode 100644 src/components/navbar/navbarDesktop.astro
 create mode 100644 src/components/navbar/navbarLogo.astro
 create mode 100644 src/components/navbar/navbarMobile.astro

diff --git a/package-lock.json b/package-lock.json
index 991d2da..fc66a77 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index b2b6b3f..685435e 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/navbar/navbar.astro b/src/components/navbar/navbar.astro
index cf865a5..77cfc18 100644
--- a/src/components/navbar/navbar.astro
+++ b/src/components/navbar/navbar.astro
@@ -1,34 +1,20 @@
 ---
-import { Image } from 'astro:assets'
-import logo from '@assets/logo.svg'
-import hamburger from 'iconoir/icons/menu.svg'
-const hamburger_src_url = `url("${hamburger.src}")`
+import NavbarDesktop from './navbarDesktop.astro'
+import NavbarLogo from './navbarLogo.astro'
+import NavbarMobile from './navbarMobile.astro'
 ---
 
 <header>
-  <a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
-    <Image src={logo} alt="" loading="eager"/>
-    <span class="visually-hidden">Logo</span>
-  </a>
-  <ul class="desktop">
+  <NavbarLogo/>
+  <NavbarDesktop>
     <slot name="desktop" />
-  </ul>
-  <button
-    class="mobile"
-    aria-label="Navigation Button"
-    tabindex="0"
-    onclick="this.focus()"
-    role="button"
-  >
-    <ul>
-      <slot name="mobile" />
-    </ul>
-    <div class="placeholder"></div>
-    <div class="hamburger-menu" role="navigation"></div>
-  </button>
+  </NavbarDesktop>
+  <NavbarMobile>
+    <slot name="mobile" />
+  </NavbarMobile>
 </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>
diff --git a/src/components/navbar/navbarDesktop.astro b/src/components/navbar/navbarDesktop.astro
new file mode 100644
index 0000000..0b04740
--- /dev/null
+++ b/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>
diff --git a/src/components/navbar/navbarLogo.astro b/src/components/navbar/navbarLogo.astro
new file mode 100644
index 0000000..87cebae
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/navbar/navbarMobile.astro b/src/components/navbar/navbarMobile.astro
new file mode 100644
index 0000000..0e5f6c5
--- /dev/null
+++ b/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>