- GitHub: [BonnierNews/dn-design-system/../web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
- Storybook: [BuddyMenu](https://designsystem.dn.se/?path=/docs/page-buddymenu--docs)
- Storybook (Latest): [BuddyMenu](https://designsystem-latest.dn.se/?path=/docs/page-buddymenu--docs)

----

# BuddyMenu

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|userName | String | no | | none | Should be populated with product specific js|
|links | HTML String | no | | | Should be list item components|
|accountLevel | String | no | | none | Should be populated with product specific js|
|myAccountUrl | String | yes | | | Url for "Mitt konto" button |
|addons | Array > Object | no | | | Ex. [{ title: 'Annonsfri', href: "https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt" }] |
|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu.njk' import BuddyMenu %}

{% macro BuddyMenuSample() %}
  {{ ListItem({
    title: 'Följer (ämnen och skribenter)',
    leadingIcon: 'favorite',
    border: true,
    listItemType: "standard",
    forcePx: true,
    href: "https://www.dn.se/foljer/"
  })}}
  {{ ListItem({
    title: 'Logga ut',
    leadingIcon: 'logout',
    border: false,
    listItemType: "standard",
    forcePx: true,
    href: params.urls.logOut | default('#'),
    classNames: "js-buddy-menu__logout"
  })}}
{% endmacro %}

{{ BuddyMenu({
  userName: "",
  accountLevel: "",
  myAccountUrl: "https://id.dn.se/konto/",
  links: BuddyMenuSample(),
  addons: [{ title: 'Annonsfri', href: "https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt" }],
  forcePx: true
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu" as *;

// these css variables can be overwritten to adjust
// top/right position:
--ds-buddy-menu-bottom-margin: 100px;
--ds-buddy-menu-position-top: 0;
// bottom-margin i.e. total max-height; calc(100vh - var(--ds-buddy-menu-bottom-margin))
--ds-buddy-menu-position-right: 0;
```