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';