<template>
  <v-navigation-drawer
    color="lightNeutral"
    class="d-lg-none d-xl-flex"
    height="100%"
    v-model="isDrawerVisible"
    overlay
    clipped
    temporary
    app
    :right="true"
  >
    <!--logo-->
    <v-list>
      <v-list-item>
        <v-img src="@/assets/logos/vector-logo.svg" max-width="120"></v-img>
      </v-list-item>
      <!--TABS-->
      <v-list-item
        router
        v-for="tab in tabList"
        :key="tab.title"
        :to="tab.routeName"
      >
        <v-list-item-title> {{ tab.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
import { useGlobalStore } from "@/store/GlobalStore";
import { mapWritableState } from "pinia";
import { bottomNavTabs } from "./TabsList";

export default {
  data() {
    return {
      tabList: bottomNavTabs,
    };
  },
  computed: {
    ...mapWritableState(useGlobalStore, ["isDrawerVisible"]),
  },
};
</script>

<style scoped></style>
