From 4b3a8898f6d204cf3726e2c3968a1f201a6d00cb Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Mon, 1 Jan 2024 20:10:57 +0100
Subject: [PATCH] Better workaround for navbar + hopefully burger fix

---
 src/components/navbar.astro                   |  8 +-
 ...arEntryDesktop.astro => navbarEntry.astro} |  5 +-
 src/components/navbarEntryMobile.astro        | 81 -------------------
 src/layouts/Layout.astro                      |  7 +-
 4 files changed, 11 insertions(+), 90 deletions(-)
 rename src/components/{navbarEntryDesktop.astro => navbarEntry.astro} (87%)
 delete mode 100644 src/components/navbarEntryMobile.astro

diff --git a/src/components/navbar.astro b/src/components/navbar.astro
index 8cc5d56..7d1bdd1 100644
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@@ -109,12 +109,12 @@ const hamburger_src_url = `url("${hamburger.src}")`;
   .hamburger-menu {
     mask: var(--hamburger_src_url) no-repeat center;
     background-color: white;
-    width: 2em;
-    height: 2em;
+    width: 2rem;
+    height: 2rem;
     position: static;
     align-self: flex-start;
-    padding-right: 1rem;
-    padding-top: 2rem;
+    margin-right: 1rem;
+    margin-top: 1rem;
   }
 
   @media (min-width: 1140px) {
diff --git a/src/components/navbarEntryDesktop.astro b/src/components/navbarEntry.astro
similarity index 87%
rename from src/components/navbarEntryDesktop.astro
rename to src/components/navbarEntry.astro
index 2ebb3f4..8322b66 100644
--- a/src/components/navbarEntryDesktop.astro
+++ b/src/components/navbarEntry.astro
@@ -1,12 +1,13 @@
 ---
 export interface Props {
   currentPage?: string
+  navtype: "mobile" | "desktop"
   link: string
   text: string
   icon: ImageMetadata
 }
 
-const { icon, text, link, currentPage } = Astro.props
+const { icon, text, link, navtype, currentPage } = Astro.props
 
 let currPage = ''
 const slug = link.replace(new RegExp('/', 'g'), '')
@@ -20,6 +21,7 @@ if (currentPage === slug) {
 const icon_src_url = `url("${icon.src}")`;
 const fulllink = `/${slug}`
 
+let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
 ---
 
 <li>
@@ -29,6 +31,7 @@ const fulllink = `/${slug}`
     aria-label={text}
     class={currPage}
     role="menuitem"
+    {...extraattributes}
   >
     <div class="icon"></div>
     {text}
diff --git a/src/components/navbarEntryMobile.astro b/src/components/navbarEntryMobile.astro
deleted file mode 100644
index 175ff83..0000000
--- a/src/components/navbarEntryMobile.astro
+++ /dev/null
@@ -1,81 +0,0 @@
----
-export interface Props {
-  currentPage?: string
-  link: string
-  text: string
-  icon: ImageMetadata
-}
-
-const { icon, text, link, currentPage } = Astro.props
-
-let currPage = ''
-const slug = link.replace(new RegExp('/', 'g'), '')
-
-if (currentPage === slug) {
-  currPage = 'current'
-} else if (currentPage === 'home' && link === '/') {
-  currPage = 'current'
-}
-
-const icon_src_url = `url("${icon.src}")`;
-const fulllink = `/${slug}`
----
-
-<li>
-  <a
-    href={fulllink}
-    rel="noopener noreferrer"
-    aria-label={text}
-    class={currPage}
-    role="menuitem"
-    tabindex="0"
-  >
-    <div class="icon"></div>
-    {text}
-  </a>
-</li>
-
-<style define:vars={{ icon_src_url }}>
-  li {
-    align-items: center;
-    justify-content: center;
-    text-align: left;
-    display: flex;
-    width: 200px;
-  }
-
-  li > a {
-    display: inline-flex;
-    color: white;
-    text-decoration: none;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.4em;
-    height: 100%;
-    font-weight: bold;
-    gap: 0.2em;
-  }
-
-  li > a:hover {
-    color: var(--c-purplepink);
-  }
-
-  li > a:hover > .icon {
-    background-color: var(--c-purplepink);
-  }
-
-  .current {
-    color: var(--c-darkpurple) !important;
-  }
-
-  .current > .icon {
-    background-color: var(--c-darkpurple) !important;
-  }
-
-  .icon {
-    mask: var(--icon_src_url) no-repeat center;
-    background-color: white;
-    width: 1.4em;
-    height: 1.4em;
-  }
-</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 8536cad..09d6182 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,7 +1,6 @@
 ---
 import Navbar from '../components/navbar.astro'
-import NavbarEntryDesktop from '../components/navbarEntryDesktop.astro'
-import NavbarEntryMobile from '../components/navbarEntryMobile.astro'
+import NavbarEntry from '../components/navbarEntry.astro'
 import navdata from '../../static/data/_navdata.json'
 import embed from '../assets/embed.png'
 
@@ -78,12 +77,12 @@ const mapped_navdata = navdata.map((item) => ({
     <Navbar>
       {
         mapped_navdata.map((item) => (
-          <NavbarEntryDesktop currentPage={currentpage} {...item} slot="desktop"/>
+          <NavbarEntry currentPage={currentpage} navtype="desktop" {...item} slot="desktop"/>
         ))
       }
       {
         mapped_navdata.map((item) => (
-          <NavbarEntryMobile currentPage={currentpage} {...item} slot="mobile"/>
+          <NavbarEntry currentPage={currentpage} navtype="mobile" {...item} slot="mobile"/>
         ))
       }
     </Navbar>