Navigation: this shit is actually mobile & iPad friendly now!

src/components/Header.astro

@@ -15,7 +15,7 @@ const t = useTranslations(lang);
 >
   <div class="w-1/8">
     {/* Typical desktop menu */}
-    <div class="relative flex-row hidden md:flex">
+    <div class="relative flex-row hidden lg:flex">
       <HeaderButton text={t("header.home")} route={`/${lang}/`}>
         <Icon
           name="ph:house-bold"
@@ -56,7 +56,7 @@ const t = useTranslations(lang);
       </HeaderButton>
     </div>
     {/* Mobile hamburger menu */}
-    <div class="flex md:hidden" id="mobileNavTrigger" transition:persist>
+    <div class="flex lg:hidden" id="mobileNavTrigger" transition:persist>
       <Icon
         name="ph:text-align-justify-bold"
         class="h-9 w-9 text-text-color"

src/components/HeaderButton.astro

@@ -3,13 +3,13 @@ const { text, route } = Astro.props;
 ---
 
 <a
-  class="group flex w-full flex-row items-center justify-center border-t-2 border-solid border-navbar-text-color p-4 md:border-none h-1/3 md:h-fit"
+  class="group flex w-full flex-row items-center justify-center border-t-2 border-solid border-navbar-text-color p-4 lg:border-none h-1/3 lg:h-fit"
   id="header_anchor"
   href={route}
 >
   <slot />
   <span
-    class="font-roboto pl-2 text-center text-3xl font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color md:text-xl text-nowrap"
+    class="font-roboto pl-2 text-center text-3xl font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color lg:text-xl text-nowrap"
   >
     {text}
   </span>

src/components/MobileNavigation.astro

@@ -8,7 +8,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
 ---
 
 <div
-  class="h-full mt-16 flex w-full flex-col justify-evenly md:flex-row bg-navbar-color m-auto"
+  class="h-full mt-16 flex w-full flex-col justify-evenly bg-navbar-color m-auto"
   id="mobileNavMenu"
 >
   <HeaderButton text={t("header.home")} route={`/${lang}/`}>

src/components/SidebarButton.astro

@@ -4,13 +4,13 @@ const { title, route } = Astro.props;
 
 <a
   href={route}
-  class="snap-center snap-always group flex flex-col items-center p-3 bg-navbar-color w-full rounded-3xl md:flex-row md:bg-none md:rounded-none"
+  class="snap-center snap-always group flex flex-col items-center md:p-0 xl:p-3 max-sm:p-3 sm:p-3 bg-navbar-color w-full rounded-3xl md:flex-row md:bg-none md:rounded-none"
 >
-  <div class="p-2">
+  <div class="xl:p-2 max-sm:p-2 sm:p-2 md:p-0">
     <slot />
   </div>
   <div
-    class="max-md:min-w-24 roboto text-center font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color md:text-xl md:ml-2 text-nowrap"
+    class="max-md:min-w-24 roboto text-center font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color md:text-xl xl:ml-2 text-nowrap"
   >
     {title}
   </div>

src/layouts/Layout.astro

@@ -17,7 +17,7 @@ const { title, noHeader } = Astro.props;
     <SettingsLoader transition:persist />
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
     <link
       rel="stylesheet"

src/layouts/SettingsLayout.astro

@@ -9,7 +9,7 @@ import { Icon } from "astro-icon/components";
 
 <div class="flex flex-row roboto">
   <div class="text-text-color mt-16 fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row">
-      <div class="items-center md:p-3 flex flex-row border-border-color gap-5 md:border-r-2 md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
+      <div class="items-center md:p-3 sm:p-3 flex flex-row border-border-color md:gap-10 xl:gap-5 max-sm:gap-5 sm:gap-5 md:p-5 md:border-r-2 max:md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
       <SidebarButton title={t("settings.appearance")} route={`/${lang}/settings/appearance`}>
         <Icon name="ph:palette" class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
       </SidebarButton>