feat: aktualisiere Stile und verbessere das Layout der Kontomenü-Komponente

frontend/src/assets/styles.scss

@@ -45,10 +45,10 @@
   --space-10: 40px;
   --space-12: 48px;
 
-  --radius-sm: 5px;
+  --radius-sm: 3px;
-  --radius-md: 8px;
+  --radius-md: 5px;
-  --radius-lg: 12px;
+  --radius-lg: 8px;
-  --radius-pill: 999px;
+  --radius-pill: 8px;
 
   --shadow-soft: 0 12px 30px rgba(47, 29, 14, 0.08);
   --shadow-medium: 0 20px 50px rgba(47, 29, 14, 0.12);

frontend/src/components/AppContent.vue

@@ -5,7 +5,10 @@
         <AppSectionBar />
         <div
           class="app-content__route-root"
-          :class="{ 'app-content__route--fill': Boolean($route.meta?.contentFill) }"
+          :class="{
+            'app-content__route--fill': Boolean($route.meta?.contentFill),
+            'app-content__route--panel': !Boolean($route.meta?.contentFill)
+          }"
         >
           <router-view />
         </div>
@@ -32,10 +35,11 @@
   min-height: 0;
   padding: 0;
   overflow: hidden;
+  background: #ffffff;
 }
 
 .app-content__scroll {
-  background: transparent;
+  background: #ffffff;
   height: 100%;
   min-height: 0;
 }
@@ -46,16 +50,26 @@
      height:100% + flex:1 auf dem letzten Kind hätte die Seite auf die Viewport-Höhe geklemmt (kein äußerer Scroll). */
   min-height: 100%;
   margin: 0 auto;
-  padding: 14px 18px 12px;
+  padding: 20px 18px 16px;
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 8px;
 }
 
 .app-content__route-root {
   min-width: 0;
 }
 
