<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-toolbar-title> Universo </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <!-- <q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        side="left"
      >
        <q-list>


          <EssentialLink
            v-for="link in essentialLinks"
            :key="link.title"
            v-bind="link"
          />
        </q-list>
      </q-drawer> -->

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useAuthStore } from 'src/stores/auth.js';
import { mapActions } from 'pinia';

const linksList = [
  {
    title: 'Страница для неавторизованных',
    caption: 'Страница',
    icon: 'school',
    link: 'http://localhost:9000/start',
  },
];

export default defineComponent({
  name: 'StartLayout',

  components: {
    // EssentialLink
  },
  data() {
    return {};
  },
  methods: {
    ...mapActions(useAuthStore, ['getMe']),
    ...mapActions(useAuthStore, ['getLocalStorage']),
  },
  mounted() {
    this.getLocalStorage()
      .then(() => this.getMe())
      .catch(() => {
        if (this.$route.meta.requiresAuth) {
          this.$router.push('/');
        }
      });
  },
  setup() {
    const leftDrawerOpen = ref(false);

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