From 908a4b6c7081816911bb66363dc6360c1cb595ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 9 Dec 2025 22:20:32 +0100
Subject: [PATCH] chore: improve responsiveness of header

---
 app/components/AppHeader.vue | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 96668cd..ae41d89 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+
 const appConfig = useAppConfig()
 
 const scrollThreshold = ref<number>(0)
@@ -28,7 +30,12 @@ const { isScrolled } = useScroll(effectiveScrollThreshold.value)
   </header>
   <header class="app-header--sticky" v-if="isScrolled">
     <img src="~/assets/images/brand-desktop.svg" :alt="appConfig.title" />
-    <NuxtLink to="#about">⭣ About</NuxtLink>
+
+    <nav>
+      <!-- <NuxtLink v-if="isLargeScreen" to="#top">↓ Back on top</NuxtLink> -->
+      <NuxtLink to="#about">↓ About</NuxtLink>
+      <NuxtLink v-if="isLargeScreen" to="#contact">↓ Contact</NuxtLink>
+    </nav>
   </header>
 </template>
 
@@ -83,8 +90,13 @@ const { isScrolled } = useScroll(effectiveScrollThreshold.value)
   width: 300px;
 }
 
-a {
+nav {
+  display: flex;
+  gap: 2.5rem;
   margin-left: auto;
+}
+
+a {
   font-weight: 500;
   color: inherit;
 }
@@ -93,4 +105,19 @@ p {
   font-size: 1.25rem;
   line-height: 1.5rem;
 }
+
+@media (min-width: 1024px) {
+  .app-header--sticky {
+    height: 114px;
+    padding: 2.6rem 4rem;
+  }
+
+  .app-header--sticky img {
+    height: 30px;
+  }
+
+  a {
+    font-size: 1.25rem;
+  }
+}
 </style>
\ No newline at end of file