Upgrade interface do MMPSearch

assets/css/sidebar.css

@@ -1,42 +1,73 @@
+/* ==========================================================================
+   SIDEBAR.CSS (Vertical)
+   ========================================================================== */
+
+/* Wrapper que segura a barra lateral na esquerda */
+.sidebar-wrapper {
+  background-color: #fff;
+  border-right: 1px solid #e1e4e8;
+  height: 100%;
+  min-height: calc(100vh - 60px); /* Ajuste conforme altura do seu header */
+  padding: 1.5rem 1rem;
+  box-shadow: 2px 0 10px rgba(0,0,0,0.02);
+}
+
+/* Título opcional acima do menu */
+.sidebar-header {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #888;
+  margin-bottom: 1rem;
+  padding-left: 0.5rem;
+  font-weight: bold;
+}
+
+/* Container dos links */
 .submenu {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.5rem;
-  background-color: #f4f4f4;
-  padding: 1rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  max-width: 100%;
-  box-sizing: border-box;
+  flex-direction: column; /* Força vertical */
+  gap: 0.25rem;
+  width: 100%;
 }
 
+/* Estilo dos Links */
 .submenu a {
+  display: flex;
+  align-items: center;
   text-decoration: none;
-  padding: 0.4rem 0.8rem;
-  border-radius: 5px;
-  color: #333;
-  background-color: #fff;
-  transition: all 0.3s ease;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  color: #4a4a4a;
   font-weight: 500;
-  border: 1px solid #ddd;
   font-size: 0.95rem;
-  white-space: nowrap;
-  flex-shrink: 0;
+  transition: all 0.2s ease;
+  border-left: 3px solid transparent;
 }
 
+/* Hover */
 .submenu a:hover {
-  background-color: #007acc;
-  color: white;
-  border-color: #007acc;
+  background-color: #f5f7fa;
+  color: #3273dc; /* Azul padrão do Bulma */
+  border-left-color: #3273dc;
+  padding-left: 1.2rem; /* Pequeno movimento para a direita */
 }
 
-@media screen and (max-width: 600px) {
-  .submenu {
-    justify-content: flex-start;
-  }
-  .submenu a {
-    font-size: 0.85rem;
-    padding: 0.3rem 0.6rem;
-  }
+/* Link Ativo (opcional, se você tiver lógica para adicionar classe 'is-active') */
+.submenu a.is-active {
+  background-color: #eef3fc;
+  color: #3273dc;
+  font-weight: 600;
+  border-left-color: #3273dc;
 }
+
+/* Ícones (se houver) */
+.submenu a i, .submenu a span.icon {
+  margin-right: 10px;
+  color: #888;
+  width: 20px;
+  text-align: center;
+}
+.submenu a:hover i {
+  color: #3273dc;
+}