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;
+    width: 2rem;
-    height: 2em;
+    height: 2rem;
     position: static;
     align-self: flex-start;
-    padding-right: 1rem;
+    margin-right: 1rem;
-    padding-top: 2rem;
+    margin-top: 1rem;
   }
 
   @media (min-width: 1140px) {

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}

src/components/navbarEntryMobile.astro

@@ -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>

src/layouts/Layout.astro

@@ -1,7 +1,6 @@
 ---
 import Navbar from '../components/navbar.astro'
-import NavbarEntryDesktop from '../components/navbarEntryDesktop.astro'
+import NavbarEntry from '../components/navbarEntry.astro'
-import NavbarEntryMobile from '../components/navbarEntryMobile.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>