kml/monolito_djanco_poonto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Versão 03/02 17h50

Browse Source
This commit is contained in:
Thaís Ferreira 2025-02-03 17:50:47 -03:00
parent 81485a7a67
commit 4d1b9dfc4c
1 changed files with 59 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/App.vue
View File

@ -1,6 +1,5 @@
<template>
<v-app>
<!-- Menu Lateral com Opção de Recolher -->
<v-navigation-drawer
app
:width="drawerWidth"
@ -8,6 +7,7 @@
:mobile-breakpoint="breakpoint"
color="blue-darken-4"
class="sidebar-navigation"
style="max-width: 100%; overflow-x: hidden;"
>
<div class="d-flex justify-end pa-2" v-if="canCollapse">
<v-btn
@ -20,81 +20,62 @@
</v-btn>
</div>
<v-list>
<v-list
class="px-0"
style="width: 100%; overflow-x: hidden;"
>
<!-- Ícone + Nome TARS -->
<v-list-item class="d-flex align-center">
<v-list-item class="d-flex align-center px-4 py-2">
<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">
<v-list-item-title
class="text-h6 text-white font-weight-bold"
v-if="!isCollapsed"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
>
TARS
</v-list-item-title>
</v-list-item>
<v-divider class="mb-4"></v-divider>
<v-divider class="mb-2"></v-divider>
<!-- Itens do Menu -->
<v-list-item link :to="{ name: 'home' }" class="d-flex align-center">
<v-list-item
v-for="(item, index) in menuItems"
:key="index"
link
:to="item.route"
class="d-flex align-center px-4 py-2"
style="width: 100%; max-width: 100%;"
>
<v-list-item-icon class="mr-3">
<v-icon color="white">mdi-home</v-icon>
<v-icon color="white">{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title class="text-white" v-if="!isCollapsed">Home</v-list-item-title>
<v-list-item-title
class="text-white"
v-if="!isCollapsed"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
>
{{ item.title }}
</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
@click="logout"
class="d-flex align-center px-4 py-2"
style="width: 100%; max-width: 100%;"
>
<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-title
class="text-white"
v-if="!isCollapsed"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
>
Sair
</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
@ -112,7 +93,17 @@ export default {
return {
isCollapsed: false,
canCollapse: true,
breakpoint: 600
breakpoint: 600,
menuItems: [
{ title: 'Home', icon: 'mdi-home', route: { name: 'home' } },
{ title: 'Perfil', icon: 'mdi-account', route: { name: 'user-profile' } },
{ title: 'Dashboard', icon: 'mdi-view-dashboard', route: { name: 'dashboard' } },
{ title: 'Relatórios', icon: 'mdi-chart-bar', route: { name: 'reports' } },
{ title: 'Treinamento', icon: 'mdi-brain', route: { name: 'training' } },
{ title: 'Usuários', icon: 'mdi-account-group', route: { name: 'users' } },
{ title: 'Testes', icon: 'mdi-flask', route: { name: 'testing' } },
{ title: 'Configurações', icon: 'mdi-cog', route: { name: 'settings' } }
]
}
},
computed: {
@ -126,9 +117,6 @@ export default {
},
logout() {
// Lógica de logout
// Por exemplo:
// this.$store.dispatch('logout')
// this.$router.push('/login')
console.log('Logout')
}
}
@ -136,9 +124,15 @@ export default {
</script>
<style scoped>
.v-application {
overflow: hidden;
}
.sidebar-navigation {
transition: width 0.3s ease;
overflow: hidden;
height: 100vh;
max-width: 100%;
overflow: hidden !important;
}
.v-navigation-drawer {
@ -149,7 +143,7 @@ export default {
transition: background-color 0.2s ease;
border-radius: 8px;
margin: 4px 8px;
padding: 8px 12px;
max-width: 100%;
}
.v-list-item:hover {