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;
|
||||
inset: 0;
|
||||
z-index: 950;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -216,7 +217,7 @@ body {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Sidebar
|
||||
Sidebar — iOS frosted glass
|
||||
============================================================ */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
@@ -227,139 +228,198 @@ body {
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg);
|
||||
border-right: 1px solid var(--border);
|
||||
background: color-mix(in srgb, var(--primary) 28%, rgba(6, 6, 18, 0.88));
|
||||
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%);
|
||||
transition: transform var(--transition);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
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 {
|
||||
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 ── */
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1rem 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
gap: 0.75rem;
|
||||
padding: 1.2rem 1rem 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
[data-theme="light"] .sidebar-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.sidebar-brand-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
background: var(--primary-soft);
|
||||
border: 1px solid rgba(139, 92, 246, 0.25);
|
||||
.sidebar-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--primary);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
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 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
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 {
|
||||
margin: 0;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
[data-theme="light"] .sidebar-brand-sub {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
transition: background var(--transition);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
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 {
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="light"] .sidebar-close:hover {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* ── Nav ── */
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem 0.75rem;
|
||||
padding: 14px 12px 8px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.sidebar-nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
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 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
border-top: 0.5px solid rgba(255, 255, 255, 0.07);
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all var(--transition);
|
||||
transition: background 0.12s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-item:hover:not(:disabled) {
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
color: var(--text);
|
||||
.menu-group .menu-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
[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 {
|
||||
background: var(--primary-soft);
|
||||
border-color: rgba(139, 92, 246, 0.2);
|
||||
color: var(--primary);
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
[data-theme="light"] .menu-item.active {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.menu-item:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.menu-item:disabled {
|
||||
@@ -367,6 +427,7 @@ body {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Icon ── */
|
||||
.menu-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -374,90 +435,67 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
font-size: 0.85rem;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
font-size: 0.82rem;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
flex-shrink: 0;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.menu-item.active .menu-icon {
|
||||
background: rgba(139, 92, 246, 0.2);
|
||||
[data-theme="light"] .menu-icon {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
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 {
|
||||
flex: 1;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.menu-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
.menu-item-danger .menu-label {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
[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;
|
||||
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 ── */
|
||||
.sidebar-footer {
|
||||
padding: 0.75rem;
|
||||
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;
|
||||
padding: 8px 12px 16px;
|
||||
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
|
||||
============================================================ */
|
||||
@@ -585,11 +623,11 @@ body {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive
|
||||
Responsive — disable hover states on touch
|
||||
============================================================ */
|
||||
@media (hover: none) {
|
||||
.menu-item:hover { background: transparent; border-color: transparent; color: var(--text-muted); }
|
||||
.menu-item.active:hover { background: var(--primary-soft); color: var(--primary); }
|
||||
.menu-item:hover { background: transparent; }
|
||||
.menu-item.active:hover { background: rgba(255, 255, 255, 0.14); }
|
||||
.topbar-toggle:hover { background: transparent; border-color: transparent; }
|
||||
.topbar-icon-btn:hover { background: transparent; border-color: transparent; }
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
faUserCircle,
|
||||
faSun,
|
||||
faMoon,
|
||||
faChevronRight,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { faTelegram } from "@fortawesome/free-brands-svg-icons";
|
||||
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
@@ -107,14 +108,17 @@ function Navbar() {
|
||||
|
||||
const closeNotifPanel = () => setShowNotifPanel(false);
|
||||
|
||||
const menuItems: MenuItem[] = [
|
||||
{ id: "accueil", label: "Accueil", icon: faHome, path: "/user/accueil" },
|
||||
{ id: "produits", label: "Nos Produits", icon: faBox, path: "/user/nos-produits" },
|
||||
{ id: "panier", label: "Mon Panier", icon: faShoppingCart, path: "/user/panier" },
|
||||
{ id: "suivi", label: "Suivi Livraison", icon: faTruck, path: "/user/suivi-livraison" },
|
||||
{ id: "historique", label: "Historique", icon: faClockRotateLeft, path: "/user/consultation-historique" },
|
||||
const navItems: MenuItem[] = [
|
||||
{ id: "accueil", label: "Accueil", icon: faHome, path: "/user/accueil" },
|
||||
{ id: "produits", label: "Nos Produits", icon: faBox, path: "/user/nos-produits" },
|
||||
{ id: "panier", label: "Mon Panier", icon: faShoppingCart, path: "/user/panier" },
|
||||
{ id: "suivi", label: "Suivi Livraison", icon: faTruck, path: "/user/suivi-livraison" },
|
||||
];
|
||||
|
||||
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] : []),
|
||||
{ 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);
|
||||
@@ -155,6 +159,24 @@ function Navbar() {
|
||||
|
||||
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 (
|
||||
<>
|
||||
{/* ── Top Bar ─────────────────────────────────── */}
|
||||
@@ -170,7 +192,6 @@ function Navbar() {
|
||||
<span className="topbar-brand">{shopName}</span>
|
||||
|
||||
<div className="topbar-actions">
|
||||
{/* Theme toggle */}
|
||||
<button
|
||||
className="topbar-theme-btn"
|
||||
onClick={toggleTheme}
|
||||
@@ -179,7 +200,6 @@ function Navbar() {
|
||||
<FontAwesomeIcon icon={theme === "dark" ? faSun : faMoon} />
|
||||
</button>
|
||||
|
||||
{/* Notifications */}
|
||||
<button
|
||||
className="topbar-icon-btn"
|
||||
onClick={handleNotifBellClick}
|
||||
@@ -193,7 +213,6 @@ function Navbar() {
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Panier */}
|
||||
<button
|
||||
className="topbar-icon-btn"
|
||||
onClick={() => navigate("/user/panier")}
|
||||
@@ -242,63 +261,51 @@ function Navbar() {
|
||||
{/* ── Overlay ─────────────────────────────────── */}
|
||||
{isMenuOpen && <div className="sidebar-overlay" onClick={closeMenu} />}
|
||||
|
||||
{/* ── Sidebar ─────────────────────────────────── */}
|
||||
{/* ── Sidebar iOS-style ───────────────────────── */}
|
||||
<aside className={`sidebar ${isMenuOpen ? "open" : ""}`}>
|
||||
|
||||
{/* Header */}
|
||||
<div className="sidebar-header">
|
||||
<div className="sidebar-brand">
|
||||
<div className="sidebar-brand-icon">
|
||||
<FontAwesomeIcon icon={faShoppingCart} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="sidebar-brand-name">{shopName}</p>
|
||||
<p className="sidebar-brand-sub">Mon espace</p>
|
||||
</div>
|
||||
<div className="sidebar-avatar">
|
||||
<FontAwesomeIcon icon={faShoppingCart} />
|
||||
</div>
|
||||
<div className="sidebar-header-info">
|
||||
<p className="sidebar-brand-name">{shopName}</p>
|
||||
<p className="sidebar-brand-sub">Mon espace</p>
|
||||
</div>
|
||||
<button className="sidebar-close" onClick={closeMenu} aria-label="Fermer">
|
||||
<FontAwesomeIcon icon={faTimes} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Nav */}
|
||||
<nav className="sidebar-nav">
|
||||
<ul className="menu-list">
|
||||
{menuItems.map((item) => {
|
||||
const isActive = location.pathname === item.path;
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<button
|
||||
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>
|
||||
<div className="menu-group">
|
||||
{navItems.map(renderItem)}
|
||||
</div>
|
||||
<div className="menu-group">
|
||||
{accountItems.map(renderItem)}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="sidebar-footer">
|
||||
<button
|
||||
className="sidebar-footer-btn telegram"
|
||||
onClick={handleTelegram}
|
||||
disabled={isLoggingOut}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTelegram} />
|
||||
<span>Telegram</span>
|
||||
</button>
|
||||
<button
|
||||
className="sidebar-footer-btn logout"
|
||||
onClick={handleLogout}
|
||||
disabled={isLoggingOut}
|
||||
>
|
||||
<FontAwesomeIcon icon={faSignOutAlt} />
|
||||
<span>{isLoggingOut ? "Déconnexion…" : "Déconnexion"}</span>
|
||||
</button>
|
||||
<div className="menu-group">
|
||||
<button className="menu-item" onClick={handleTelegram} disabled={isLoggingOut}>
|
||||
<span className="menu-icon icon-telegram">
|
||||
<FontAwesomeIcon icon={faTelegram} />
|
||||
</span>
|
||||
<span className="menu-label">Telegram</span>
|
||||
<FontAwesomeIcon icon={faChevronRight} className="menu-chevron" />
|
||||
</button>
|
||||
<button className="menu-item menu-item-danger" onClick={handleLogout} disabled={isLoggingOut}>
|
||||
<span className="menu-icon icon-danger">
|
||||
<FontAwesomeIcon icon={faSignOutAlt} />
|
||||
</span>
|
||||
<span className="menu-label">{isLoggingOut ? "Déconnexion…" : "Déconnexion"}</span>
|
||||
<FontAwesomeIcon icon={faChevronRight} className="menu-chevron" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user