Install

npm i @vaadin/side-nav
npm i @mate/side-nav-addons

Import

import '@vaadin/side-nav';
import '@mate/side-nav-addons';

Variants

Default

 <vaadin-side-nav>
  <mate-side-nav-addon :items="sideNavItems" :filter="sideNavFilter">
    <vaadin-tooltip slot="tooltip"></vaadin-tooltip>
  </mate-side-nav-addon>
</vaadin-side-nav>

document.querySelector('mate-side-nav-addon').items = [
    { path: '/home', name: "Startseite" },
    { path: '/overview', name: "Übersicht" },
    { 
        name: "Berichte", children: [
            { path: "/reports/monthly", name: "Monatsberichte" },
            { path: "/reports/yearly", name: "Jahresberichte" },
            { path: "/block-layout", name: "BlockLayout" },
            { path: "/callout", name: "Callout" },
            { path: "/default-text", name: "Standard Texte" },
            { path: "/facets", name: "Facets" },
            { path: "/filter-panel", name: "Filter Panel" },
            { path: "/form-layout", name: "FormLayout" },
            { path: "/format", name: "Format" },
            { path: "/icon", name: "Icon" },
            { path: "/illustration", name: "Illustration" },
            { path: "/notification-bar", name: "Notification Bar" },
            { path: "/message-item", name: "Message Item" },
            { path: "/range-selector", name: "Range Selector" },
            { path: "/split-layout", name: "Split Layout" },
            { path: "/toolbar", name: "Toolbar" }
        ]
    },
    { path: '/settings', name: "Einstellungen" },
];
document.querySelector('mate-side-nav-addon').filter = 'berichte';

With Prefix and Suffix Renderer

const addon = document.querySelector('mate-side-nav-addon');

addon.items = [
    {path: '/home', name: "Startseite", key: 'home'},
    {path: '/messages', name: "Nachrichten", key: 'messages'},
];

addon.prefixRenderer = (root, component, {item}) => {
    const icon = document.createElement('mate-icon');
    icon.name = item.key === 'home' ? 'home' : 'mail';
    root.appendChild(icon);
};

addon.suffixRenderer = (root, component, {item}) => {
    if (item.key === 'messages') {
        const badge = document.createElement('span');
        badge.textContent = '5';
        badge.setAttribute('theme', 'badge contrast pill');
        root.appendChild(badge);
    }
};