minor navigation changes

vue/src/components/RssFeeds.vue

@@ -113,7 +113,7 @@ function setupIntersectionObserver() {
   }
 }
 
-function handleIntersection(entries) {
+async function handleIntersection(entries) {
   // The callback function for when the target element enters or exits the viewport
   entries.forEach(entry => {
     if (entry.isIntersecting) {
@@ -121,12 +121,12 @@ function handleIntersection(entries) {
     } else if (initialLoad === true) {
       console.log(entry.isIntersecting)
       // Element is out of sight
-      if (entry.isVisible === false) {
+      if (entry.isVisible === false && entry.boundingClientRect.y < 0) {
         console.log('Element is out of sight ' + entry.intersectionRatio);
         //console.log(feeds.value[entry.target.id])
         markRead(feeds.value[entry.target.id].id).await
         removeFeed(entry.target.id)
-        // TODO viewport moves crazy
+        document.getElementById(0).scrollIntoView()
       }
     }
   })
@@ -149,8 +149,18 @@ onMounted(() => {
 </script>
 
 <template>
+  <header>
+    <div class="wrapper">
+      <nav>
+        <p @click="sync">Sync</p>
+        <!-- <RouterLink to="/">Home</RouterLink> -->
+        <!-- <RouterLink to="/about">About</RouterLink> -->
+        <!-- <RouterLink to="/feeds">Feeds</RouterLink> -->
+      </nav>
+    </div>
+  </header>
   <div>
-    <h1>Feeds</h1> <button @click="sync">{{ buttonText }}</button>
+    <h1>Feeds</h1> <!-- <button @click="sync">{{ buttonText }}</button> -->
     <div v-if="showMessage" class="message">{{ message }}</div>
     <div id='article' class='article'>
       <p v-if="feeds.length == 0">No unread articles.</p>