fix header menu submenu #827

2020-07-29 19:03:59 +02:00
parent 91875258de
commit 79943af82e
4 changed files with 17 additions and 5 deletions
@@ -70,12 +70,17 @@ header[role="banner"]{
          overflow: hidden;
        }
      }
-      &:hover, &.opened{
+      //
+      // &:focus-within
+      // &:hover,
+      &.opened{
        >ul>li{
          height:1em;
        }
      }
-
+      &.has-submenu{
+        cursor: pointer;
+      }
    }
    li>span,li>a{
      font-size: 0.9em;
@@ -5,7 +5,7 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Les Guides de Paris</title>
  </head>
-  <body>
+  <body tabindex="-1">
    <div id="app"></div>
  </body>
 </html>
@@ -12,8 +12,8 @@
      @scroll.passive="onScrollCenter"
    >
      <div
-        class="wrapper"
        ref="scrollablecenter"
+        class="wrapper"
      >
        <slot />
      </div>
@@ -6,7 +6,8 @@
        <span v-if="!corpusLoaded" class="loading">Loading ...</span>
        <router-link v-else to="/corpus">Corpus</router-link>
      </li>
-      <li :class="{ opened: indexOpened }">
+      <li class="has-submenu" :class="{ opened: indexOpened }">
+        <!-- tabindex="-1" -->
        <span
          @click.prevent="onClickIndex"
          @keyup.enter="onClickIndex"
@@ -44,6 +45,12 @@ export default {
      corpusLoaded: state => state.Corpus.corpusLoaded
    })
  },
+  watch: {
+    $route (n, o) {
+      console.log('route changed')
+      this.indexOpened = false
+    }
+  },
  methods: {
    onClickIndex (e) {
      console.log('onClickIndex')