Improved sticky header

vue/src/components/AppNav.vue

@@ -1,25 +1,18 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { RouterLink, useRouter, useRoute } from 'vue-router'
 import { useFeeds, logout as logoutSession } from '@/composables/useFeeds'
 import Modal from './modal/AddUrl.vue'
 
 const router = useRouter()
 const route = useRoute()
-const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feeds, navTitleVisible } = useFeeds()
+const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feeds } = useFeeds()
 
-const titleRef = ref(null)
-let titleObserver
+const headerRef = ref(null)
 
 onMounted(() => {
-  titleObserver = new IntersectionObserver(([entry]) => {
-    navTitleVisible.value = entry.isIntersecting
-  })
-  titleObserver.observe(titleRef.value)
-})
-
-onUnmounted(() => {
-  titleObserver?.disconnect()
+  const h = headerRef.value?.getBoundingClientRect().height ?? 0
+  document.documentElement.style.setProperty('--app-nav-height', `${h}px`)
 })
 
 const onFeedsPage = computed(() => route.path === '/feeds')
@@ -69,9 +62,9 @@ function handleToggleLayout() {
 </script>
 
 <template>
-  <header class="app-nav">
+  <header ref="headerRef" class="app-nav">
     <div class="app-nav__wrapper">
-      <span ref="titleRef" class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
+      <span class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
       <button
         class="app-nav__hamburger"
         type="button"
@@ -124,7 +117,12 @@ function handleToggleLayout() {
 
 <style scoped>
 .app-nav {
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  background: var(--color-background);
 }
 
 .app-nav__wrapper {