Version:

Install ​

shell
npm i @vaadin/app-layout
npm i @mate/app-layout-addons

app-layout ​

javascript
import '@vaadin/app-layout';
import '@mate/app-layout-addons';

Variants ​

Complete ​

html
<vaadin-app-layout style="width: 100vw; height: 100vh;">
    <mate-app-layout-addon></mate-app-layout-addon>
    <h1 slot="navbar">My App</h1>
    <vaadin-tabs slot="application-bar">
        <vaadin-tab><span theme="icon">home</span></vaadin-tab>
        <vaadin-tab><span theme="icon">receipt_long</span></vaadin-tab>
        <vaadin-tab><span theme="icon">bar_chart</span></vaadin-tab>
        <vaadin-tab><span theme="icon">account_box</span></vaadin-tab>
        <vaadin-tab><span theme="icon">book</span></vaadin-tab>
    </vaadin-tabs>
    <vaadin-side-nav slot="drawer">
        <vaadin-side-nav-item>
            <span>Menü Punkt 1</span>
            <MateSideNavItem path="1/1" slot="children">Menü Punkt 1.1</MateSideNavItem>
            <MateSideNavItem path="1/2" slot="children">Menü Punkt 1.2</MateSideNavItem>
        </vaadin-side-nav-item>
        <vaadin-side-nav-item>
            <span #default>Menü Punkt 2</span>
            <MateSideNavItem path="2/1" slot="children">Menü Punkt 2.1</MateSideNavItem>
            <MateSideNavItem path="2/2" slot="children">Menü Punkt 2.2</MateSideNavItem>
        </vaadin-side-nav-item>
    </vaadin-side-nav>
    <div>Page content</div>
</vaadin-app-layout>