<template>
  <v-app  class="body">
      <SideNav  v-model="drawer"
      app/>

    <!-- Dark elevation e flat removem a sombra -->
    <v-app-bar class="body" dark elevation="0" flat app>
      <v-app-bar-nav-icon class="dash" @click="toggleDrawer" color="secundary"></v-app-bar-nav-icon>
      <v-toolbar-title class="dash"></v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn @click="logout" class="dash_logout">Logout</v-btn> <!-- Botão de logout -->
    </v-app-bar>

    <v-main>
      <v-container>
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth' // Importa a store de autenticação
import SideNav from '../components/SideNav.vue' // Supondo que você tenha um componente SideNav

const drawer = ref(true)
const router = useRouter()
const authStore = useAuthStore()


// Função para ativar/desativar o drawer
const toggleDrawer = () => {
  drawer.value = !drawer.value
}

// Função para realizar o logout
const logout = () => {
  authStore.logout()  // Chama a ação de logout do Pinia
  router.push('/login')  // Redireciona para a página de login
}

console.log(authStore.getPermissionsByRole("Dashboard"))

</script>

<style scoped>
/* Adicione estilos se necessário */
.body {
  background-color: #fafafab9;
}

.dash {
  color: rgba(76,201,240);
  
}

.dash_logout {
  color: rgba(108,0,181);
  background-color: rgba(76,201,240);
  border-radius: 50px;
  background: linear-gradient(145deg, #eeeded, #ffffff);
  box-shadow:  20px 20px 60px #d9d9d9,
              -20px -20px 60px #ffffff;
}
</style>
