Home Explore Help
Sign In
bachir
/
gdp_vuewp
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix header menu submenu #827

Bachir Soussi Chiadmi 3 years ago
parent
91875258de
commit
79943af82e
4 changed files with 17 additions and 5 deletions
Split View Show Diff Stats
  1. 7 2
      assets/css/app.scss
  2. 1 1
      index.html
  3. 1 1
      src/components/Layouts/MainContentLayout.vue
  4. 8 1
      src/components/nav/HeaderMenu.vue

+ 7 - 2
assets/css/app.scss
View File 

@@ -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;

+ 1 - 1
index.html
View File 

@@ -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>

+ 1 - 1
src/components/Layouts/MainContentLayout.vue
View File 

@@ -12,8 +12,8 @@
 
       @scroll.passive="onScrollCenter"
 
     >
 
       <div
 
-        class="wrapper"
 
         ref="scrollablecenter"
 
+        class="wrapper"
 
       >
 
         <slot />
 
       </div>

+ 8 - 1
src/components/nav/HeaderMenu.vue
View File 

@@ -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')