feat: redesign sidebar with iOS frosted glass style
Frontend Web - Build & Lint / build (push) Has been cancelled
Frontend Web - Build & Lint / build (push) Has been cancelled
- Background: primary color + dark/light bg mixed with blur(50px) saturate(180%) - Menu items split in two groups (nav / account) as iOS-style cards - Inset separators, chevrons on each item, no border/outline on buttons - Active item: primary color icon background with glow - Telegram/Logout unified as menu-group in footer - Light mode: white frosted background with dark text Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.6
@@ -205,8 +205,9 @@ body {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 950;
|
z-index: 950;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.45);
|
||||||
backdrop-filter: blur(2px);
|
backdrop-filter: blur(4px);
|
||||||
|
-webkit-backdrop-filter: blur(4px);
|
||||||
animation: fadeIn 0.2s ease;
|
animation: fadeIn 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -216,7 +217,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
Sidebar
|
Sidebar — iOS frosted glass
|
||||||
============================================================ */
|
============================================================ */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -227,139 +228,198 @@ body {
|
|||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: var(--bg);
|
background: color-mix(in srgb, var(--primary) 28%, rgba(6, 6, 18, 0.88));
|
||||||
border-right: 1px solid var(--border);
|
backdrop-filter: blur(50px) saturate(180%);
|
||||||
|
-webkit-backdrop-filter: blur(50px) saturate(180%);
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
transition: transform var(--transition);
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .sidebar {
|
||||||
|
background: color-mix(in srgb, var(--primary) 14%, rgba(245, 242, 255, 0.92));
|
||||||
|
border-right-color: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar.open {
|
.sidebar.open {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
box-shadow: 4px 0 40px rgba(0, 0, 0, 0.6);
|
box-shadow: 8px 0 60px rgba(0, 0, 0, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Header ── */
|
/* ── Header ── */
|
||||||
.sidebar-header {
|
.sidebar-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
gap: 0.75rem;
|
||||||
padding: 1.25rem 1rem 1rem;
|
padding: 1.2rem 1rem 1rem;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-brand {
|
[data-theme="light"] .sidebar-header {
|
||||||
display: flex;
|
border-bottom-color: rgba(0, 0, 0, 0.07);
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-brand-icon {
|
.sidebar-avatar {
|
||||||
width: 38px;
|
width: 40px;
|
||||||
height: 38px;
|
height: 40px;
|
||||||
border-radius: 10px;
|
border-radius: 12px;
|
||||||
background: var(--primary-soft);
|
background: rgba(255, 255, 255, 0.18);
|
||||||
border: 1px solid rgba(139, 92, 246, 0.25);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: var(--primary);
|
color: #fff;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .sidebar-avatar {
|
||||||
|
background: rgba(255, 255, 255, 0.55);
|
||||||
|
color: var(--primary);
|
||||||
|
border-color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-header-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-brand-name {
|
.sidebar-brand-name {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0.95rem;
|
font-size: 0.92rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text);
|
color: rgba(255, 255, 255, 0.95);
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .sidebar-brand-name {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-brand-sub {
|
.sidebar-brand-sub {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0.72rem;
|
font-size: 0.7rem;
|
||||||
color: var(--text-muted);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .sidebar-brand-sub {
|
||||||
|
color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-close {
|
.sidebar-close {
|
||||||
width: 34px;
|
width: 30px;
|
||||||
height: 34px;
|
height: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: transparent;
|
background: rgba(255, 255, 255, 0.12);
|
||||||
border: 1px solid var(--border);
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 50%;
|
||||||
color: var(--text-muted);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
font-size: 0.85rem;
|
font-size: 0.8rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all var(--transition);
|
transition: background var(--transition);
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .sidebar-close {
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-close:hover {
|
.sidebar-close:hover {
|
||||||
background: var(--surface-2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
color: var(--text);
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .sidebar-close:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.12);
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Nav ── */
|
/* ── Nav ── */
|
||||||
.sidebar-nav {
|
.sidebar-nav {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 0.75rem 0.75rem;
|
padding: 14px 12px 8px;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-nav::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-list {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-nav::-webkit-scrollbar { display: none; }
|
||||||
|
|
||||||
|
/* ── iOS card groups ── */
|
||||||
|
.menu-group {
|
||||||
|
background: rgba(255, 255, 255, 0.09);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .menu-group {
|
||||||
|
background: rgba(255, 255, 255, 0.58);
|
||||||
|
border-color: rgba(255, 255, 255, 0.8);
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Menu items ── */
|
||||||
.menu-item {
|
.menu-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.85rem;
|
gap: 12px;
|
||||||
padding: 0.7rem 0.9rem;
|
padding: 12px 14px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid transparent;
|
border: none;
|
||||||
border-radius: var(--radius);
|
border-top: 0.5px solid rgba(255, 255, 255, 0.07);
|
||||||
color: var(--text-muted);
|
color: rgba(255, 255, 255, 0.88);
|
||||||
font-size: 0.9rem;
|
font-size: 0.92rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
transition: all var(--transition);
|
transition: background 0.12s ease;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item:hover:not(:disabled) {
|
.menu-group .menu-item:first-child {
|
||||||
background: var(--surface);
|
border-top: none;
|
||||||
border-color: var(--border);
|
}
|
||||||
color: var(--text);
|
|
||||||
|
[data-theme="light"] .menu-item {
|
||||||
|
color: rgba(0, 0, 0, 0.82);
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:hover:not(:disabled),
|
||||||
|
.menu-item:focus-visible {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .menu-item:hover:not(:disabled) {
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item.active {
|
.menu-item.active {
|
||||||
background: var(--primary-soft);
|
background: rgba(255, 255, 255, 0.14);
|
||||||
border-color: rgba(139, 92, 246, 0.2);
|
}
|
||||||
color: var(--primary);
|
|
||||||
|
[data-theme="light"] .menu-item.active {
|
||||||
|
background: rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item:active:not(:disabled) {
|
.menu-item:active:not(:disabled) {
|
||||||
transform: scale(0.98);
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
transform: scale(0.99);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item:disabled {
|
.menu-item:disabled {
|
||||||
@@ -367,6 +427,7 @@ body {
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Icon ── */
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
@@ -374,90 +435,67 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: var(--surface);
|
background: rgba(255, 255, 255, 0.15);
|
||||||
font-size: 0.85rem;
|
font-size: 0.82rem;
|
||||||
|
color: rgba(255, 255, 255, 0.92);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
transition: all var(--transition);
|
transition: all var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item.active .menu-icon {
|
[data-theme="light"] .menu-icon {
|
||||||
background: rgba(139, 92, 246, 0.2);
|
background: rgba(255, 255, 255, 0.7);
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-item.active .menu-icon {
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 55%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon.icon-telegram { color: #22d3ee; }
|
||||||
|
.menu-icon.icon-danger { color: #f87171; }
|
||||||
|
|
||||||
|
[data-theme="light"] .menu-icon.icon-telegram { color: #0891b2; }
|
||||||
|
[data-theme="light"] .menu-icon.icon-danger { color: var(--red); }
|
||||||
|
|
||||||
|
/* ── Label ── */
|
||||||
.menu-label {
|
.menu-label {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-dot {
|
.menu-item-danger .menu-label {
|
||||||
width: 6px;
|
color: #f87171;
|
||||||
height: 6px;
|
}
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--primary);
|
[data-theme="light"] .menu-item-danger .menu-label {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Chevron ── */
|
||||||
|
.menu-chevron {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
color: rgba(255, 255, 255, 0.28);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
box-shadow: 0 0 8px var(--primary-glow);
|
transition: transform var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .menu-chevron {
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item.active .menu-chevron {
|
||||||
|
color: rgba(255, 255, 255, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Footer ── */
|
/* ── Footer ── */
|
||||||
.sidebar-footer {
|
.sidebar-footer {
|
||||||
padding: 0.75rem;
|
padding: 8px 12px 16px;
|
||||||
border-top: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
|
|
||||||
background: color-mix(in srgb, var(--primary) 8%, var(--bg));
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-footer-btn {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.6rem;
|
|
||||||
padding: 0.7rem 1rem;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
font-size: 0.88rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all var(--transition);
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-footer-btn:disabled {
|
|
||||||
opacity: 0.45;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-footer-btn.telegram {
|
|
||||||
background: var(--cyan-soft);
|
|
||||||
border: 1px solid rgba(34, 211, 238, 0.2);
|
|
||||||
color: var(--cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-footer-btn.telegram:hover:not(:disabled) {
|
|
||||||
background: rgba(34, 211, 238, 0.15);
|
|
||||||
border-color: rgba(34, 211, 238, 0.35);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 16px rgba(34, 211, 238, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-footer-btn.logout {
|
|
||||||
background: rgba(239, 68, 68, 0.08);
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.18);
|
|
||||||
color: #f87171;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-footer-btn.logout:hover:not(:disabled) {
|
|
||||||
background: rgba(239, 68, 68, 0.13);
|
|
||||||
border-color: rgba(239, 68, 68, 0.3);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-footer-btn:active:not(:disabled) {
|
|
||||||
transform: scale(0.97);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
Notification bottom-sheet modal
|
Notification bottom-sheet modal
|
||||||
============================================================ */
|
============================================================ */
|
||||||
@@ -585,11 +623,11 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
Responsive
|
Responsive — disable hover states on touch
|
||||||
============================================================ */
|
============================================================ */
|
||||||
@media (hover: none) {
|
@media (hover: none) {
|
||||||
.menu-item:hover { background: transparent; border-color: transparent; color: var(--text-muted); }
|
.menu-item:hover { background: transparent; }
|
||||||
.menu-item.active:hover { background: var(--primary-soft); color: var(--primary); }
|
.menu-item.active:hover { background: rgba(255, 255, 255, 0.14); }
|
||||||
.topbar-toggle:hover { background: transparent; border-color: transparent; }
|
.topbar-toggle:hover { background: transparent; border-color: transparent; }
|
||||||
.topbar-icon-btn:hover { background: transparent; border-color: transparent; }
|
.topbar-icon-btn:hover { background: transparent; border-color: transparent; }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ import {
|
|||||||
faUserCircle,
|
faUserCircle,
|
||||||
faSun,
|
faSun,
|
||||||
faMoon,
|
faMoon,
|
||||||
|
faChevronRight,
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
import { faTelegram } from "@fortawesome/free-brands-svg-icons";
|
import { faTelegram } from "@fortawesome/free-brands-svg-icons";
|
||||||
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||||
@@ -107,14 +108,17 @@ function Navbar() {
|
|||||||
|
|
||||||
const closeNotifPanel = () => setShowNotifPanel(false);
|
const closeNotifPanel = () => setShowNotifPanel(false);
|
||||||
|
|
||||||
const menuItems: MenuItem[] = [
|
const navItems: MenuItem[] = [
|
||||||
{ id: "accueil", label: "Accueil", icon: faHome, path: "/user/accueil" },
|
{ id: "accueil", label: "Accueil", icon: faHome, path: "/user/accueil" },
|
||||||
{ id: "produits", label: "Nos Produits", icon: faBox, path: "/user/nos-produits" },
|
{ id: "produits", label: "Nos Produits", icon: faBox, path: "/user/nos-produits" },
|
||||||
{ id: "panier", label: "Mon Panier", icon: faShoppingCart, path: "/user/panier" },
|
{ id: "panier", label: "Mon Panier", icon: faShoppingCart, path: "/user/panier" },
|
||||||
{ id: "suivi", label: "Suivi Livraison", icon: faTruck, path: "/user/suivi-livraison" },
|
{ id: "suivi", label: "Suivi Livraison", icon: faTruck, path: "/user/suivi-livraison" },
|
||||||
{ id: "historique", label: "Historique", icon: faClockRotateLeft, path: "/user/consultation-historique" },
|
];
|
||||||
|
|
||||||
|
const accountItems: MenuItem[] = [
|
||||||
|
{ id: "historique", label: "Historique", icon: faClockRotateLeft, path: "/user/consultation-historique" },
|
||||||
...(referralEnabled ? [{ id: "parrainage", label: "Parrainage", icon: faGift, path: "/user/parrainage" } as MenuItem] : []),
|
...(referralEnabled ? [{ id: "parrainage", label: "Parrainage", icon: faGift, path: "/user/parrainage" } as MenuItem] : []),
|
||||||
{ id: "profil", label: "Mon Profil", icon: faUserCircle, path: "/user/profil" },
|
{ id: "profil", label: "Mon Profil", icon: faUserCircle, path: "/user/profil" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const toggleMenu = () => setIsMenuOpen((v) => !v);
|
const toggleMenu = () => setIsMenuOpen((v) => !v);
|
||||||
@@ -155,6 +159,24 @@ function Navbar() {
|
|||||||
|
|
||||||
const handleTelegram = () => window.open("https://t.me/milieu_nantais", "_blank");
|
const handleTelegram = () => window.open("https://t.me/milieu_nantais", "_blank");
|
||||||
|
|
||||||
|
const renderItem = (item: MenuItem) => {
|
||||||
|
const isActive = location.pathname === item.path;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
className={`menu-item ${isActive ? "active" : ""}`}
|
||||||
|
onClick={() => handleNavigation(item.path)}
|
||||||
|
disabled={isLoggingOut}
|
||||||
|
>
|
||||||
|
<span className="menu-icon">
|
||||||
|
<FontAwesomeIcon icon={item.icon} />
|
||||||
|
</span>
|
||||||
|
<span className="menu-label">{item.label}</span>
|
||||||
|
<FontAwesomeIcon icon={faChevronRight} className="menu-chevron" />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* ── Top Bar ─────────────────────────────────── */}
|
{/* ── Top Bar ─────────────────────────────────── */}
|
||||||
@@ -170,7 +192,6 @@ function Navbar() {
|
|||||||
<span className="topbar-brand">{shopName}</span>
|
<span className="topbar-brand">{shopName}</span>
|
||||||
|
|
||||||
<div className="topbar-actions">
|
<div className="topbar-actions">
|
||||||
{/* Theme toggle */}
|
|
||||||
<button
|
<button
|
||||||
className="topbar-theme-btn"
|
className="topbar-theme-btn"
|
||||||
onClick={toggleTheme}
|
onClick={toggleTheme}
|
||||||
@@ -179,7 +200,6 @@ function Navbar() {
|
|||||||
<FontAwesomeIcon icon={theme === "dark" ? faSun : faMoon} />
|
<FontAwesomeIcon icon={theme === "dark" ? faSun : faMoon} />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Notifications */}
|
|
||||||
<button
|
<button
|
||||||
className="topbar-icon-btn"
|
className="topbar-icon-btn"
|
||||||
onClick={handleNotifBellClick}
|
onClick={handleNotifBellClick}
|
||||||
@@ -193,7 +213,6 @@ function Navbar() {
|
|||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Panier */}
|
|
||||||
<button
|
<button
|
||||||
className="topbar-icon-btn"
|
className="topbar-icon-btn"
|
||||||
onClick={() => navigate("/user/panier")}
|
onClick={() => navigate("/user/panier")}
|
||||||
@@ -242,63 +261,51 @@ function Navbar() {
|
|||||||
{/* ── Overlay ─────────────────────────────────── */}
|
{/* ── Overlay ─────────────────────────────────── */}
|
||||||
{isMenuOpen && <div className="sidebar-overlay" onClick={closeMenu} />}
|
{isMenuOpen && <div className="sidebar-overlay" onClick={closeMenu} />}
|
||||||
|
|
||||||
{/* ── Sidebar ─────────────────────────────────── */}
|
{/* ── Sidebar iOS-style ───────────────────────── */}
|
||||||
<aside className={`sidebar ${isMenuOpen ? "open" : ""}`}>
|
<aside className={`sidebar ${isMenuOpen ? "open" : ""}`}>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
<div className="sidebar-header">
|
<div className="sidebar-header">
|
||||||
<div className="sidebar-brand">
|
<div className="sidebar-avatar">
|
||||||
<div className="sidebar-brand-icon">
|
<FontAwesomeIcon icon={faShoppingCart} />
|
||||||
<FontAwesomeIcon icon={faShoppingCart} />
|
</div>
|
||||||
</div>
|
<div className="sidebar-header-info">
|
||||||
<div>
|
<p className="sidebar-brand-name">{shopName}</p>
|
||||||
<p className="sidebar-brand-name">{shopName}</p>
|
<p className="sidebar-brand-sub">Mon espace</p>
|
||||||
<p className="sidebar-brand-sub">Mon espace</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<button className="sidebar-close" onClick={closeMenu} aria-label="Fermer">
|
<button className="sidebar-close" onClick={closeMenu} aria-label="Fermer">
|
||||||
<FontAwesomeIcon icon={faTimes} />
|
<FontAwesomeIcon icon={faTimes} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Nav */}
|
||||||
<nav className="sidebar-nav">
|
<nav className="sidebar-nav">
|
||||||
<ul className="menu-list">
|
<div className="menu-group">
|
||||||
{menuItems.map((item) => {
|
{navItems.map(renderItem)}
|
||||||
const isActive = location.pathname === item.path;
|
</div>
|
||||||
return (
|
<div className="menu-group">
|
||||||
<li key={item.id}>
|
{accountItems.map(renderItem)}
|
||||||
<button
|
</div>
|
||||||
className={`menu-item ${isActive ? "active" : ""}`}
|
|
||||||
onClick={() => handleNavigation(item.path)}
|
|
||||||
disabled={isLoggingOut}
|
|
||||||
>
|
|
||||||
<span className="menu-icon">
|
|
||||||
<FontAwesomeIcon icon={item.icon} />
|
|
||||||
</span>
|
|
||||||
<span className="menu-label">{item.label}</span>
|
|
||||||
{isActive && <span className="menu-dot" />}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
<div className="sidebar-footer">
|
<div className="sidebar-footer">
|
||||||
<button
|
<div className="menu-group">
|
||||||
className="sidebar-footer-btn telegram"
|
<button className="menu-item" onClick={handleTelegram} disabled={isLoggingOut}>
|
||||||
onClick={handleTelegram}
|
<span className="menu-icon icon-telegram">
|
||||||
disabled={isLoggingOut}
|
<FontAwesomeIcon icon={faTelegram} />
|
||||||
>
|
</span>
|
||||||
<FontAwesomeIcon icon={faTelegram} />
|
<span className="menu-label">Telegram</span>
|
||||||
<span>Telegram</span>
|
<FontAwesomeIcon icon={faChevronRight} className="menu-chevron" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button className="menu-item menu-item-danger" onClick={handleLogout} disabled={isLoggingOut}>
|
||||||
className="sidebar-footer-btn logout"
|
<span className="menu-icon icon-danger">
|
||||||
onClick={handleLogout}
|
<FontAwesomeIcon icon={faSignOutAlt} />
|
||||||
disabled={isLoggingOut}
|
</span>
|
||||||
>
|
<span className="menu-label">{isLoggingOut ? "Déconnexion…" : "Déconnexion"}</span>
|
||||||
<FontAwesomeIcon icon={faSignOutAlt} />
|
<FontAwesomeIcon icon={faChevronRight} className="menu-chevron" />
|
||||||
<span>{isLoggingOut ? "Déconnexion…" : "Déconnexion"}</span>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user