Snapshot: alpha-2026-9

frontend/src/components/UserDropdown.vue

@@ -0,0 +1,81 @@
+<template>
+    <li class="nav-item dropdown">
+        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" @click="toggleDropdown">
+            <i class="align-middle" data-feather="settings"></i>
+            <b-icon-person class="bi-valign-middle"></b-icon-person>
+        </a>
+
+        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" @click="toggleDropdown">
+            <authenticated-image :src="profilePictureSrc" :owner="username" :alt="username" :title="username"
+                                 img-class="avatar img-fluid rounded mr-1" :width="36" :height="36" fit="cover"/>
+
+        </a>
+
+        <div class="dropdown-menu dropdown-menu-right" id="userDropdown">
+            <div class="dropdown-header">
+                <span class="text-dark">
+                {{ username }}
+            </span>
+            </div>
+            <div class="dropdown-divider"></div>
+            <router-link to="/friends" class="dropdown-item">
+                <b-icon-people class="bi-valign-middle mr-1"></b-icon-people>
+                <span class="align-middle">Friends</span>
+            </router-link>
+            <router-link to="/groups" class="dropdown-item">
+                <b-icon-people-fill class="bi-valign-middle mr-1"></b-icon-people-fill>
+                <span class="align-middle">Groups</span>
+            </router-link>
+            <!--router-link to="/profile" class="dropdown-item">
+                <b-icon-person class="bi-valign-middle mr-1"></b-icon-person>
+                Profile
+            </router-link-->
+            <router-link to="/settings" class="dropdown-item">
+                <b-icon-sliders class="bi-valign-middle mr-1"></b-icon-sliders>
+                Settings &
+                Privacy
+            </router-link>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#" @click="logout"> Log out</a>
+        </div>
+    </li>
+</template>
+
+<script>
+import * as BIcons from 'bootstrap-icons-vue';
+import {mapActions, mapMutations, mapState} from "vuex";
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+
+export default {
+    name: "UserDropdown",
+    components: {
+        AuthenticatedImage,
+        ...BIcons
+    },
+    methods: {
+        ...mapActions(['fetchUserProfile']),
+        ...mapMutations(['logout']),
+        toggleDropdown() {
+            closeAllDropdowns();
+            document.getElementById("userDropdown").classList.toggle("show");
+        }
+    },
+    computed: {
+        ...mapState(['user', 'user_profile']),
+        username() {
+            return this.user;
+        },
+        profilePictureSrc() {
+            return this.user_profile?.profile_picture?.name || null;
+        }
+    },
+    mounted() {
+        if (!this.user_profile) {
+            this.fetchUserProfile();
+        }
+    }
+}
+</script>
+
+<style scoped>
+</style>