109 lines
3.2 KiB
Markdown
109 lines
3.2 KiB
Markdown
# Problema Resolvido: Subitens do Catálogo de Perfis
|
|
|
|
## Problema Identificado
|
|
|
|
Os subitens do "Catálogo de Perfis" não estavam aparecendo na sidebar, mesmo com a classe `expanded` aplicada no HTML.
|
|
|
|
## Causa Raiz
|
|
|
|
O problema estava na configuração `adminConfig.toolsVisibility` no arquivo `app.js`. Todos os itens do catálogo de perfis estavam configurados como `false`:
|
|
|
|
```javascript
|
|
// Catálogo de Perfis
|
|
'cantoneiras': false,
|
|
'barras-redondas': false,
|
|
'tubos-circulares': false,
|
|
// ... etc
|
|
```
|
|
|
|
A função `filterToolsByMode()` é chamada durante a inicialização e esconde todos os itens que têm `toolsVisibility: false` quando o app está em modo simples (não-expert).
|
|
|
|
## Solução Aplicada
|
|
|
|
### 1. Alteração no `app.js`
|
|
Mudei todos os itens do catálogo de perfis para `true`:
|
|
|
|
```javascript
|
|
// Catálogo de Perfis
|
|
'cantoneiras': true,
|
|
'barras-redondas': true,
|
|
'tubos-circulares': true,
|
|
'perfis-i': true,
|
|
'perfis-w': true,
|
|
'tubos-rhs': true,
|
|
'chapas': true,
|
|
'perfis-hp': true,
|
|
'barras-roscadas': true,
|
|
'barras-chatas': true,
|
|
```
|
|
|
|
### 2. Melhorias no CSS (`style.css`)
|
|
Aumentei o `max-height` e adicionei `opacity` para melhor transição:
|
|
|
|
```css
|
|
.sidebar-subcategory-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height var(--duration-normal) var(--ease-standard);
|
|
padding-left: var(--space-12);
|
|
opacity: 0;
|
|
}
|
|
|
|
.sidebar-subcategory.expanded .sidebar-subcategory-content {
|
|
max-height: 5000px !important;
|
|
padding-top: var(--space-4);
|
|
padding-bottom: var(--space-4);
|
|
opacity: 1;
|
|
}
|
|
```
|
|
|
|
### 3. Melhorias na Inicialização
|
|
Adicionei código para forçar a expansão das subcategorias marcadas como `expanded` no HTML:
|
|
|
|
```javascript
|
|
// Force expand all subcategories that have the expanded class in HTML
|
|
const expandedSubcategories = document.querySelectorAll('.sidebar-subcategory.expanded');
|
|
console.log('📂 Subcategorias com classe expanded:', expandedSubcategories.length);
|
|
expandedSubcategories.forEach((subcat, index) => {
|
|
const content = subcat.querySelector('.sidebar-subcategory-content');
|
|
if (content) {
|
|
// Force display by setting max-height directly
|
|
content.style.maxHeight = '5000px';
|
|
content.style.opacity = '1';
|
|
console.log(`✅ Subcategoria ${index + 1} forçada a expandir:`, subcat.querySelector('.subcategory-title')?.textContent);
|
|
}
|
|
});
|
|
```
|
|
|
|
### 4. Debug Melhorado
|
|
Adicionei logs detalhados na função `toggleCategory()` para facilitar debugging futuro.
|
|
|
|
## Resultado
|
|
|
|
Agora os 10 subitens do "Catálogo de Perfis" aparecem corretamente:
|
|
- 📐 Cantoneiras
|
|
- ⭕ Barras Redondas
|
|
- 🔘 Tubos Circulares
|
|
- 🏛️ Perfis I (IPE)
|
|
- 🏗️ Perfis W
|
|
- ▭ Tubos RHS
|
|
- 📄 Chapas
|
|
- 🏛️ Perfis HP
|
|
- 🔩 Barras Roscadas
|
|
- ▬ Barras Chatas
|
|
|
|
## Arquivos Modificados
|
|
|
|
1. `app.js` - Configuração toolsVisibility e inicialização
|
|
2. `style.css` - Estilos de subcategorias
|
|
3. Nenhuma alteração necessária no `index.html` (estrutura já estava correta)
|
|
|
|
## Teste
|
|
|
|
Para testar:
|
|
1. Abra o `index.html` no navegador
|
|
2. Verifique a aba "📦 MATERIAIS"
|
|
3. Expanda "🏗️ AÇOS ESTRUTURAIS"
|
|
4. Verifique que "📐 Catálogo de Perfis" mostra todos os 10 subitens
|
|
5. Clique em qualquer subitem para carregar a seção correspondente
|