ocroguennec/crowdlending-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Top Bar petits écrans

Browse Source
This commit is contained in:
Olivier
2026-06-14 17:53:02 +02:00
parent 1bc626e7d5
commit 440f59d86c
2 changed files with 130 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles.css
+63
View File
@@ -240,6 +240,69 @@ a { color: var(--primary); }
}
.btn-add-invest:hover { background: var(--primary-hover); box-shadow: 0 3px 12px rgba(59,130,246,.5); }
/* ── Burger menu topbar ──────────────────────────────────────── */
.topbar-burger-wrap { position: relative; display: none; }
.topbar-burger-btn {
display: flex; align-items: center; justify-content: center;
padding: 0; background: none; border: none;
cursor: pointer; color: var(--text);
transition: color .15s;
}
.topbar-burger-btn:hover { color: var(--primary); }
.topbar-burger-menu {
position: absolute; top: calc(100% + 8px); right: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.10);
min-width: 220px; z-index: 200; padding: 6px;
display: flex; flex-direction: column; gap: 2px;
}
.topbar-burger-item {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; border: none; border-radius: 6px;
background: none; color: var(--text); font-size: var(--fs-base);
font-weight: 600; cursor: pointer; text-align: left; width: 100%;
transition: background .12s;
}
.topbar-burger-item:hover { background: var(--surface-2); }
.topbar-burger-item svg { color: var(--primary); flex-shrink: 0; }
.topbar-burger-search-item {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; border: none; border-radius: 6px;
background: none; color: var(--text-muted); font-size: var(--fs-sm);
cursor: pointer; text-align: left; width: 100%;
transition: background .12s;
}
.topbar-burger-search-item:hover { background: var(--surface-2); }
.topbar-burger-sep { height: 1px; background: var(--border); margin: 2px 0; }
/* Bloc toggle dans le burger */
.topbar-burger-toggle {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 12px 4px;
}
.topbar-burger-toggle-label {
font-size: var(--fs-sm); color: var(--text-muted);
}
/* Tablette : masquer les boutons texte et le toggle, afficher le burger */
@media (max-width: 1100px) {
.topbar-action-btn { display: none !important; }
.topbar-burger-wrap { display: block; }
.topbar-global .topbar-right > .display-toggle { display: none; }
}
/* Mobile : masquer aussi la barre de recherche dans la topbar */
@media (max-width: 640px) {
.topbar-global .project-search-wrap { display: none; }
.topbar-burger-search-item { display: flex; }
}
/* Sur tablette, masquer l'item recherche dans le burger (search reste visible) */
@media (min-width: 641px) and (max-width: 1100px) {
.topbar-burger-search-item,
.topbar-burger-search-item + .topbar-burger-sep { display: none; }
}
/* btn-icon — bouton icône discret (cercle hover) */
.btn-icon {
display: flex; align-items: center; justify-content: center;