Finish first take on mobile nav

components/Nav/Banner.vue

@@ -27,17 +27,15 @@ const dismiss = (id: string) => {
 </script>
 
 <template>
-	<ClientOnly>
-		<BaseContainer v-if="banner && bannerVisible" class="banner-container">
-			<NuxtLink class="banner" :href="banner.link ?? undefined">
-				<BaseIcon v-if="banner.icon" :name="banner.icon" size="small" />
-				<!-- eslint-disable-next-line vue/no-v-html -->
-				<span class="content" v-html="banner.content" />
-				<BaseIcon class="arrow" name="arrow_forward" size="small" />
-				<button class="dismiss" @click="dismiss(banner.id)"><BaseIcon name="close" size="small" /></button>
-			</NuxtLink>
-		</BaseContainer>
-	</ClientOnly>
+	<BaseContainer v-if="banner && bannerVisible" class="banner-container">
+		<NuxtLink class="banner" :href="banner.link ?? undefined">
+			<BaseIcon v-if="banner.icon" :name="banner.icon" size="small" />
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<span class="content" v-html="banner.content" />
+			<BaseIcon class="arrow" name="arrow_forward" size="small" />
+			<button class="dismiss" @click="dismiss(banner.id)"><BaseIcon name="close" size="small" /></button>
+		</NuxtLink>
+	</BaseContainer>
 </template>
 
 <style scoped lang="scss">

components/Nav/Header.vue

@@ -47,6 +47,10 @@ watch(route, () => {
 
 <template>
 	<BaseContainer class="header-container">
+		<ClientOnly>
+			<NavBanner class="banner-bar" />
+		</ClientOnly>
+
 		<header class="header">
 			<NuxtLink to="/" class="logo">
 				<img src="~/assets/svg/logo-dark.svg" alt="Directus Logo" />
@@ -111,20 +115,24 @@ a {
 }
 
 .header-container {
-	position: sticky;
+	position: fixed;
 	top: 0;
 	z-index: 5;
 	background-color: rgba(255, 255, 255, 0.8);
-	padding-block: var(--space-4);
 	backdrop-filter: blur(10px);
 	max-height: 100vh;
 	overflow: auto;
 }
 
+.banner-bar {
+	grid-area: full;
+}
+
 .header {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
+	padding-block: var(--space-4);
 }
 
 .logo {

layouts/default.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts"></script>
 
 <template>
-	<NavBanner />
 	<NavHeader />
 	<slot />
 	<NavFooter />