From 19baf16fed817067b024d204d6b07b149e80f019 Mon Sep 17 00:00:00 2001
From: EryneKL <97091460+EryneKL@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:25:51 +0100
Subject: [PATCH 1/2] FEAT ITEM-380-front-epingler-menu-lateral :      - ajout
 d'un switch pour fixer la navbar dans Navbar.vue      - modification de
 App.vue pour pouvoir fixer la navbar

---
 src/App.vue                         | 68 +++++++++++++++--------------
 src/components/Structure/Navbar.vue | 39 +++++++++++++++--
 src/plugins/vuetify.js              |  3 ++
 3 files changed, 74 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e6bb3f8..cddfacd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,37 +1,39 @@
 <template>
-  <v-app class="h-100 overflow-hidden">
-    <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
-    <Navbar :drawer="drawer" @close="drawer = false"/>
-    <v-main class="d-flex flex-column overflow-auto">
-      <div class="error-stack">
-        <v-alert
-          v-for="(error, index) in errorStack"
-          :key="index"
-          color="error"
-          icon="$error"
-          :title="error.message"
-          variant="flat"
-          border="start"
-          class="mb-2 custom-alert"
-          closable
-          @click:close="closeAlert(index)"
-        >
-          {{ error.description }}
-        </v-alert>
-      </div>
-      <div style="flex-grow: 10;">
-        <router-view v-slot="{ Component }">
-          <component
-            :is="Component"
-            @backendError="addError"
-            @backendSuccess="clearErrors"
-          />
-        </router-view>
-      </div>
-      <InfoAppBanner v-if="!authenticated" />
-      <Footer style="flex-basis: 0;" />
-    </v-main>
-  </v-app>
+    <v-app class="h-100 overflow-hidden">
+      <nav>
+        <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
+        <Navbar :drawer="drawer" @close="drawer = false" />
+      </nav>
+        <v-main class="d-flex flex-column overflow-auto">
+          <div class="error-stack">
+            <v-alert
+              v-for="(error, index) in errorStack"
+              :key="index"
+              color="error"
+              icon="$error"
+              :title="error.message"
+              variant="flat"
+              border="start"
+              class="mb-2 custom-alert"
+              closable
+              @click:close="closeAlert(index)"
+            >
+              {{ error.description }}
+            </v-alert>
+          </div>
+          <div style="flex-grow: 10;">
+            <router-view v-slot="{ Component }">
+              <component
+                :is="Component"
+                @backendError="addError"
+                @backendSuccess="clearErrors"
+              />
+            </router-view>
+          </div>
+          <InfoAppBanner v-if="!authenticated" />
+          <Footer style="flex-basis: 0;" />
+        </v-main>
+    </v-app>
 </template>
 
 <script setup>
diff --git a/src/components/Structure/Navbar.vue b/src/components/Structure/Navbar.vue
index c2a2ce3..cf5639a 100644
--- a/src/components/Structure/Navbar.vue
+++ b/src/components/Structure/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-navigation-drawer v-if="authStore.isAuthenticated && drawer" width="18em" temporary>
+  <v-navigation-drawer v-if="authStore.isAuthenticated" v-model="drawerInside">
     <v-list-item three-line>
       <v-list-item>
         <v-list-item-title class="text-h6 text-wrap">
@@ -128,11 +128,32 @@
 
     </v-list>
 
+    <v-divider></v-divider>
+
+    <v-list>
+      <v-list-item class="ma-0 pa-0">
+        <v-row class="pl-2">
+          <v-col class="d-flex flex-row ml-1 pl-0 pr-0" cols="3">
+            <v-switch
+              class="ml-3 mr-0 v-input--expand"
+              v-model="fixNavBarModel"
+              hide-details
+              color="primary"
+            >
+            </v-switch>
+          </v-col>
+          <v-col class="d-flex flex-column justify-center pl-1">
+            <span class="labelSwitchNavBar">Encrer le menu de navigation</span>
+          </v-col>
+        </v-row>
+      </v-list-item>
+    </v-list>
+
   </v-navigation-drawer>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import {computed, ref} from 'vue'
 import { useRouter } from 'vue-router'
 import { useTheme } from 'vuetify'
 import { useAuthStore } from '@/store/authStore'
@@ -144,6 +165,12 @@ const props = defineProps({
   },
 })
 
+const fixNavBarModel = ref(false)
+
+const drawerInside = computed(() => {
+  return props.drawer;
+})
+
 const router = useRouter()
 const theme = useTheme()
 const authStore = useAuthStore()
@@ -152,7 +179,7 @@ const emit = defineEmits(['close'])
 
 function navigateTo(routeName) {
   router.push({ name: routeName }).catch(err => {})
-  emit('close')
+  fixNavBarModel.value ? '' : emit('close')
 }
 
 function toggleTheme() {
@@ -192,4 +219,10 @@ de l'ILN ${user.iln}`
 p {
   white-space: pre-line;
 }
+
+.labelSwitchNavBar {
+  font-size: 0.8em;
+  font-weight: 500;
+  text-decoration-color: black;
+}
 </style>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index b6aea2d..5d0ef04 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -146,5 +146,8 @@ export default createVuetify({
       itemDarkTheme,
       itemRngTheme
     },
+  },
+  icons: {
+    defaultSet: 'mdi',
   }
 })

From 145610603aa4b097e990fb499b13e91fa81f825a Mon Sep 17 00:00:00 2001
From: Eryne Kachetel-Langue <eryne.kachetellangue@hotmail.com>
Date: Wed, 20 Nov 2024 11:41:50 +0100
Subject: [PATCH 2/2] FEAT ITEM-380-front-epingler-menu-lateral :      -
 correction d'indentation dans App.vue

---
 src/App.vue | 58 ++++++++++++++++++++++++++---------------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cddfacd..7f4da05 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,35 +4,35 @@
         <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
         <Navbar :drawer="drawer" @close="drawer = false" />
       </nav>
-        <v-main class="d-flex flex-column overflow-auto">
-          <div class="error-stack">
-            <v-alert
-              v-for="(error, index) in errorStack"
-              :key="index"
-              color="error"
-              icon="$error"
-              :title="error.message"
-              variant="flat"
-              border="start"
-              class="mb-2 custom-alert"
-              closable
-              @click:close="closeAlert(index)"
-            >
-              {{ error.description }}
-            </v-alert>
-          </div>
-          <div style="flex-grow: 10;">
-            <router-view v-slot="{ Component }">
-              <component
-                :is="Component"
-                @backendError="addError"
-                @backendSuccess="clearErrors"
-              />
-            </router-view>
-          </div>
-          <InfoAppBanner v-if="!authenticated" />
-          <Footer style="flex-basis: 0;" />
-        </v-main>
+      <v-main class="d-flex flex-column overflow-auto">
+        <div class="error-stack">
+          <v-alert
+            v-for="(error, index) in errorStack"
+            :key="index"
+            color="error"
+            icon="$error"
+            :title="error.message"
+            variant="flat"
+            border="start"
+            class="mb-2 custom-alert"
+            closable
+            @click:close="closeAlert(index)"
+          >
+            {{ error.description }}
+          </v-alert>
+        </div>
+        <div style="flex-grow: 10;">
+          <router-view v-slot="{ Component }">
+            <component
+              :is="Component"
+              @backendError="addError"
+              @backendSuccess="clearErrors"
+            />
+          </router-view>
+        </div>
+        <InfoAppBanner v-if="!authenticated" />
+        <Footer style="flex-basis: 0;" />
+      </v-main>
     </v-app>
 </template>