<template>
  <v-app>
    <!-- NAVIGATION DRAWER -->
    <v-navigation-drawer
      v-model="drawer"
      :rail="isDesktop"
      :permanent="isDesktop"
      temporary
    >
      <v-list density="compact" nav>
        <v-list-item
          prepend-icon="mdi-view-dashboard"
          title="Dashboard"
          value="dashboard"
        />
        <v-list-item
          prepend-icon="mdi-magnify"
          title="Search"
          value="search"
        />
        <v-list-item
          prepend-icon="mdi-cog"
          title="Settings"
          value="settings"
        />
      </v-list>
    </v-navigation-drawer>

    <!-- APP BAR -->
    <v-app-bar flat color="primary">
      <v-app-bar-nav-icon
        v-if="!isDesktop"
        @click="drawer = !drawer"
      />

      <v-toolbar-title>My App</v-toolbar-title>

      <v-spacer />

      <v-btn color="secondary" variant="flat">
        New
      </v-btn>

      <v-btn icon @click="toggleTheme">
        <v-icon>
          {{ theme.global.current.value.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
        </v-icon>
      </v-btn>

      <v-menu>
        <template #activator="{ props }">
          <v-btn icon v-bind="props">
            <v-avatar size="32">
              <img src="https://via.placeholder.com/32" alt="Profile" />
            </v-avatar>
          </v-btn>
        </template>

        <v-list>
          <v-list-item title="Profile" />
          <v-list-item title="Sign out" />
        </v-list>
      </v-menu>
    </v-app-bar>

    <!-- MAIN CONTENT -->
    <v-main>
      <v-container class="pa-4">
        <h1>Dashboard</h1>
        <p>Your content goes here.</p>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useDisplay, useTheme } from 'vuetify'

const { mdAndUp } = useDisplay()
const theme = useTheme()

const drawer = ref(false)
const isDesktop = computed(() => mdAndUp.value)

function toggleTheme() {
  theme.global.name.value =
    theme.global.current.value.dark ? 'light' : 'dark'
}
</script>
