feat [front]: skip links nav <-> content

front/components/layout/NavBar.vue

@@ -24,6 +24,16 @@
       </div>
 
       <div class="navbar-menu" :class="{ 'is-active': isBurgerOpen }">
+        <div class="navbar-start">
+          <nuxt-link
+            v-for="(menuItem, index) of menuItems"
+            :key="index"
+            class="navbar-item"
+            :to="menuItem.link"
+          >
+            {{ menuItem.label }}
+          </nuxt-link>
+        </div>
         <div class="navbar-end">
           <div class="place card mr-5">
             <div class="card-content is-flex">
@@ -35,16 +45,6 @@
           </div>
           <Socials class="networks" vertical />
         </div>
-        <div class="navbar-start">
-          <nuxt-link
-            v-for="(menuItem, index) of menuItems"
-            :key="index"
-            class="navbar-item"
-            :to="menuItem.link"
-          >
-            {{ menuItem.label }}
-          </nuxt-link>
-        </div>
       </div>
     </nav>
   </div>
@@ -121,7 +121,7 @@ $navbar-item-img-max-height: 105px
 
     .navbar-menu
       display: flex
-      flex-direction: column
+      flex-direction: column-reverse
       align-items: flex-end
       justify-content: flex-end
 

front/layouts/admin.vue

@@ -1,6 +1,10 @@
 <template>
-  <AdminHeader v-if="authStore.isLogged" />
-  <div class="container"><slot /></div>
+  <a class="button is-link is-sr-only" href="#content">Accéder au contenu</a>
+  <AdminHeader v-if="authStore.isLogged" id="nav" />
+  <a class="button is-link is-sr-only" href="#nav">Accéder à la navigation</a>
+  <div class="container" id="content">
+    <slot />
+  </div>
 </template>
 
 <script setup lang="ts">

front/layouts/default.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="layout bg-gray-100">
-    <LayoutNavBar />
-    <div class="container">
+    <a class="button is-link is-sr-only" href="#content">Accéder au contenu</a>
+    <LayoutNavBar id="nav" />
+    <div id="content" class="container">
+      <a class="button is-link is-sr-only" href="#nav">
+        Accéder à la navigation
+      </a>
       <slot />
     </div>
     <LayoutFooter />