@postnord/web-components
Version:
PostNord Web Components
37 lines (36 loc) • 1.76 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createComponent } from "../../../globals/documentation/story";
const items = [
{ name: 'One', href: '/one/', value: 'one', icon: 'home' },
{ name: 'Two', href: '/two/', value: 'two', icon: 'box_pin' },
{ name: 'Three', href: '/three/', value: 'three', icon: 'bolt' },
{ name: 'Four', href: '/four/', value: 'four' },
{ name: 'Five', href: '/five/', value: 'five' },
];
export function createPnPageMenu(args, { isMenu = false, isItem = false, isDropdown = false }) {
const menu = createComponent('pn-page-nav', isMenu ? args : { dropdown: isDropdown ? 'More' : '' });
menu.setAttribute('value', args.value || items[isDropdown ? 3 : 0].value);
items.forEach(({ name, value, icon, href }, index) => {
const isDropdownLoop = index >= 3;
if (isDropdownLoop && isItem)
return;
const isCustomItem = (isItem && index === 0) || (isDropdown && index === 3);
const tagName = isDropdownLoop ? 'pn-page-nav-dropdown-item' : 'pn-page-nav-item';
const pageItem = createComponent(tagName, isCustomItem ? args : { value, href, icon });
// If its a dropdown, set the slot name.
if (isDropdownLoop)
pageItem.setAttribute('slot', 'dropdown-item');
// If we are in the `item` story and no icon is used, remove the attribute.
if (isItem && !args.icon)
pageItem.removeAttribute('icon');
pageItem.addEventListener('click', e => e.preventDefault());
pageItem.innerText += name;
menu.appendChild(pageItem);
});
document.querySelector('style').innerHTML += 'pn-page-nav[dropdown] { margin-bottom: 8em }';
return menu;
}
//# sourceMappingURL=renderMenu.js.map