move mobile style to layout component

SchwarzIT · Jul 10, 2024 · ba2dcad · ba2dcad
1 parent be15844
commit ba2dcad
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 30 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue
@@ -2,7 +2,6 @@
 import { computed, inject } from "vue";
 import OnyxAvatar from "../../../OnyxAvatar/OnyxAvatar.vue";
 import { MOBILE_NAV_BAR_INJECTION_KEY } from "../../types";
-import OnyxListItem from "./../../../OnyxListItem/OnyxListItem.vue";
 import type { OnyxUserMenuProps } from "./types";
 import UserMenuLayout from "./UserMenuLayout.vue";
 
@@ -67,12 +66,7 @@ const isMobile = inject(
     </template>
 
     <template v-if="slots.footer" #footer>
-      <OnyxListItem v-if="isMobile" class="onyx-user-menu__mobile-footer" disabled>
-        <slot name="footer"></slot>
-      </OnyxListItem>
-      <div v-else class="onyx-user-menu__footer onyx-text--small">
-        <slot name="footer"></slot>
-      </div>
+      <slot name="footer"></slot>
     </template>
   </UserMenuLayout>
 </template>
@@ -145,27 +139,6 @@ const isMobile = inject(
       font-weight: 600;
     }
 
-    &__footer,
-    &__mobile-footer {
-      color: var(--onyx-color-text-icons-neutral-soft);
-
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--onyx-spacing-2xs);
-    }
-    &__footer {
-      border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
-      padding: var(--onyx-spacing-4xs) var(--onyx-spacing-md);
-    }
-    &__mobile-footer {
-      margin-top: var(--onyx-spacing-xs);
-      border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
-      border-radius: var(--onyx-radius-sm);
-      font-size: 0.8125rem;
-      line-height: 1.25rem;
-    }
-
     &--mobile {
       width: 100%;
       position: static;

diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue
@@ -3,6 +3,7 @@
 // to easily switch between mobile and desktop layout
 import { injectI18n } from "../../../../i18n";
 import type { SelectOptionValue } from "../../../../types";
+import OnyxListItem from "../../../OnyxListItem/OnyxListItem.vue";
 import OnyxFlyoutMenu from "../OnyxFlyoutMenu/OnyxFlyoutMenu.vue";
 
 const props = defineProps<{ isMobile: boolean }>();
@@ -22,7 +23,9 @@ const { t } = injectI18n();
     <template v-if="props.isMobile">
       <slot name="header"></slot>
       <slot name="options"></slot>
-      <slot name="footer"></slot>
+      <OnyxListItem class="onyx-user-menu__mobile-footer" disabled>
+        <slot name="footer"> </slot>
+      </OnyxListItem>
     </template>
 
     <template v-else>
@@ -38,9 +41,40 @@ const { t } = injectI18n();
         </template>
 
         <template v-if="!!slots.footer" #footer>
-          <slot name="footer"></slot>
+          <div class="onyx-user-menu__footer onyx-text--small">
+            <slot name="footer"></slot>
+          </div>
         </template>
       </OnyxFlyoutMenu>
     </template>
   </div>
 </template>
+
+<style lang="scss">
+@use "../../../../styles/mixins/layers.scss";
+
+.onyx-user-menu {
+  @include layers.component() {
+    &__footer,
+    &__mobile-footer {
+      color: var(--onyx-color-text-icons-neutral-soft);
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--onyx-spacing-2xs);
+    }
+    &__footer {
+      border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
+      padding: var(--onyx-spacing-4xs) var(--onyx-spacing-md);
+    }
+    &__mobile-footer {
+      margin-top: var(--onyx-spacing-xs);
+      border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
+      border-radius: var(--onyx-radius-sm);
+      font-size: 0.8125rem;
+      line-height: 1.25rem;
+    }
+  }
+}
+</style>