Scale header with drop down menu(Flyout Menu)

[jadhavss]

Hi Team,

I am trying to use "Brand Header User Menu" functionality which is inside Flyout Menu option from the scale library. I am referring, https://www.brand-design.telekom.com/scale/?path=/docs/components-flyout-menu--brand-header-user-menu

When I use slot="menu-icon", it is not placing that icon inside scale header.

If I use slot="default" then it shows icon with flyout menu but position of icon appears below the header.

I want to have this user icon inside scale header with right aligned position.

We are using "@telekom/scale-components": "^3.0.0-beta.27"

I am using below code,

<scale-app-shell claim-lang="en" id="scaleAppshell" :mainNavigation="mainNavigation"> <scale-app-header ref="header" id="header" slot="header" :activeRouteId="routeName" :mega-menu-visible="true" :mobile-menu-visible="true" > <div slot="menu-icon"> <scale-menu-flyout @scaleClose="$refs.userIcon.isActive = false" > <div slot="trigger" > <scale-nav-icon icon="user-file-user" ref="userIcon" @click="$refs.userIcon.isActive = true"> Alexander </scale-nav-icon> </div> <scale-menu-flyout-list> <scale-menu-flyout-item disabled styles=".menu-flyout-item--disabled { color: var(--scl-color-text-standard) !important; } .menu-flyout-item { cursor: auto !important; }">Alexander Dreyer</scale-menu-flyout-item> <scale-menu-flyout-item disabled styles=".menu-flyout-item--disabled { color: var(--scl-color-grey-50) !important; }.menu-item { cursor: auto !important; }">[email protected]</scale-menu-flyout-item> <scale-menu-flyout-divider></scale-menu-flyout-divider> <scale-menu-flyout-item>Kundencenter</scale-menu-flyout-item> <scale-menu-flyout-item>Login-Einstellungen</scale-menu-flyout-item> <scale-menu-flyout-item>Miscellaneous</scale-menu-flyout-item> <scale-menu-flyout-divider></scale-menu-flyout-divider> <scale-menu-flyout-item>Logout<scale-icon-action-logout slot="suffix"></scale-icon-action-logout></scale-menu-flyout-item> </scale-menu-flyout-list> </scale-menu-flyout> </div> </scale-app-header> <v-app> <router-view class="view" v-on:is-authenticated="updateIsAuthenticated" ref="childCompLanding"></router-view> </v-app> </scale-app-shell>

Can someone please correct me whether I am missing any code. Is the above scale version that I mentioned supports "menu-icon" slot?

Thanks

[nowseemee]

Hi @jadhavss, thanks for posting your question. We have added a new attribute to the Brand Header recently, it's called user-menu and this makes it easier to achieve what you are trying to do. Here is an example configuration for that:

export const userNavigation = [
  {
    type: 'userInfo',
    shortName: 'Alexander',
    name: 'Alexander Dreyer',
    email: '[email protected]',
    badge: true,
    badgeLabel: 1,
  },
  {
    type: 'divider',
  },
  {
    type: 'item',
    name: 'Customer Care',
    id: 'customer-care',
    href: 'https://www.telekom.de/kundencenter/startseite',
    onClick: () => {},
    icon: 't-product-measure-internet-speed',
    iconPosition: 'prefix',
  },
  {
    type: 'item',
    name: 'Login Settings',
    id: 'login-settings',
    href: 'https://account.idm.telekom.com/account-manager/index.xhtml',
    onClick: () => {},
    icon: 'service-settings',
    iconPosition: 'prefix',
  },
  {
    type: 'divider',
  },
  {
    type: 'item',
    name: 'Optional Link',
    id: 'optional-link',
    href: '#optional-link',
    onClick: () => {},
  },
  {
    type: 'divider',
  },
  {
    type: 'button',
    name: 'Logout',
    id: 'logout',
    onClick: () => {
      console.log('button click');
    },
    href: 'https://accounts.login.idm.telekom.com/sessionmessage/logout',
    variant: 'secondary',
  },
];

You can find the complete example here: https://www.brand-design.telekom.com/scale/story/beta-components-notification-badge--brand-header-user-menu-icon-navigation&globals=locale:en

Let me know if this helps. Have a great day.