Simplify header dropdown menu with streamlined list-based layout, remove card-based design, and reduce visual complexity with cleaner styling

This commit is contained in:
2026-03-22 00:41:45 -04:00
parent 1e7c8dd6a8
commit fd11827977
2 changed files with 96 additions and 160 deletions
+28 -42
View File
@@ -88,50 +88,36 @@
<i data-lucide="settings" style="width:18px;height:18px"></i>
</button>
<div class="header-menu-dropdown" id="header-menu-dropdown">
<div class="menu-overview">
<div class="menu-overview-badge">⚙️ Réglages rapides</div>
<div class="menu-overview-title">Personnalisez votre espace</div>
<div class="menu-overview-subtitle">Vault actif, thème et guide d'utilisation en un seul endroit.</div>
</div>
<div class="menu-section">
<div class="menu-label">Vault</div>
<div class="menu-field-card">
<div class="menu-field-icon">🗂️</div>
<div class="menu-field-body">
<div class="menu-field-title">Contexte de navigation</div>
<select id="vault-filter" class="menu-select">
<div class="menu-list" role="menu" aria-label="Options">
<label class="menu-list-row menu-list-select-row" for="vault-filter">
<span class="menu-list-icon" aria-hidden="true">
<i data-lucide="folders" style="width:17px;height:17px"></i>
</span>
<span class="menu-list-content">
<span class="menu-list-title">Vault</span>
<select id="vault-filter" class="menu-select menu-list-select">
<option value="all">Tous les vaults</option>
</select>
</div>
</div>
</div>
<div class="menu-divider"></div>
<div class="menu-section">
<div class="menu-label">Thème</div>
<div class="menu-field-card">
<div class="menu-field-icon">🌗</div>
<div class="menu-field-body">
<div class="menu-field-title">Apparence</div>
<button class="menu-theme-btn" id="theme-toggle">
<i data-lucide="sun" style="width:16px;height:16px"></i>
<span id="theme-label">Clair</span>
</button>
</div>
</div>
</div>
<div class="menu-divider"></div>
<div class="menu-section">
<div class="menu-label">Aide</div>
<div class="menu-field-card">
<div class="menu-field-icon">💡</div>
<div class="menu-field-body">
<div class="menu-field-title">Documentation intégrée</div>
<button class="menu-theme-btn" id="help-open-btn">
<i data-lucide="circle-help" style="width:16px;height:16px"></i>
<span>Ouvrir l'aide</span>
</button>
</div>
</div>
</span>
</label>
<button class="menu-list-row menu-list-button" id="theme-toggle" type="button" role="menuitem">
<span class="menu-list-icon" aria-hidden="true">
<i data-lucide="sun" style="width:17px;height:17px"></i>
</span>
<span class="menu-list-content">
<span class="menu-list-title">Thème</span>
<span class="menu-list-subtitle" id="theme-label">Clair</span>
</span>
</button>
<button class="menu-list-row menu-list-button" id="help-open-btn" type="button" role="menuitem">
<span class="menu-list-icon" aria-hidden="true">
<i data-lucide="circle-help" style="width:17px;height:17px"></i>
</span>
<span class="menu-list-content">
<span class="menu-list-title">Guide d'utilisation</span>
<span class="menu-list-subtitle">Ouvrir l'aide</span>
</span>
</button>
</div>
</div>
</div>