feat(mainHeader): make the user menu panel always open to the left

See: BEDS-221
gobitfly · Aug 12, 2024 · 662dc70 · 662dc70
1 parent 62d89b2
commit 662dc70
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -2,7 +2,8 @@
   "conventionalCommits.scopes": [
     "i18n",
     "vscode",
-    "eslint"
+    "eslint",
+    "mainHeader"
   ],
   "editor.rulers": [
     80,

diff --git a/frontend/components/bc/header/MainHeader.vue b/frontend/components/bc/header/MainHeader.vue
@@ -173,15 +173,13 @@ const userMenu = computed(() => {
             />
           </BcLink>
         </div>
-        <div
-          v-else-if="!isSmallScreen"
-          class="user-menu"
-        >
+        <div v-else-if="!isSmallScreen" class="user-menu">
           <BcDropdown
             :options="userMenu"
             variant="header"
             option-label="label"
             class="menu-component"
+            panel-class="user-menu-panel"
           >
             <template #value>
               <FontAwesomeIcon
@@ -378,6 +376,14 @@ $smallHeaderThreshold: 1024px;
           }
         }
       }
+      :global(.user-menu-panel) {
+        // hack: panel should always get opened to the left, but this is not possible with component props
+        $widthThePanelHasEnoughSpaceToOpenToTheRight: 1558px;
+        $widthOfUserMenu: 43px;
+        @media screen and (min-width: $widthThePanelHasEnoughSpaceToOpenToTheRight) {
+          translate: calc(-100% + $widthOfUserMenu);
+        }
+      }
       .burger {
         height: 24px;
         cursor: pointer;