From e716262fe25a4f7c02147a055abd1cc252c16650 Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Thu, 23 Apr 2026 11:10:17 +0200
Subject: [PATCH] fix: enforce small-screen nav visibility

---
 app/pages/index.vue | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4b85bfc..7e967df 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -31,7 +31,7 @@
         </div>
 
         <div class="flex items-center gap-2 sm:gap-3">
-          <NuxtLink to="/roadmap" class="btn btn-ghost whitespace-nowrap btn-compact hidden md:inline-flex">
+          <NuxtLink to="/roadmap" class="btn btn-ghost whitespace-nowrap btn-compact topnav-secondary-action topnav-roadmap-action">
             <v-icon icon="mdi-map-marker-path" size="18" />
             Roadmap
           </NuxtLink>
@@ -40,7 +40,7 @@
             external
             target="_blank"
             rel="noopener"
-            class="btn btn-ghost whitespace-nowrap btn-compact hidden lg:inline-flex"
+            class="btn btn-ghost whitespace-nowrap btn-compact topnav-secondary-action topnav-github-action"
           >
             <v-icon icon="mdi-github" size="18" />
             GitHub
@@ -83,8 +83,8 @@
                 :target="item.external ? '_blank' : undefined"
                 :rel="item.external ? 'noopener' : undefined"
                 :class="[
-                  'items-center justify-between gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white/80 transition hover:bg-white/10',
-                  item.hideOnSmall ? 'hidden sm:flex' : 'flex'
+                  'flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white/80 transition hover:bg-white/10',
+                  item.hideOnSmall ? 'mobile-nav-link--hide-small' : ''
                 ]"
                 @click="handleMobileNavLinkClick($event, item)"
               >
@@ -1775,6 +1775,22 @@ useHead(() => ({
   font-size: 0.75rem;
 }
 
+.topnav-secondary-action {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .topnav-roadmap-action {
+    display: inline-flex;
+  }
+}
+
+@media (min-width: 1024px) {
+  .topnav-github-action {
+    display: inline-flex;
+  }
+}
+
 @media (min-width: 640px) {
   .btn-compact {
     padding: 0.6rem 1rem;
@@ -1817,6 +1833,16 @@ useHead(() => ({
   transform: translateY(-8px);
 }
 
+.mobile-nav-link--hide-small {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .mobile-nav-link--hide-small {
+    display: flex;
+  }
+}
+
 .mobile-toggle {
   @apply inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-white transition hover:bg-white/10;
   width: 44px;