# 📱 Mobile Footer Menu - Documentação

## Visão Geral

O **Mobile Footer Menu** é um componente de navegação flutuante desenvolvido especificamente para dispositivos móveis, proporcionando acesso rápido às principais funcionalidades da aplicação IDT App.

![Menu Mobile Footer](../samples_screem/menu_footer_mobile.jpg)

## 🎯 Funcionalidades

### ✅ Navegação Principal
- **Menu Sidebar**: Controla abertura/fechamento do menu lateral
- **Dashboard**: Navegação rápida para o painel principal
- **Rotas Meli**: Acesso direto às rotas do Mercado Livre
- **Veículos**: Navegação para gestão de frota

### ✅ Sistema de Notificações
- **Badges dinâmicos**: Contadores visuais de notificações
- **Auto-clear**: Notificações são automaticamente limpas ao navegar
- **Tempo real**: Atualizações em tempo real via Observable

### ✅ Design Responsivo
- **Mobile-only**: Visível apenas em dispositivos ≤768px
- **Auto-hide**: Oculto automaticamente em desktop
- **Animações**: Transições suaves e efeitos visuais

## 🏗️ Arquitetura

### Componentes
```
📁 mobile-footer-menu/
├── mobile-footer-menu.component.ts    // Componente principal
├── mobile-footer-menu.component.scss  // Estilos responsivos
📁 services/
└── mobile-menu.service.ts             // Gerenciamento de estado
```

### Dependências
```typescript
// Imports necessários
import { MobileFooterMenuComponent } from './mobile-footer-menu.component';
import { MobileMenuService } from '../services/mobile-menu.service';
```

## 🚀 Implementação

### 1. Integração no Layout

O componente já está integrado no `MainLayoutComponent`:

```typescript
@Component({
  template: `
    <div class="app-container">
      <!-- Layout principal -->
      
      <!-- Menu Mobile Flutuante -->
      <app-mobile-footer-menu 
        (sidebarToggle)="toggleSidebar()">
      </app-mobile-footer-menu>
    </div>
  `
})
export class MainLayoutComponent {
  toggleSidebar() {
    if (this.sidebar) {
      this.sidebar.toggleSidebar();
    }
  }
}
```

### 2. Uso Automático

O menu funciona automaticamente:

```typescript
// ✅ Detecção automática de dispositivo móvel
// ✅ Visibilidade controlada por media queries
// ✅ Navegação configurada para rotas padrão
```

## 🔧 Configuração

### Service de Gerenciamento

```typescript
import { MobileMenuService } from './services/mobile-menu.service';

constructor(private mobileMenuService: MobileMenuService) {}

// Atualizar notificações
this.mobileMenuService.setMeliNotifications(5, 'Novas rotas');
this.mobileMenuService.setVehicleNotifications(2, 'Manutenção pendente');
this.mobileMenuService.setDashboardNotifications(1, 'Relatório pronto');

// Limpar notificações
this.mobileMenuService.clearNotification('meli');

// Incrementar contador
this.mobileMenuService.incrementNotification('vehicles');
```

### Forçar Visibilidade (para testes)

```typescript
// Mostrar menu mesmo em desktop (desenvolvimento)
this.mobileMenuService.setVisibility(true);

// Voltar ao comportamento normal
this.mobileMenuService.setVisibility(false);
```

## 🎨 Personalização

### Cores e Temas

```scss
// Tema claro (padrão)
.mobile-footer-menu {
  background: linear-gradient(135deg, #FFC82E 0%, #FFD700 100%);
}

// Tema escuro (automático)
@media (prefers-color-scheme: dark) {
  .mobile-footer-menu {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  }
}
```

### Responsividade

```scss
// Dispositivos muito pequenos
@media (max-width: 360px) {
  .menu-item { min-width: 50px; }
  .menu-icon { font-size: 20px; }
}

// Dispositivos médios
@media (min-width: 361px) and (max-width: 480px) {
  .menu-item { min-width: 65px; }
}

// Desktop (oculto)
@media (min-width: 769px) {
  .mobile-footer-menu { display: none; }
}
```

## 📋 API Reference

### MobileMenuService

#### Métodos Principais

```typescript
// Atualizar notificação
updateNotification(type: 'meli' | 'dashboard' | 'vehicles' | 'sidebar', count: number, message?: string): void

// Limpar notificação
clearNotification(type: string): void

// Incrementar notificação
incrementNotification(type: string, message?: string): void

// Controlar visibilidade
setVisibility(visible: boolean): void
```

#### Métodos de Conveniência

```typescript
// Notificações específicas
setMeliNotifications(count: number, message?: string): void
setVehicleNotifications(count: number, message?: string): void
setDashboardNotifications(count: number, message?: string): void
```

#### Observables

```typescript
// Observar notificações
notifications$: Observable<MobileMenuNotification[]>

// Observar visibilidade
visibility$: Observable<boolean>

// Obter notificação específica
getNotification(type: string): Observable<MobileMenuNotification | undefined>
```

### MobileFooterMenuComponent

#### Eventos

```typescript
@Output() sidebarToggle = new EventEmitter<void>();
```

#### Propriedades

```typescript
isVisible: boolean        // Controla visibilidade
notifications: Array     // Lista de notificações
```

## 🛣️ Rotas Configuradas

