From 4d1b9dfc4c350896b2affc84b0440a1081179db0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=ADs=20Ferreira?= <thais.ferreira07@outlook.com>
Date: Mon, 3 Feb 2025 17:50:47 -0300
Subject: [PATCH] =?UTF-8?q?Vers=C3=A3o=2003/02=2017h50?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 124 +++++++++++++++++++++++++---------------------------
 1 file changed, 59 insertions(+), 65 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1007445..ccd8021 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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 {