fix(webapp): logo and top-menu optimization (#8590)

* - added case for tablet

* - optimized HeaderMenu for desktop and mobile
- fixed Logo

* - refixed Logo (missing changes)

---------

Co-authored-by: Sebastian Stein <sebastian@codepassion.de>
Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>

backend/src/config/logosBranded.ts

@@ -6,8 +6,10 @@ import logos from '@config/logos'
 
 const defaultLogos = {
   LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
+  LOGO_HEADER_TABLET_PATH: '/img/custom/logo-horizontal.svg',
   LOGO_HEADER_MOBILE_PATH: '/img/custom/logo-horizontal.svg',
   LOGO_HEADER_WIDTH: '130px',
+  LOGO_HEADER_TABLET_WIDTH: '115px',
   LOGO_HEADER_MOBILE_WIDTH: '100px',
   LOGO_HEADER_CLICK: {
     // externalLink: {

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -8,7 +8,7 @@
       <!-- header menu -->
       <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
         <!-- logo -->
-        <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
+        <ds-flex-item class="logo-wrapper" :width="{ base: 'auto' }">
           <a
             v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
             :href="LOGOS.LOGO_HEADER_CLICK.externalLink.url"
@@ -48,13 +48,7 @@
           v-if="isLoggedIn"
           id="nav-search-box"
           class="header-search"
-          :width="{
+          :width="{ base: 'auto' }"
-            base: '45%',
-            sm: '40%',
-            md: isHeaderMenu ? 'auto' : '40%',
-            lg: isHeaderMenu ? 'auto' : '50%',
-          }"
-          style="flex-shrink: 0; flex-grow: 1"
         >
           <search-field />
         </ds-flex-item>
@@ -69,7 +63,7 @@
           </client-only>
         </ds-flex-item>
         <!-- right symbols -->
-        <ds-flex-item style="flex-basis: auto">
+        <ds-flex-item style="flex: none">
           <div class="main-navigation-right" style="flex-basis: auto">
             <!-- locale switch -->
             <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
@@ -383,7 +377,6 @@ export default {
   white-space: nowrap;
 }
 .topbar-locale-switch {
-  display: flex;
   margin-right: $space-xx-small;
   align-self: center;
   display: inline-flex;
@@ -392,31 +385,55 @@ export default {
   margin-top: $space-xx-small;
 }
 .main-navigation-flex {
+  display: flex;
   align-items: center;
   flex-wrap: nowrap !important;
+  gap: 20px;
+  min-width: 0;
 }
+@media (max-width: 800px) {
+  .main-navigation-flex {
+    gap: 10px;
+  }
+}
+
+.logo-wrapper {
+  flex: 0 0 auto;
+}
+.branding-menu {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+.header-search {
+  flex: 1 1 auto !important;
+}
+.navigation-actions {
+  flex: 0 0 auto;
+}
+
 .main-navigation-right {
   display: flex;
   justify-content: flex-end;
 }
-.main-navigation-right .desktop-view {
+
-  float: right;
+// Mobile Header mit verbessertem Layout
-}
+.mobil-header-box {
-.ds-flex-item.mobile-hamburger-menu {
+  .logo-container {
-  margin-left: auto;
+    flex: 1 1 auto;
-  text-align: right;
+    min-width: 60px;
+    max-width: calc(100vw - 200px);
+  }
+
+  .mobile-hamburger-menu {
+    flex: 0 0 auto; // no shrinking
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: flex-end;
+    gap: 10px;
 
-  & > div {
+    > div {
-    display: inline-flex;
+      flex-shrink: 0; // Buttons remain their size
-
-    padding-right: 15px;
-    &:first-child {
-      padding-right: 10px;
-    }
 
       button {
         overflow: visible;
@@ -425,13 +442,11 @@ export default {
         }
       }
     }
+  }
   .hamburger-button .svg {
     height: 1.5em;
   }
 }
-.mobile-menu {
-  margin: 0 20px;
-}
 .mobile-search {
   margin-top: 20px;
 }
@@ -446,10 +461,4 @@ export default {
 .hide-mobile-menu {
   display: none;
 }
-.logo-container {
-  max-width: calc(100vw - 140px) !important;
-}
-.hamburger-button {
-  flex-shrink: 0;
-}
 </style>

webapp/components/Logo/Logo.vue

@@ -8,10 +8,18 @@
       :style="logoWidthStyle"
     />
 
+    <!-- Tablet logo (falls back to desktop if not provided) -->
+    <img
+      class="ds-logo-svg ds-logo-tablet"
+      :alt="metadata.APPLICATION_NAME + ' ' + logo.alt"
+      :src="logo.tabletPath || logo.path"
+      :style="tabletLogoWidthStyle"
+    />
+
     <!-- Mobile logo (falls back to desktop if not provided) -->
     <img
       class="ds-logo-svg ds-logo-mobile"
-      :alt="metadata.APPLICATION_NAME + ' ' + logo.alt + ' Mobile'"
+      :alt="metadata.APPLICATION_NAME + ' ' + logo.alt"
       :src="logo.mobilePath || logo.path"
       :style="mobileLogoWidthStyle"
     />
@@ -43,6 +51,13 @@ export default {
       type: String,
       default: null,
     },
+    /**
+     * Tablet logo width
+     */
+    tabletLogoWidth: {
+      type: String,
+      default: null,
+    },
     /**
      * Mobile logo width
      */
@@ -69,9 +84,11 @@ export default {
     const logosObject = {
       header: {
         path: logos.LOGO_HEADER_PATH,
+        tabletPath: logos.LOGO_HEADER_TABLET_PATH || null,
         mobilePath: logos.LOGO_HEADER_MOBILE_PATH || null,
         alt: 'Header',
         widthDefault: logos.LOGO_HEADER_WIDTH,
+        tabletWidthDefault: logos.LOGO_HEADER_TABLET_WIDTH || logos.LOGO_HEADER_WIDTH,
         mobileWidthDefault: logos.LOGO_HEADER_MOBILE_WIDTH || logos.LOGO_HEADER_WIDTH,
       },
       welcome: { path: logos.LOGO_WELCOME_PATH, alt: 'Welcome', widthDefault: '200px' },
@@ -98,6 +115,11 @@ export default {
       const width = this.logoWidth === null ? this.logo.widthDefault : this.logoWidth
       return `width: ${width};`
     },
+    tabletLogoWidthStyle() {
+      const width =
+        this.tabletLogoWidth === null ? this.logo.tabletWidthDefault : this.tabletLogoWidth
+      return `width: ${width};`
+    },
     mobileLogoWidthStyle() {
       const width =
         this.mobileLogoWidth === null ? this.logo.mobileWidthDefault : this.mobileLogoWidth
@@ -130,16 +152,32 @@ export default {
 .ds-logo-desktop {
   display: block;
 }
-
+.ds-logo-tablet {
+  display: none;
+}
 .ds-logo-mobile {
   display: none;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 810px) {
   .ds-logo-desktop {
     display: none;
   }
+  .ds-logo-tablet {
+    display: block;
+  }
+  .ds-logo-mobile {
+    display: none;
+  }
+}
 
+@media (max-width: 450px) {
+  .ds-logo-desktop {
+    display: none;
+  }
+  .ds-logo-tablet {
+    display: none;
+  }
   .ds-logo-mobile {
     display: block;
   }