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-header ref="header" id="header" slot="header"
:activeRouteId="routeName" :mega-menu-visible="true" :mobile-menu-visible="true"

Alexander

Alexander Dreyer alexander.dreyer@t-online.de Kundencenter Login-Einstellungen Miscellaneous Logout

`

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: 'alexander.dreyer@t-online.de',
    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.