init

frontend/src/layouts/AppLayout.vue

@@ -1,15 +1,24 @@
 <script lang="ts" setup>
 import {storeToRefs} from 'pinia'
 import {useServerStore} from '@/stores/server'
-import {ref} from 'vue'
-import {useRouter} from 'vue-router'
+import {computed, ref, watch} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
 import ContextMenu from "@/components/ContextMenu.vue";
+import UserListDrawer from '@/components/UserListDrawer.vue'
 
 const serverStore = useServerStore()
+const route = useRoute()
 const router = useRouter()
 
 const {servers} = storeToRefs(serverStore)
 
+const showUsersDrawer = ref(false)
+const isServerContext = computed(() => Boolean(route.params.serverId))
+
+watch(isServerContext, (isActive) => {
+  if (!isActive) showUsersDrawer.value = false
+})
+
 const showDialog = ref(false)
 const formData = ref({
   name: '',
@@ -72,13 +81,13 @@ const getServerColor = (str: string): string => {
   const hue = Math.abs(hash) % 360
   return `hsl(${hue}, 60%, 45%)`
 }
+
 </script>
 
 <template>
   <v-app @contextmenu.prevent>
     <!--Top bar-->
     <v-system-bar>
-
       <v-spacer></v-spacer>
 
       <v-icon>mdi-square</v-icon>
@@ -86,6 +95,15 @@ const getServerColor = (str: string): string => {
       <v-icon>mdi-circle</v-icon>
 
       <v-icon>mdi-triangle</v-icon>
+
+      <v-btn
+        v-if="isServerContext"
+        aria-label="Afficher les utilisateurs"
+        icon="mdi-account-group"
+        size="small"
+        variant="text"
+        @click="showUsersDrawer = !showUsersDrawer"
+      ></v-btn>
     </v-system-bar>
 
     <v-navigation-drawer
@@ -127,6 +145,11 @@ const getServerColor = (str: string): string => {
       ></v-btn>
 
     </v-navigation-drawer>
+
+    <UserListDrawer
+      v-model="showUsersDrawer"
+    />
+
     <router-view/>
     <!-- Menu contextuel global -->
     <ContextMenu/>
@@ -184,4 +207,4 @@ const getServerColor = (str: string): string => {
   flex-direction: column;
   gap: 1rem;
 }
-</style>
+</style>