Version:

Install ​

shell
npm i @mate-react/app-layout

Import ​

tsx
import { MateAppLayout } from '@mate-react/app-layout';

Variants ​

Default ​

tsx
<MateAppLayout>
    <h1 slot="navbar">My App</h1>
    <MateTabs theme="application-bar" orientation="vertical" slot="application-bar">
        <MateTab><span theme="icon">home</span></MateTab>
        <MateTab><span theme="icon">receipt_long</span></MateTab>
        <MateTab><span theme="icon">bar_chart</span></MateTab>
        <MateTab><span theme="icon">account_box</span></MateTab>
        <MateTab><span theme="icon">book</span></MateTab>
    </MateTabs>
    <MateSideNav slot="drawer" items={[
        { name: "Menü Punkt 1", children: [
            { name: "Menü Punkt 1.1", path: "1/1" }
            { name: "Menü Punkt 1.2", path: "1/2" }
        ]},
        { name: "Menü Punkt 2", children: [
            { name: "Menü Punkt 2.1", path: "1/1" }
            { name: "Menü Punkt 2.2", path: "1/2" }
        ]}
    ]}>
    </MateSideNav>
    <div>Page content</div>
</MateAppLayout>