<template>
    <q-layout view="lHh Lpr lFf">
        <q-header elevated>
            <q-toolbar class="bg-teal-4 ">
                <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" class="q-mr-md" />
                <SvgIcon fill="rgb(29 78 216)" :src="import('@/Data/tis_full-1.svg')" class="q-mr-sm" />

                <q-toolbar-title>Register právinických osôb </q-toolbar-title>

                <div>Quasar v{{ $q.version }}</div>
            </q-toolbar>
        </q-header>
        <q-icon class="text-dark" size="lg">

        </q-icon>

        <q-page-container>
            <slot />
        </q-page-container>
    </q-layout>
</template>

<script>
import { defineComponent, ref } from "vue";
import EssentialLink from "../components/EssentialLink.vue";
import SvgIcon from "../components/SvgIcon.vue";


const linksList = [
    {
        title: "Github",
        caption: "https://github.com/laraquasar",
        icon: "code",
        link: "https://github.com/laraquasar",
    },
    {
        title: "Packagist",
        caption: "https://packagist.org/packages/laraquasar/laraquasar",
        icon: "code",
        link: "https://packagist.org/packages/laraquasar/laraquasar",
    },
    {
        title: "Docs Quasar",
        caption: "quasar.dev",
        icon: "school",
        link: "https://quasar.dev",
    },
    {
        title: "Docs Laravel",
        caption: "laravel.com/docs",
        icon: "school",
        link: "https://laravel.com/docs",
    },
];

export default defineComponent({
    name: "MainLayout",

    components: {
        EssentialLink,
        SvgIcon,
    },

    setup() {
        const leftDrawerOpen = ref(false);

        return {
            essentialLinks: linksList,
            leftDrawerOpen,
            toggleLeftDrawer() {
                leftDrawerOpen.value = !leftDrawerOpen.value;
            },
        };
    },
});
</script>
