monolito_djanco_poonto/src/App.vue

<template>
  <v-app>
    <!-- Menu Lateral com Opção de Recolher -->
    <v-navigation-drawer 
      app 
      :width="drawerWidth"
      :permanent="!canCollapse"
      :mobile-breakpoint="breakpoint"
      color="blue-darken-4"
      class="sidebar-navigation"
    >
      <div class="d-flex justify-end pa-2" v-if="canCollapse">
        <v-btn 
          icon 
          @click="toggleDrawer" 
          color="white"
          class="collapse-button"
        >
          <v-icon>{{ isCollapsed ? 'mdi-menu' : 'mdi-chevron-left' }}</v-icon>
        </v-btn>
      </div>

      <v-list>
        <!-- Ícone + Nome TARS -->
        <v-list-item class="d-flex align-center">
          <v-list-item-avatar class="mr-3">
            <v-icon color="white">mdi-robot</v-icon>
          </v-list-item-avatar>
          <v-list-item-title class="text-h6 text-white font-weight-bold" v-if="!isCollapsed">
            TARS
          </v-list-item-title>
        </v-list-item>

        <v-divider class="mb-4"></v-divider>

        <!-- Itens do Menu -->
        <v-list-item link :to="{ name: 'home' }" class="d-flex align-center">
          <v-list-item-icon class="mr-3">
            <v-icon color="white">mdi-home</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="text-white" v-if="!isCollapsed">Home</v-list-item-title>
        </v-list-item>

        <v-list-item link :to="{ name: 'user-profile' }" class="d-flex align-center">
          <v-list-item-icon class="mr-3">
            <v-icon color="white">mdi-account</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="text-white" v-if="!isCollapsed">Perfil</v-list-item-title>
        </v-list-item>

        <v-list-item link :to="{ name: 'dashboard' }" class="d-flex align-center">
          <v-list-item-icon class="mr-3">
            <v-icon color="white">mdi-view-dashboard</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="text-white" v-if="!isCollapsed">Dashboard</v-list-item-title>
        </v-list-item>

        <v-list-item link :to="{ name: 'reports' }" class="d-flex align-center">
          <v-list-item-icon class="mr-3">
            <v-icon color="white">mdi-chart-bar</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="text-white" v-if="!isCollapsed">Relatórios</v-list-item-title>
        </v-list-item>

        <v-list-item link :to="{ name: 'training' }" class="d-flex align-center">
          <v-list-item-icon class="mr-3">
            <v-icon color="white">mdi-brain</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="text-white" v-if="!isCollapsed">Treinamento</v-list-item-title>
        </v-list-item>

        <v-list-item link :to="{ name: 'users' }" class="d-flex align-center">
          <v-list-item-icon class="mr-3">
            <v-icon color="white">mdi-account-group</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="text-white" v-if="!isCollapsed">Usuários</v-list-item-title>
        </v-list-item>

        <v-list-item link :to="{ name: 'testing' }" class="d-flex align-center">
          <v-list-item-icon class="mr-3">
            <v-icon color="white">mdi-flask</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="text-white" v-if="!isCollapsed">Testes</v-list-item-title>
        </v-list-item>

        <v-list-item @click="logout" class="d-flex align-center">
          <v-list-item-icon class="mr-3">
            <v-icon color="white">mdi-logout</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="text-white" v-if="!isCollapsed">Sair</v-list-item-title>
        </v-list-item>

        <v-list-item link :to="{ name: 'settings' }" class="d-flex align-center">
          <v-list-item-icon class="mr-3">
            <v-icon color="white">mdi-cog</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="text-white" v-if="!isCollapsed">Configurações</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- Conteúdo Principal -->
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      canCollapse: true,
      breakpoint: 600
    }
  },
  computed: {
    drawerWidth() {
      return this.isCollapsed ? 64 : 240
    }
  },
  methods: {
    toggleDrawer() {
      this.isCollapsed = !this.isCollapsed
    },
    logout() {
      // Lógica de logout
      // Por exemplo: 
      // this.$store.dispatch('logout')
      // this.$router.push('/login')
      console.log('Logout')
    }
  }
}
</script>

<style scoped>
.sidebar-navigation {
  transition: width 0.3s ease;
  overflow: hidden;
}

.v-navigation-drawer {
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.v-list-item {
  transition: background-color 0.2s ease;
  border-radius: 8px;
  margin: 4px 8px;
  padding: 8px 12px;
}

.v-list-item:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.v-list-item-title {
  font-size: 16px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.collapse-button {
  margin-bottom: 8px;
}
</style>