403 lines
10 KiB
Markdown
Executable File
403 lines
10 KiB
Markdown
Executable File
# 🎯 HEADER - Documentazione Completa NetGescon
|
|
|
|
> **Componente Header dell'interfaccia universale**
|
|
> **📅 Creato:** 21/07/2025
|
|
> **🔄 Ultimo aggiornamento:** 21/07/2025
|
|
> **🎯 Priorità:** 🔥 CRITICA
|
|
|
|
---
|
|
|
|
## 📋 **OVERVIEW HEADER**
|
|
|
|
Il Header NetGescon è il componente **FIXED TOP** che contiene:
|
|
- 🏢 **Logo e Brand**
|
|
- 🔍 **Search Global**
|
|
- 📢 **Notifications**
|
|
- 👤 **User Profile Menu**
|
|
- 📱 **Mobile Menu Toggle**
|
|
|
|
### 📐 **Specifiche Layout**
|
|
- **Altezza:** `70px` fisso
|
|
- **Posizione:** `fixed top-0` sempre visibile
|
|
- **Z-index:** `1000` sopra tutti gli elementi
|
|
- **Background:** Gradiente primario NetGescon
|
|
|
|
---
|
|
|
|
## 🎨 **DESIGN SPECIFICATIONS**
|
|
|
|
### 🌈 **Color Palette**
|
|
```css
|
|
/* Background Gradient */
|
|
background: linear-gradient(135deg,
|
|
var(--netgescon-primary) 0%,
|
|
var(--netgescon-primary-dark) 100%
|
|
);
|
|
|
|
/* Hover States */
|
|
--hover-bg: rgba(255, 255, 255, 0.1);
|
|
--active-bg: rgba(255, 255, 255, 0.2);
|
|
```
|
|
|
|
### 📏 **Dimensions**
|
|
```css
|
|
.netgescon-header {
|
|
height: 70px;
|
|
padding: 0 1.5rem;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🧩 **COMPONENTI HEADER**
|
|
|
|
### 1. **🏢 LOGO & BRAND**
|
|
```blade
|
|
<!-- Logo Section -->
|
|
<div class="header-brand flex items-center space-x-3">
|
|
<img src="{{ asset('images/netgescon/logo-white.svg') }}"
|
|
alt="NetGescon"
|
|
class="h-8 w-auto">
|
|
<span class="text-xl font-bold text-white hidden md:block">
|
|
NetGescon
|
|
</span>
|
|
<span class="text-xs text-blue-200 hidden lg:block">
|
|
v2.1.0
|
|
</span>
|
|
</div>
|
|
```
|
|
|
|
### 2. **🔍 SEARCH GLOBAL**
|
|
```blade
|
|
<!-- Global Search -->
|
|
<div class="header-search flex-1 max-w-md mx-4 hidden md:block">
|
|
<div class="relative">
|
|
<input type="text"
|
|
id="global-search"
|
|
placeholder="Cerca condomini, unità, contratti..."
|
|
class="w-full px-4 py-2 pl-10 pr-4
|
|
bg-white/10 border border-white/20
|
|
rounded-lg text-white placeholder-blue-200
|
|
focus:bg-white/20 focus:border-white/40
|
|
transition-all duration-200">
|
|
<i class="fas fa-search absolute left-3 top-3 text-blue-200"></i>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 3. **📢 NOTIFICATIONS**
|
|
```blade
|
|
<!-- Notifications -->
|
|
<div class="header-notifications relative">
|
|
<button class="notification-toggle p-2 rounded-lg
|
|
hover:bg-white/10 transition-colors relative">
|
|
<i class="fas fa-bell text-white text-lg"></i>
|
|
<!-- Badge notifiche -->
|
|
<span class="notification-badge absolute -top-1 -right-1
|
|
bg-red-500 text-white text-xs rounded-full
|
|
w-5 h-5 flex items-center justify-center">
|
|
3
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Dropdown Notifications -->
|
|
<div class="notifications-dropdown hidden absolute right-0 top-12
|
|
w-80 bg-white rounded-lg shadow-xl border">
|
|
<!-- Contenuto notifiche -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 4. **👤 USER PROFILE**
|
|
```blade
|
|
<!-- User Profile -->
|
|
<div class="header-user relative">
|
|
<button class="user-toggle flex items-center space-x-2 p-2
|
|
rounded-lg hover:bg-white/10 transition-colors">
|
|
<img src="{{ auth()->user()->avatar ?? asset('images/avatar-default.svg') }}"
|
|
alt="User"
|
|
class="w-8 h-8 rounded-full border-2 border-white/30">
|
|
<span class="text-white font-medium hidden lg:block">
|
|
{{ auth()->user()->name }}
|
|
</span>
|
|
<i class="fas fa-chevron-down text-white/70 text-sm"></i>
|
|
</button>
|
|
|
|
<!-- Dropdown User Menu -->
|
|
<div class="user-dropdown hidden absolute right-0 top-12
|
|
w-64 bg-white rounded-lg shadow-xl border">
|
|
<!-- Menu utente -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 5. **📱 MOBILE TOGGLE**
|
|
```blade
|
|
<!-- Mobile Menu Toggle -->
|
|
<button class="mobile-toggle md:hidden p-2 rounded-lg
|
|
hover:bg-white/10 transition-colors"
|
|
onclick="toggleMobileMenu()">
|
|
<i class="fas fa-bars text-white text-lg"></i>
|
|
</button>
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 **JAVASCRIPT FUNCTIONALITY**
|
|
|
|
### 📁 **File:** `/public/js/components/header.js`
|
|
|
|
```javascript
|
|
/**
|
|
* Header NetGescon - JavaScript Functions
|
|
*/
|
|
|
|
// Global Search
|
|
function initializeGlobalSearch() {
|
|
const searchInput = document.getElementById('global-search');
|
|
const searchResults = document.getElementById('search-results');
|
|
|
|
let searchTimeout;
|
|
|
|
searchInput.addEventListener('input', function() {
|
|
clearTimeout(searchTimeout);
|
|
|
|
searchTimeout = setTimeout(() => {
|
|
const query = this.value.trim();
|
|
if (query.length >= 2) {
|
|
performGlobalSearch(query);
|
|
} else {
|
|
hideSearchResults();
|
|
}
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
// Notifications
|
|
function initializeNotifications() {
|
|
const notificationToggle = document.querySelector('.notification-toggle');
|
|
const notificationDropdown = document.querySelector('.notifications-dropdown');
|
|
|
|
notificationToggle.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
notificationDropdown.classList.toggle('hidden');
|
|
|
|
// Marca come lette
|
|
markNotificationsAsRead();
|
|
});
|
|
|
|
// Chiudi click outside
|
|
document.addEventListener('click', function() {
|
|
notificationDropdown.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
// User Menu
|
|
function initializeUserMenu() {
|
|
const userToggle = document.querySelector('.user-toggle');
|
|
const userDropdown = document.querySelector('.user-dropdown');
|
|
|
|
userToggle.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
userDropdown.classList.toggle('hidden');
|
|
});
|
|
|
|
// Chiudi click outside
|
|
document.addEventListener('click', function() {
|
|
userDropdown.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
// Mobile Menu
|
|
function toggleMobileMenu() {
|
|
const sidebar = document.querySelector('.netgescon-sidebar');
|
|
const overlay = document.querySelector('.mobile-overlay');
|
|
|
|
sidebar.classList.toggle('mobile-open');
|
|
|
|
if (!overlay) {
|
|
createMobileOverlay();
|
|
} else {
|
|
overlay.classList.toggle('hidden');
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 **RESPONSIVE BEHAVIOR**
|
|
|
|
### 🖥️ **Desktop (≥1024px)**
|
|
- Logo completo con testo
|
|
- Search bar visibile e funzionale
|
|
- Tutti i componenti visibili
|
|
- Dropdown menu posizionamento ottimale
|
|
|
|
### 📱 **Tablet (768px - 1023px)**
|
|
- Logo con testo ridotto
|
|
- Search bar ridotta
|
|
- Notifications e user menu compatti
|
|
- Mobile toggle nascosto
|
|
|
|
### 📱 **Mobile (≤767px)**
|
|
- Solo logo icon
|
|
- Search bar nascosta (disponibile in sidebar)
|
|
- Notifications badge only
|
|
- Mobile toggle visibile
|
|
- User menu compatto
|
|
|
|
### 📐 **Breakpoints CSS**
|
|
```css
|
|
/* Mobile First Approach */
|
|
.netgescon-header {
|
|
/* Mobile styles di base */
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.netgescon-header {
|
|
/* Tablet adjustments */
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.netgescon-header {
|
|
/* Desktop full features */
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🔐 **SECURITY & PERMISSIONS**
|
|
|
|
### 🛡️ **Authentication Required**
|
|
```blade
|
|
@auth
|
|
<!-- Header content per utenti autenticati -->
|
|
@else
|
|
<!-- Header minimal per guest -->
|
|
@endauth
|
|
```
|
|
|
|
### 👥 **Role-Based Features**
|
|
```blade
|
|
<!-- Admin-only features -->
|
|
@can('admin-panel')
|
|
<div class="admin-quick-access">
|
|
<!-- Quick admin tools -->
|
|
</div>
|
|
@endcan
|
|
|
|
<!-- Notifications per ruolo -->
|
|
@if(auth()->user()->can('view-notifications'))
|
|
@include('components.header.notifications')
|
|
@endif
|
|
```
|
|
|
|
---
|
|
|
|
## ⚡ **PERFORMANCE OPTIMIZATION**
|
|
|
|
### 🚀 **Loading Strategy**
|
|
1. **CSS Critical** - Inline styles per header immediato
|
|
2. **JavaScript Lazy** - Load componenti on interaction
|
|
3. **Images Optimization** - SVG per logo, WebP per avatar
|
|
4. **Cache Strategy** - Headers cache-friendly
|
|
|
|
### 📊 **Metrics Target**
|
|
- **First Paint:** < 100ms
|
|
- **Interactive:** < 200ms
|
|
- **Smooth Animations:** 60fps
|
|
- **Accessibility Score:** 100/100
|
|
|
|
---
|
|
|
|
## 🧪 **TESTING CHECKLIST**
|
|
|
|
### ✅ **Functional Tests**
|
|
- [ ] Logo click → Homepage redirect
|
|
- [ ] Search → Results display
|
|
- [ ] Notifications → Badge update
|
|
- [ ] User menu → Profile access
|
|
- [ ] Mobile toggle → Sidebar open/close
|
|
|
|
### ✅ **Visual Tests**
|
|
- [ ] Header height consistent (70px)
|
|
- [ ] Gradiente background correct
|
|
- [ ] Icons alignment perfect
|
|
- [ ] Responsive breakpoints working
|
|
- [ ] Hover states smooth
|
|
|
|
### ✅ **Accessibility Tests**
|
|
- [ ] Tab navigation working
|
|
- [ ] Screen reader compatible
|
|
- [ ] Color contrast WCAG AA
|
|
- [ ] Keyboard shortcuts functional
|
|
- [ ] Focus indicators visible
|
|
|
|
---
|
|
|
|
## 🐛 **COMMON ISSUES & FIXES**
|
|
|
|
### 🚨 **Problema:** Header si sovrappone al contenuto
|
|
**Causa:** Z-index conflicts o padding body mancante
|
|
**Fix:**
|
|
```css
|
|
body { padding-top: 70px; }
|
|
.netgescon-header { z-index: 1000; }
|
|
```
|
|
|
|
### 🚨 **Problema:** Logo non carica su mobile
|
|
**Causa:** Path immagine errato o dimensioni eccessive
|
|
**Fix:** Verifica path e ottimizza SVG
|
|
|
|
### 🚨 **Problema:** Search non funziona
|
|
**Causa:** JavaScript non inizializzato o endpoint API mancante
|
|
**Fix:** Verifica console errors e route API
|
|
|
|
### 🚨 **Problema:** Dropdown fuori schermo
|
|
**Causa:** Posizionamento absolute incorrect
|
|
**Fix:** Usa libreria positioning come Popper.js
|
|
|
|
---
|
|
|
|
## 📚 **FILES CORRELATI**
|
|
|
|
### 🎨 **Styles**
|
|
- `/public/css/netgescon-admin.css` - Main styles
|
|
- `/public/css/components/header.css` - Header specific
|
|
|
|
### 🧩 **Templates**
|
|
- `/resources/views/components/layout/header.blade.php` - Main template
|
|
- `/resources/views/components/header/` - Sub-components
|
|
|
|
### ⚡ **JavaScript**
|
|
- `/public/js/netgescon-admin.js` - Main script
|
|
- `/public/js/components/header.js` - Header specific
|
|
|
|
### 🖼️ **Assets**
|
|
- `/public/images/netgescon/logo-white.svg` - Logo principale
|
|
- `/public/images/netgescon/logo-icon.svg` - Logo mobile
|
|
- `/public/images/avatar-default.svg` - Avatar default
|
|
|
|
---
|
|
|
|
## 🎯 **NEXT STEPS**
|
|
|
|
### 🔮 **Planned Improvements**
|
|
- [ ] **Voice Search** - Ricerca vocale
|
|
- [ ] **Quick Actions** - Shortcut frequent actions
|
|
- [ ] **Theme Switcher** - Dark/Light mode toggle
|
|
- [ ] **Multi-language** - Selector lingua
|
|
- [ ] **Advanced Notifications** - Real-time updates
|
|
|
|
---
|
|
|
|
*📝 Documento mantenuto da: GitHub Copilot AI Assistant*
|
|
*🔗 Componente: Header NetGescon Interface v2.1.0*
|