<template>
  <v-app @keyup.shift.tab="toggleDrawer" :style="bg">
    <v-navigation-drawer temporary v-model="drawer" location="right"
      ><v-list density="compact" nav>
        <v-list-item
          prepend-icon="mdi-home"
          title="Home"
          value="home"
        ></v-list-item>
        <v-list-item
          prepend-icon="mdi-pencil"
          title="Edit"
          value="edit"
        ></v-list-item>
        <v-list-item
          prepend-icon="mdi-theme-light-dark"
          title="Theme"
          value="theme"
          @click="toggleTheme"
        ></v-list-item> </v-list
    ></v-navigation-drawer>
    <v-main>
      <v-container>
        <HomePage class="float-end w-50" />
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import { useTheme } from "vuetify";
import HomePage from "./components/HomePage.vue";

export default {
  name: "App",

  components: {
    HomePage,
  },

  data: () => ({
    drawer: null,
    snackbar: false,
    snackbarColor: "black",
    bg: {
      backgroundColor: "grey",
      // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)",
      backgroundPosition: "center",
    },
  }),

  setup() {
    const theme = useTheme();

    return {
      theme,
      toggleTheme: () =>
        (theme.global.name.value = theme.global.current.value.dark
          ? "light"
          : "dark"),
    };
  },

  methods: {
    toggleDrawer() {
      this.drawer = !this.drawer;
    },
  },
};
</script>