```typescript
// Rotas padrão do menu
const routes = {
  dashboard: '/app/dashboard',
  meli: '/app/routes/mercado-live', 
  vehicles: '/app/vehicles',
  sidebar: 'toggle()' // Ação especial
};
```

## 📊 Exemplos de Uso

### Exemplo 1: Atualizar Notificações

```typescript
export class SomeComponent {
  constructor(private mobileMenuService: MobileMenuService) {}

  onNewMeliRoute() {
    // Nova rota disponível
    this.mobileMenuService.incrementNotification('meli', 'Nova rota de entrega');
  }

  onVehicleMaintenance() {
    // Manutenção programada
    this.mobileMenuService.setVehicleNotifications(3, 'Revisões pendentes');
  }

  onTaskCompleted() {
    // Tarefa concluída, limpar notificação
    this.mobileMenuService.clearNotification('dashboard');
  }
}
```

### Exemplo 2: Observar Mudanças

```typescript
export class DashboardComponent implements OnInit {
  constructor(private mobileMenuService: MobileMenuService) {}

  ngOnInit() {
    // Observar notificações do dashboard
    this.mobileMenuService.getNotification('dashboard').subscribe(notification => {
      if (notification && notification.count > 0) {
        console.log(`Dashboard tem ${notification.count} notificações`);
      }
    });
  }
}
```

### Exemplo 3: Demo de Notificações

```typescript
// Iniciar demo automático (já configurado)
this.mobileMenuService.startDemoNotifications();

// Sequência de demo:
// 1. +3 segundos: Nova rota Meli
// 2. +6 segundos: Alerta de veículo
// 3. +10 segundos: Limpar notificações Meli
```

## 🎭 Estados Visuais

### Botões
- **Normal**: Transparente com ícone preto
- **Hover**: Background semi-transparente + elevação
- **Active**: Efeito ripple + compressão
- **Focus**: Outline acessível

### Notificações
- **Badge**: Vermelho (#FF4444) com animação pulse
- **Contador**: Números brancos centralizados
- **Auto-hide**: Oculta quando count = 0

### Animações
- **Entrada**: Slide-up suave (0.3s cubic-bezier)
- **Hover**: Scale dos ícones (1.1x)
- **Ripple**: Expansão circular no touch

## 🔍 Debugging

### Logs de Console

```javascript
// Logs automáticos disponíveis:
"🔧 Abrindo sidebar..."
"📊 Navegando para Dashboard..."
"🛣️ Navegando para Rotas Meli..."
"🚗 Navegando para Veículos..."
"📱 Notificação atualizada para meli: 5"
"🧪 Iniciando demo de notificações..."
```

### Testes Manuais

```typescript
// No console do navegador:
const service = window.ng.getComponent(document.querySelector('app-mobile-footer-menu')).mobileMenuService;

// Testar notificações
service.setMeliNotifications(10);
service.setVehicleNotifications(5);

// Forçar visibilidade
service.setVisibility(true);
```

## 🚨 Limitações Conhecidas

### Mobile Only
- Componente **não é visível** em desktop (>768px)
- Design otimizado apenas para touch interfaces

### Navegação
- Rotas hard-coded no componente
- Requer roteamento Angular configurado

### Performance
- Service sempre ativo (singleton)
- Demo de notificações consome recursos

## 🔄 Atualizações Futuras

### Planejadas
- [ ] Suporte a gestos (swipe)
- [ ] Haptic feedback
- [ ] Customização de posição
- [ ] Configuração dinâmica de botões
- [ ] Integração com PWA

### Possíveis Melhorias
- [ ] Lazy loading do componente
- [ ] Cache de notificações
- [ ] Analytics de uso
- [ ] Temas personalizáveis
- [ ] Acessibilidade aprimorada

## 🤝 Contribuição

### Como Contribuir

1. **Reportar Bugs**: Usar issues do projeto
2. **Sugerir Features**: Documentar casos de uso
3. **Código**: Seguir padrões estabelecidos
4. **Testes**: Incluir em dispositivos reais

### Padrões de Código

```typescript
// Convenções seguidas:
// - Prefixo 'mobile' para classes
// - Observables com sufixo '$'
// - Logs com emojis para debugging
// - Comentários em português
// - TypeScript strict mode
```

## 📞 Suporte

### Troubleshooting

| Problema | Solução |
|----------|---------|
| Menu não aparece | Verificar se está em dispositivo móvel (≤768px) |
| Notificações não atualizam | Verificar subscription ao service |
| Sidebar não abre | Verificar referência no MainLayoutComponent |
| Rotas não funcionam | Verificar configuração do Angular Router |

### Contato
- **Desenvolvedor**: Equipe IDT App
- **Última Atualização**: Janeiro 2025
- **Versão**: 1.0.0

---

## 📄 Resumo

O **Mobile Footer Menu** oferece uma experiência de navegação moderna e intuitiva para dispositivos móveis, com:

- ✅ **4 botões principais** de navegação
- ✅ **Sistema de notificações** em tempo real  
- ✅ **Design responsivo** e acessível
- ✅ **Integração completa** com o layout
- ✅ **Customização** via service
- ✅ **Performance otimizada** para mobile

**Resultado**: Interface mobile profissional que melhora significativamente a experiência do usuário em dispositivos móveis.