Version 1.0.0 - Finalisation de Account et de GuildHeader

src/components/Layout/Account.vue

@@ -0,0 +1,50 @@
+<template>
+    <Box box-class="box" padding="closed">
+            <User :user="userStore.userInfo" />
+            <div class="user-action">
+                <IconAction title="Paramètres" icon="fa-solid fa-gear" @click="userSettings.open()"/>
+                <IconAction title="Déconnexion" color="red" icon="fa-solid fa-right-from-bracket" @click="signOut(router)"/>
+            </div>
+        <UserSettings ref="userSettings"/>
+    </Box>
+
+    
+</template>
+<script setup>
+import Box from '../UI/Box.vue';
+import IconAction from '../UI/IconAction.vue';
+import User from '../UI/User.vue';
+import { signOut } from '@/utils/UserRequest';
+import { useRouter } from 'vue-router';
+import { socket } from '@/socket.js';
+
+if(!socket.connected) {
+    socket.connect();
+}
+
+import { useUserStore } from '@/stores/userStore';
+import Modal from '../UI/Modal.vue';
+import UserSettings from '../Widget/User/UserSettings.vue';
+import { ref, onMounted } from 'vue';
+const userStore = useUserStore();
+const router = useRouter();
+
+const userSettings = ref(null);
+
+
+</script>
+<style scoped>
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+    gap: 30px;
+}
+.user-action {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+</style>