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>

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>

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>