+.app-content__route--panel {
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(93, 64, 55, 0.08);
+  background: #ffffff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    0 10px 22px rgba(93, 64, 55, 0.05);
+}
+
 /* Volle Resthöhe nur wenn eine View meta.contentFill setzt (z. B. feste Split-Layouts) */
 .app-content__inner > .app-content__route-root.app-content__route--fill {
   flex: 1 1 0%;
@@ -64,7 +78,12 @@
 
 @media (max-width: 960px) {
   .app-content__inner {
-    padding: 12px 12px 10px;
+    padding: 14px 12px 10px;
+    gap: 6px;
+  }
+
+  .app-content__route--panel {
+    padding: 10px;
   }
 }
 </style>

frontend/src/components/AppNavigation.vue

@@ -180,12 +180,23 @@
 
     <div class="right-block">
       <button type="button" @click="accessMailbox" class="mailbox" aria-label="Mailbox"></button>
-      <span class="logoutblock">
+      <div ref="accountMenu" class="account-menu">
-        <span class="username">{{ user.username }}</span>
+        <button
-        <span class="menuitem" @click="logout">
+          type="button"
-          {{ $t('navigation.logout') }}
+          class="account-menu__trigger"
-        </span>
+          :aria-expanded="String(accountMenuOpen)"
-      </span>
+          aria-haspopup="menu"
+          @click.stop="toggleAccountMenu"
+        >
+          <span class="account-menu__label">{{ user.username }}</span>
+          <span class="account-menu__caret">&#x25BE;</span>
+        </button>
+        <div v-if="accountMenuOpen" class="account-menu__content" role="menu">
+          <button type="button" class="account-menu__item" role="menuitem" @click="performLogout">
+            {{ $t('navigation.logout') }}
+          </button>
+        </div>
+      </div>
     </div>
   </nav>
 </template>
@@ -216,7 +227,8 @@ export default {
       _adultVerificationChangedHandler: null,
       _moderationReportChangedHandler: null,
       _userAccessChangedHandler: null,
-      moderationOpenCount: 0
+      moderationOpenCount: 0,
+      accountMenuOpen: false
     };
   },
   computed: {
@@ -234,6 +246,7 @@ export default {
     },
     $route() {
       this.collapseMenus();
+      this.closeAccountMenu();
     },
     socket(newSocket) {
       this.unregisterSocketListeners();
@@ -365,6 +378,7 @@ export default {
       this.expandedSubKey = null;
       this.pinnedMainKey = null;
       this.pinnedSubKey = null;
+      this.accountMenuOpen = false;
       this.suppressHover = true;
       if (this.hoverReleaseTimer) {
         clearTimeout(this.hoverReleaseTimer);
@@ -384,7 +398,15 @@ export default {
 
     handleDocumentClick(event) {
       const root = this.$refs.navRoot;
-      if (!root || root.contains(event.target)) {
+      if (!root) {
+        return;
+      }
+
+      if (root.contains(event.target)) {
+        const accountMenu = this.$refs.accountMenu;
+        if (this.accountMenuOpen && accountMenu && !accountMenu.contains(event.target)) {
+          this.closeAccountMenu();
+        }
         return;
       }
       this.collapseMenus({ blurActiveElement: false });
@@ -393,9 +415,28 @@ export default {
     handleDocumentKeydown(event) {
       if (event.key === 'Escape') {
         this.collapseMenus();
+        this.closeAccountMenu();
       }
     },
 
+    toggleAccountMenu() {
+      if (this.accountMenuOpen) {
+        this.closeAccountMenu();
+        return;
+      }
+      this.collapseMenus({ blurActiveElement: false });
+      this.accountMenuOpen = true;
+    },
+
+    closeAccountMenu() {
+      this.accountMenuOpen = false;
+    },
+
+    async performLogout() {
+      this.closeAccountMenu();
+      await this.logout();
+    },
+
     hasChildren(item) {
       if (!item?.children) {
         return false;
@@ -650,10 +691,12 @@ export default {
   flex-wrap: wrap;
   border-radius: 0;
   background:
-    linear-gradient(180deg, rgba(249, 236, 225, 0.98) 0%, rgba(246, 228, 212, 0.98) 100%);
+    linear-gradient(180deg, rgba(244, 230, 213, 0.98) 0%, rgba(236, 216, 194, 0.99) 100%);
-  border-top: 1px solid rgba(93, 64, 55, 0.08);
+  border-top: 1px solid rgba(93, 64, 55, 0.06);
-  border-bottom: 1px solid rgba(93, 64, 55, 0.12);
+  border-bottom: 1px solid rgba(93, 64, 55, 0.18);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.5),
+    0 8px 18px rgba(71, 52, 35, 0.1);
   color: var(--color-text-primary);
   z-index: 999;
 }
@@ -688,7 +731,7 @@ ul {
   padding: 0 12px;
   line-height: 1;
   cursor: pointer;
-  border-radius: 999px;
+  border-radius: var(--radius-md);
   border: 1px solid transparent;
   transition: background-color 0.25s, color 0.25s, transform 0.2s, border-color 0.25s, box-shadow 0.25s;
 }
@@ -697,7 +740,8 @@ ul {
 .submenu1 > li:focus-visible,
 .submenu2 > li:focus-visible,
 .mailbox:focus-visible,
-.menuitem:focus-visible {
+.account-menu__trigger:focus-visible,
+.account-menu__item:focus-visible {
   outline: 3px solid rgba(120, 195, 138, 0.34);
   outline-offset: 2px;
 }
@@ -730,9 +774,9 @@ ul {
 }
 
 .mainmenuitem--active {
-  background: rgba(255, 255, 255, 0.72);
+  background: rgba(255, 250, 242, 0.92);
-  border-color: rgba(248, 162, 43, 0.22);
+  border-color: rgba(248, 162, 43, 0.34);
-  box-shadow: 0 6px 14px rgba(93, 64, 55, 0.05);
+  box-shadow: 0 8px 16px rgba(93, 64, 55, 0.09);
 }
 
 .mainmenuitem__label {
@@ -749,7 +793,7 @@ ul {
   display: inline-flex;
   margin-left: 6px;
   padding: 2px 6px;
-  border-radius: 999px;
+  border-radius: var(--radius-sm);
   background: rgba(164, 98, 72, 0.14);
   color: var(--color-text-secondary);
   font-size: 0.68rem;
@@ -772,20 +816,78 @@ a {
   position: relative;
   z-index: 3;
   background:
-    linear-gradient(180deg, rgba(249, 236, 225, 0.98) 0%, rgba(246, 228, 212, 0.98) 100%);
+    linear-gradient(180deg, rgba(244, 230, 213, 0.98) 0%, rgba(236, 216, 194, 0.99) 100%);
 }
 
-.logoutblock {
+.account-menu {
-  display: flex;
+  position: relative;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 2px;
 }
 
-.menuitem {
+.account-menu__trigger {
+  min-height: 32px;
+  padding: 0 8px;
+  gap: 5px;
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(93, 64, 55, 0.15);
+  background: rgba(255, 252, 247, 0.82);
+  color: var(--color-text-secondary);
+  box-shadow: none;
   cursor: pointer;
-  color: var(--color-primary);
+}
+
+.account-menu__trigger:hover {
+  transform: none;
+  border-color: rgba(248, 162, 43, 0.32);
+  background: rgba(255, 250, 242, 0.92);
+  box-shadow: none;
+}
+
+.account-menu__label {
+  max-width: 132px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-weight: 700;
+  font-size: 0.76rem;
+}
+
+.account-menu__caret {
+  font-size: 0.64rem;
+  color: rgba(95, 75, 57, 0.72);
+}
+
+.account-menu__content {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 150px;
+  padding: 6px;
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(93, 64, 55, 0.16);
+  background: rgba(255, 252, 247, 0.99);
+  box-shadow: 0 12px 24px rgba(93, 64, 55, 0.16);
+  z-index: 1200;
+}
+
+.account-menu__item {
+  width: 100%;
+  min-height: 32px;
+  justify-content: flex-start;
+  padding: 0 8px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--color-text-secondary);
+  box-shadow: none;
+  font-weight: 700;
+  font-size: 0.76rem;
+}
+
+.account-menu__item:hover {
+  transform: none;
+  background: rgba(248, 162, 43, 0.14);
+  color: var(--color-text-primary);
+  box-shadow: none;
 }
 
 .mailbox {
@@ -795,7 +897,7 @@ a {
   background-position: center;
   width: 38px;
   height: 38px;
-  border-radius: 999px;
+  border-radius: var(--radius-md);
   background-color: rgba(120, 195, 138, 0.12);
   border: 1px solid rgba(93, 64, 55, 0.1);
   box-shadow: none;
@@ -864,7 +966,7 @@ a {
   gap: 4px;
   background: #d32f2f;
   color: #fff;
-  border-radius: 999px;
+  border-radius: var(--radius-sm);
   padding: 2px 7px;
   font-weight: 800;
   font-size: 0.72rem;
@@ -974,11 +1076,6 @@ a {
   margin-right: -4px;
 }
 
-.username {
-  font-weight: 800;
-  color: var(--color-text-secondary);
-}
-
 @media (max-width: 960px) {
   .app-navigation {
     margin: 0;
@@ -1014,10 +1111,6 @@ a {
     border-top: 1px solid rgba(93, 64, 55, 0.1);
   }
 
-  .logoutblock {
-    align-items: flex-start;
-  }
-
   .mainmenuitem {
     min-height: 42px;
     width: calc(50% - 4px);
@@ -1056,6 +1149,10 @@ a {
     width: 42px;
     height: 42px;
   }
+
+  .account-menu__label {
+    max-width: 180px;
+  }
 }
 
 @media (max-width: 640px) {
@@ -1068,7 +1165,18 @@ a {
     gap: 10px;
   }
 
-  .logoutblock {
+  .account-menu {
+    width: 100%;
+  }
+
+  .account-menu__trigger {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .account-menu__content {
+    left: 0;
+    right: auto;
     width: 100%;
   }
 }