Versão 03/02 17h50
This commit is contained in:
Thaís Ferreira
parent
81485a7a67
commit
4d1b9dfc4c
124
src/App.vue
124
src/App.vue
@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<!-- Menu Lateral com Opção de Recolher -->
|
|
||||||
<v-navigation-drawer
|
<v-navigation-drawer
|
||||||
app
|
app
|
||||||
:width="drawerWidth"
|
:width="drawerWidth"
|
||||||
@ -8,6 +7,7 @@
|
|||||||
:mobile-breakpoint="breakpoint"
|
:mobile-breakpoint="breakpoint"
|
||||||
color="blue-darken-4"
|
color="blue-darken-4"
|
||||||
class="sidebar-navigation"
|
class="sidebar-navigation"
|
||||||
|
style="max-width: 100%; overflow-x: hidden;"
|
||||||
>
|
>
|
||||||
<div class="d-flex justify-end pa-2" v-if="canCollapse">
|
<div class="d-flex justify-end pa-2" v-if="canCollapse">
|
||||||
<v-btn
|
<v-btn
|
||||||
@ -20,81 +20,62 @@
|
|||||||
</v-btn>
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<v-list>
|
<v-list
|
||||||
|
class="px-0"
|
||||||
|
style="width: 100%; overflow-x: hidden;"
|
||||||
|
>
|
||||||
<!-- Ícone + Nome TARS -->
|
<!-- Í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-list-item-avatar class="mr-3">
|
||||||
<v-icon color="white">mdi-robot</v-icon>
|
<v-icon color="white">mdi-robot</v-icon>
|
||||||
</v-list-item-avatar>
|
</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
|
TARS
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-divider class="mb-4"></v-divider>
|
<v-divider class="mb-2"></v-divider>
|
||||||
|
|
||||||
<!-- Itens do Menu -->
|
<!-- 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-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-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>
|
||||||
|
|
||||||
<v-list-item link :to="{ name: 'user-profile' }" class="d-flex align-center">
|
<v-list-item
|
||||||
<v-list-item-icon class="mr-3">
|
@click="logout"
|
||||||
<v-icon color="white">mdi-account</v-icon>
|
class="d-flex align-center px-4 py-2"
|
||||||
</v-list-item-icon>
|
style="width: 100%; max-width: 100%;"
|
||||||
<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-list-item-icon class="mr-3">
|
||||||
<v-icon color="white">mdi-logout</v-icon>
|
<v-icon color="white">mdi-logout</v-icon>
|
||||||
</v-list-item-icon>
|
</v-list-item-icon>
|
||||||
<v-list-item-title class="text-white" v-if="!isCollapsed">Sair</v-list-item-title>
|
<v-list-item-title
|
||||||
</v-list-item>
|
class="text-white"
|
||||||
|
v-if="!isCollapsed"
|
||||||
<v-list-item link :to="{ name: 'settings' }" class="d-flex align-center">
|
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
||||||
<v-list-item-icon class="mr-3">
|
>
|
||||||
<v-icon color="white">mdi-cog</v-icon>
|
Sair
|
||||||
</v-list-item-icon>
|
</v-list-item-title>
|
||||||
<v-list-item-title class="text-white" v-if="!isCollapsed">Configurações</v-list-item-title>
|
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-navigation-drawer>
|
</v-navigation-drawer>
|
||||||
@ -112,7 +93,17 @@ export default {
|
|||||||
return {
|
return {
|
||||||
isCollapsed: false,
|
isCollapsed: false,
|
||||||
canCollapse: true,
|
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: {
|
computed: {
|
||||||
@ -126,9 +117,6 @@ export default {
|
|||||||
},
|
},
|
||||||
logout() {
|
logout() {
|
||||||
// Lógica de logout
|
// Lógica de logout
|
||||||
// Por exemplo:
|
|
||||||
// this.$store.dispatch('logout')
|
|
||||||
// this.$router.push('/login')
|
|
||||||
console.log('Logout')
|
console.log('Logout')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -136,9 +124,15 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.v-application {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-navigation {
|
.sidebar-navigation {
|
||||||
transition: width 0.3s ease;
|
transition: width 0.3s ease;
|
||||||
overflow: hidden;
|
height: 100vh;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-navigation-drawer {
|
.v-navigation-drawer {
|
||||||
@ -149,7 +143,7 @@ export default {
|
|||||||
transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin: 4px 8px;
|
margin: 4px 8px;
|
||||||
padding: 8px 12px;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-list-item:hover {
|
.v-list-item:hover {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user