[web] Fix option menu opening

web-src/src/router/index.js

@@ -41,7 +41,7 @@ import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
 import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
 import { useUIStore } from '@/stores/ui'
 
-const TOP_WITH_TABS = 124
+const TOP_WITH_TABS = 100
 
 export const router = createRouter({
   history: createWebHashHistory(),
@@ -322,18 +322,6 @@ export const router = createRouter({
         }, delay)
       })
     }
-    if (to.meta.has_index) {
-      /*
-       * Navigate to a page with index nav that should be hidden automatically
-       * If a tab navigation exists, an offset to the "top" anchor is added
-       */
-      return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve({ el: '#top', top: TOP_WITH_TABS })
-        }, delay)
-      })
-    }
-
     return { left: 0, top: 0 }
   }
 })

web-src/src/templates/ContentWithHeading.vue

@@ -4,15 +4,17 @@
       <div class="columns is-centered">
         <div class="column is-four-fifths">
           <section v-if="$slots.options" ref="options">
-            <slot name="options" />
-            <nav class="buttons is-centered">
-              <router-link class="button is-small" :to="position">
+            <div :class="{ 'is-hidden': hidden }">
+              <slot name="options" />
+            </div>
+            <div class="buttons is-centered">
+              <button class="button is-small" @click="hidden = !hidden">
                 <mdicon class="icon" :name="icon" size="16" />
-              </router-link>
-            </nav>
+              </button>
+            </div>
           </section>
           <div>
-            <nav id="top" class="level is-clipped">
+            <nav class="level is-clipped">
               <div class="level-left is-flex-shrink-1">
                 <div
                   class="level-item is-flex-shrink-1 has-text-centered-mobile"
@@ -42,37 +44,12 @@ export default {
   name: 'ContentWithHeading',
   data() {
     return {
-      options_visible: false
+      hidden: true
     }
   },
   computed: {
     icon() {
-      return this.options_visible ? 'chevron-up' : 'chevron-down'
-    },
-    position() {
-      return {
-        hash: this.options_visible ? '#top' : '#app',
-        query: this.$route.query
-      }
-    }
-  },
-  mounted() {
-    if (this.$slots.options) {
-      this.observer = new IntersectionObserver(this.onElementObserved, {
-        rootMargin: '-82px 0px 0px 0px',
-        threshold: 1.0
-      })
-      this.observer.observe(this.$refs.options)
-    }
-  },
-  methods: {
-    onElementObserved(entries) {
-      entries.forEach(({ isIntersecting }) => {
-        this.options_visible = isIntersecting
-      })
-    },
-    visibilityChanged(isVisible) {
-      this.options_visible = isVisible
+      return this.hidden ? 'chevron-down' : 'chevron-up'
     }
   }
 }