From b03eba2bd53dd3c04a0d55fce43c1389234f7007 Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Mon, 1 Jan 2024 19:41:46 +0100
Subject: [PATCH] Workaround to have tabindex for mobile dropdown but not on
 desktop

---
 src/components/navbar.astro                   |  4 +-
 src/components/navbarEntryDesktop.astro       | 81 +++++++++++++++++++
 ...barEntry.astro => navbarEntryMobile.astro} |  0
 src/layouts/Layout.astro                      | 10 ++-
 4 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 src/components/navbarEntryDesktop.astro
 rename src/components/{navbarEntry.astro => navbarEntryMobile.astro} (100%)

diff --git a/src/components/navbar.astro b/src/components/navbar.astro
index 38e1c6f..8cc5d56 100644
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@@ -11,11 +11,11 @@ const hamburger_src_url = `url("${hamburger.src}")`;
     <span class="visually-hidden">Firq Website Logo</span>
   </a>
   <ul class="desktop">
-    <slot />
+    <slot name="desktop"/>
   </ul>
   <button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()">
     <ul>
-      <slot />
+      <slot name="mobile"/>
     </ul>
     <div class="placeholder"></div>
     <div class="hamburger-menu" role="menu"></div>
diff --git a/src/components/navbarEntryDesktop.astro b/src/components/navbarEntryDesktop.astro
new file mode 100644
index 0000000..2ebb3f4
--- /dev/null
+++ b/src/components/navbarEntryDesktop.astro
@@ -0,0 +1,81 @@
+---
+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"
+  >
+    <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/components/navbarEntry.astro b/src/components/navbarEntryMobile.astro
similarity index 100%
rename from src/components/navbarEntry.astro
rename to src/components/navbarEntryMobile.astro
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b1151c0..8536cad 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import Navbar from '../components/navbar.astro'
-import NavbarEntry from '../components/navbarEntry.astro'
+import NavbarEntryDesktop from '../components/navbarEntryDesktop.astro'
+import NavbarEntryMobile from '../components/navbarEntryMobile.astro'
 import navdata from '../../static/data/_navdata.json'
 import embed from '../assets/embed.png'
 
@@ -77,7 +78,12 @@ const mapped_navdata = navdata.map((item) => ({
     <Navbar>
       {
         mapped_navdata.map((item) => (
-          <NavbarEntry currentPage={currentpage} {...item} />
+          <NavbarEntryDesktop currentPage={currentpage} {...item} slot="desktop"/>
+        ))
+      }
+      {
+        mapped_navdata.map((item) => (
+          <NavbarEntryMobile currentPage={currentpage} {...item} slot="mobile"/>
         ))
       }
     </Navbar>