Profile and Logout moved into a user menu

frontend/src/assets/main.css

@@ -153,40 +153,37 @@ a:focus {
   gap: 10px;
 }
 
-.profile-link {
-  color: var(--vt-c-white);
-  text-decoration: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  transition: background-color 0.2s;
-  white-space: nowrap;
+/* User Dropdown */
+.user-dropdown {
+  position: relative;
 }
 
-.profile-link:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.profile-link.active {
-  background-color: rgba(255, 255, 255, 0.2);
-  font-weight: 600;
-}
-
-.logout-btn {
-  background: none;
-  border: none;
-  color: var(--vt-c-white);
+.user-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
   cursor: pointer;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-size: 1rem;
+  border-radius: 50%;
   transition: background-color 0.2s;
-  white-space: nowrap;
 }
 
-.logout-btn:hover {
+.user-icon:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+.user-icon svg {
+  width: 28px;
+  height: 28px;
+  color: var(--vt-c-white);
+}
+
+.top-nav .user-menu {
+  right: 0;
+  left: auto;
+  min-width: 160px;
+}
+
 /* Main Content Area */
 .main-content {
   flex: 1;

frontend/src/components/LanguageSwitcher.vue

@@ -1,3 +1,4 @@
+<!-- not used anymore -->
 <template>
   <select v-model="selectedLanguage">
     <option value="de">Deutsch</option>

frontend/src/components/Menu.vue

@@ -41,32 +41,36 @@
     </ul>
     
     <div class="menu-right">
-      <LanguageSwitcher />
-      <router-link v-if="isLoggedIn" to="/profile" active-class="active" class="profile-link">
-        {{ $t('menu.Profile') }}
-      </router-link>
-      <button v-if="isLoggedIn" @click="logout" class="logout-btn">{{ $t('menu.Logout') }}</button>
+      <!-- User Dropdown (only when logged in) -->
+      <div v-if="isLoggedIn" class="dropdown user-dropdown" @mouseenter="openMenu('user')" @mouseleave="closeMenu('user')">
+        <span class="dropdown-trigger user-icon" title="User Menu">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+          </svg>
+        </span>
+        <ul v-show="showUserMenu" class="dropdown-menu user-menu" @mouseenter="openMenu('user')" @mouseleave="closeMenu('user')">
+          <li><router-link to="/profile" @click="closeAllMenus">{{ $t('menu.Profile') }}</router-link></li>
+          <li><a href="#" @click.prevent="logout">{{ $t('menu.Logout') }}</a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </template>
 
 <script>
 import { isLoggedIn, logout } from "../utils/auth";
-import LanguageSwitcher from "./LanguageSwitcher.vue";
 import { useUserStore } from "../stores/userStore";
 
 
 export default {
   name: "Menu",
-  components: {
-    LanguageSwitcher,
-  },
   data() {
     return {
       userStore: null,
       showInfoMenu: false,
       showCharMenu: false,
       showAdminMenu: false,
+      showUserMenu: false,
       closeTimeout: null
     }
   },
@@ -104,6 +108,7 @@ export default {
       if (menu === 'info') this.showInfoMenu = true
       if (menu === 'char') this.showCharMenu = true
       if (menu === 'admin') this.showAdminMenu = true
+      if (menu === 'user') this.showUserMenu = true
     },
     closeMenu(menu) {
       // Delay closing to allow mouse to move to submenu
@@ -111,12 +116,14 @@ export default {
         if (menu === 'info') this.showInfoMenu = false
         if (menu === 'char') this.showCharMenu = false
         if (menu === 'admin') this.showAdminMenu = false
+        if (menu === 'user') this.showUserMenu = false
       }, 200)
     },
     closeAllMenus() {
       this.showInfoMenu = false
       this.showCharMenu = false
       this.showAdminMenu = false
+      this.showUserMenu = false
     },
     logout() {
       logout();

frontend/src/stores/userStore.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import API from '../utils/api'
+import { i18n } from './languageStore'
 
 export const useUserStore = defineStore('user', {
   state: () => ({
@@ -21,6 +22,12 @@ export const useUserStore = defineStore('user', {
       try {
         const response = await API.get('/api/user/profile')
         this.currentUser = response.data
+        
+        // Set user's preferred language
+        if (response.data.preferred_language) {
+          i18n.global.locale.value = response.data.preferred_language
+          localStorage.setItem('language', response.data.preferred_language)
+        }
       } catch (error) {
         console.error('Failed to fetch user profile:', error)
         this.currentUser = null