Install

npm i @mate-vue/app-layout@

Import

<script setup>
import { MateAppLayout } from '@mate-vue/app-layout';
</script>

Variants

Complete

<template>
    <MateAppLayout style="width: 100vw; height: 100vh;">
        <h1 slot="navbar">My App</h1>
        <MateTabs slot="application-bar">
            <MateTab><MateIcon>home</MateIcon></MateTab>
            <MateTab><MateIcon>receipt_long</MateIcon></MateTab>
            <MateTab><MateIcon>bar_chart</MateIcon></MateTab>
            <MateTab><MateIcon>account_box</MateIcon></MateTab>
            <MateTab><MateIcon>book</MateIcon></MateTab>
        </MateTabs>
        <MateSideNav slot="drawer">
            <MateSideNavItem>
                <template #default>Menü Punkt 1</template>
                <template #items>
                    <MateSideNavItem path="1/1">Menü Punkt 1.1</MateSideNavItem>
                    <MateSideNavItem path="1/2">Menü Punkt 1.2</MateSideNavItem>
                </template>
            </MateSideNavItem>
            <MateSideNavItem>
                <template #default>Menü Punkt 2</template>
                <template #items>
                    <MateSideNavItem path="2/1">Menü Punkt 2.1</MateSideNavItem>
                    <MateSideNavItem path="2/2">Menü Punkt 2.2</MateSideNavItem>
                </template>
            </MateSideNavItem>
        </MateSideNav>
        <div>Page content</div>
    </MateAppLayout>
</template>