fix some frontend issues

vue/src/components/AppNav.vue

@@ -1,12 +1,26 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { RouterLink, useRouter, useRoute } from 'vue-router'
 import { useFeeds } from '@/composables/useFeeds'
 import Modal from './modal/AddUrl.vue'
 
 const router = useRouter()
 const route = useRoute()
-const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feeds } = useFeeds()
+const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feeds, navTitleVisible } = useFeeds()
+
+const titleRef = ref(null)
+let titleObserver
+
+onMounted(() => {
+  titleObserver = new IntersectionObserver(([entry]) => {
+    navTitleVisible.value = entry.isIntersecting
+  })
+  titleObserver.observe(titleRef.value)
+})
+
+onUnmounted(() => {
+  titleObserver?.disconnect()
+})
 
 const onFeedsPage = computed(() => route.path === '/feeds')
 
@@ -58,7 +72,7 @@ function handleToggleLayout() {
 <template>
   <header class="app-nav">
     <div class="app-nav__wrapper">
-      <span class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
+      <span ref="titleRef" class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
       <button
         class="app-nav__hamburger"
         type="button"