From 2d2179ed538c2ee7318e02d406b689af31b2b8e8 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Fri, 30 Dec 2022 21:36:59 +0100
Subject: [PATCH] feat [front]: skip links nav <-> content

---
 front/components/layout/NavBar.vue | 22 +++++++++++-----------
 front/layouts/admin.vue            |  8 ++++++--
 front/layouts/default.vue          |  8 ++++++--
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/front/components/layout/NavBar.vue b/front/components/layout/NavBar.vue
index 15f5a96..beaa691 100644
--- a/front/components/layout/NavBar.vue
+++ b/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
 
diff --git a/front/layouts/admin.vue b/front/layouts/admin.vue
index 6591e7e..bed486f 100644
--- a/front/layouts/admin.vue
+++ b/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">
diff --git a/front/layouts/default.vue b/front/layouts/default.vue
index 6a7592c..df5b33f 100644
--- a/front/layouts/default.vue
+++ b/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 />