add mobile nav

src/components/HeaderView.vue

 <template>
   <q-header reveal elevated>
     <q-toolbar class="bg-secondary" >
+      <q-drawer
+        v-model="openNav"
+        show-if-above
+        :breakpoint="1024"
+      side="left"
+      bordered
+      class="bg-secondary"
+      >
+        <div class="full-height row justify-evenly q-ml-sm col-11">
+          <HeaderButton class="col-6 row justify-center" icon="home" to="/#accueil" label="Accueil" />
+          <HeaderButton class="col-6 row justify-center" icon="person" to="/#presentation" label="Présentation" />
+          <HeaderButton class="col-6 row justify-center" icon="school" to="/#formations" label="Formations" />
+          <HeaderButton class="col-6 row justify-center" icon="timeline" to="/#experiences" label="Expériences" />
+          <HeaderButton class="col-6 row justify-center" icon="workspaces" to="/#competences" label="Compétences" />
+          <HeaderButton class="col-6 row justify-center" icon="construction" to="/#projets" label="Projets" />
+          <HeaderButton class="col-6 row justify-center" icon="mail" to="/#contacts" label="Contacts" />
+        </div>
+        <q-linear-progress size="6px" color="accent" indeterminate class="bg-dark vertical-progress absolute" style="top:50%; left: -25px ; width: 100vh" />
+      </q-drawer>
+      <q-btn flat round dense icon="menu" class="q-mr-sm" @click="openNav = !openNav" v-if="$q.screen.sm || $q.screen.lt.sm" />
       <div/>
       <q-space />
-      <div class="full-height row">
+      <div class="full-height row" v-if="$q.screen.gt.sm">
         <HeaderButton icon="home" to="/#accueil" label="Accueil" />
         <HeaderButton icon="person" to="/#presentation" label="Présentation" />
         <HeaderButton icon="school" to="/#formations" label="Formations" />
@@ -14,6 +34,9 @@
       </div>
       <q-space />
       <div/>
+      <div class="q-mr-sm text-bold text-uppercase" v-if="$q.screen.sm || $q.screen.lt.sm" >
+        PORTFOLIO 2025 édition
+      </div>
     </q-toolbar>
     <q-linear-progress size="6px" color="accent" class="bg-dark" :value="pageAdvanced" />
   </q-header>
@@ -24,6 +47,7 @@ import HeaderButton from 'components/HeaderButton.vue'
 import { onMounted, ref } from 'vue'
 
 const pageAdvanced = ref(0)
+const openNav = ref(false)
 
 onMounted( () =>{
   window.addEventListener('scroll', updatePageAdvanced)
@@ -37,5 +61,9 @@ const updatePageAdvanced = () => {
 </script>
 
 <style scoped>
-
+.vertical-progress {
+  transform: rotate(
+    90deg
+  )
+}
 </style>