use prop for headline, not slot

SchwarzIT · Jul 10, 2024 · 290ff77 · 290ff77
1 parent 5384613
commit 290ff77
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue b/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue
@@ -15,15 +15,11 @@ const emit = defineEmits<{
   "update:open": [isOpen: boolean];
 }>();
 
-const slots = defineSlots<{
+defineSlots<{
   /**
    * Slot for the menu content when it's open.
    */
   default(): unknown;
-  /**
-   * Slot for a headline of the menu content when it's open
-   */
-  headline?(): unknown;
 }>();
 </script>
 
@@ -43,10 +39,10 @@ const slots = defineSlots<{
       <div class="onyx-mobile-nav-button__flyout">
         <div
           class="onyx-mobile-nav-button__menu"
-          :class="{ 'onyx-mobile-nav-button__menu--no-headline': !slots.headline }"
+          :class="{ 'onyx-mobile-nav-button__menu--no-headline': !props.headline }"
         >
-          <OnyxHeadline is="h2" v-if="slots.headline" class="onyx-mobile-nav-button__headline">
-            <slot name="headline"></slot>
+          <OnyxHeadline is="h2" v-if="props.headline" class="onyx-mobile-nav-button__headline">
+            {{ props.headline }}
           </OnyxHeadline>
 
           <slot></slot>

diff --git a/packages/sit-onyx/src/components/OnyxMobileNavButton/types.ts b/packages/sit-onyx/src/components/OnyxMobileNavButton/types.ts
@@ -12,4 +12,8 @@ export type OnyxMobileNavButtonProps = {
    * If `true`, an "x" icon will be displayed.
    */
   open?: boolean;
+  /**
+   * Headline of the mobile flyout
+   */
+  headline?: string;
 };
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
@@ -132,12 +132,9 @@ defineExpose({
           class="onyx-nav-bar__burger"
           :icon="menu"
           :label="t('navigation.toggleBurgerMenu')"
+          :headline="t('navigation.navigationHeadline')"
           @update:open="isContextOpen = false"
         >
-          <template #headline>
-            {{ t("navigation.navigationHeadline") }}
-          </template>
-
           <nav class="onyx-nav-bar__nav--mobile">
             <ul role="menubar">
               <slot></slot>