<template>
  <v-app>
    <v-app-bar density="comfortable" color="primary" v-if="!$route.meta.hideHeader">
      <v-app-bar-title>My App, TheDisasterUnfoldingBeforeOurVeryEyesTheSequel</v-app-bar-title>
      
      <v-btn variant="text" to="/">Home</v-btn>
      <v-btn varient="text" to="/kitchen-sink">Kitchen Sink</v-btn>
      <v-btn varient="text" to="/copilot-test">Copilot Test</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://mohamedahmedali2023.github.io/fake_portofolio/assets/img/home-bg2.jpg" alt="Profile" />
            </v-avatar>
          </v-btn>
        </template>

        <v-list>
          <v-list-item title="Profile" to="/profile"/>
          <v-list-item title="Sign out" />
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-main>
      <v-container fluid>
        <router-view />
      </v-container>
    </v-main>
  </v-app>
</template>



<script lang="ts" setup>
  import HelloWorld from '@/components/HelloWorld.vue'
  import { useDisplay, useTheme } from 'vuetify'

  const theme = useTheme()

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

<!--
<HelloWorld />
      <v-btn
        class="m-2"
        icon="mdi-theme-light-dark"
        location="top right"
        position="absolute"
        @click="$vuetify.theme.cycle()"
      />
-->