fix(topnav): kein horizontaler Scroller mehr im Desktop-Header
- nav: overflow-x-auto raus, flex-1 raus, kompaktes gap-0.5 - NavBtn: nur Icon (groesser: 16px) auf md/lg, Label erst ab xl (>=1280px) - title-Attribut fuer Tooltip beim Icon-Only-Mode - Trennlinie zwischen Haupt- und Verwaltungs-Items kompakter
This commit is contained in:
@@ -54,13 +54,13 @@ export default function TopNav({ user, activeView, setActiveView, onLogout }) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Desktop Nav */}
|
{/* Desktop Nav */}
|
||||||
<nav className="hidden md:flex items-center gap-1 ml-4 flex-1 overflow-x-auto">
|
<nav className="hidden md:flex items-center gap-0.5 ml-2 lg:ml-4">
|
||||||
{mainItems.map(it => (
|
{mainItems.map(it => (
|
||||||
<NavBtn key={it.view} {...it} active={activeView === it.view} onClick={() => select(it.view)} />
|
<NavBtn key={it.view} {...it} active={activeView === it.view} onClick={() => select(it.view)} />
|
||||||
))}
|
))}
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<>
|
<>
|
||||||
<div className="h-5 w-px bg-slate-200 mx-2 flex-shrink-0" />
|
<div className="h-5 w-px bg-slate-200 mx-1 xl:mx-2 flex-shrink-0" />
|
||||||
{adminItems.map(it => (
|
{adminItems.map(it => (
|
||||||
<NavBtn key={it.view} {...it} active={activeView === it.view} onClick={() => select(it.view)} />
|
<NavBtn key={it.view} {...it} active={activeView === it.view} onClick={() => select(it.view)} />
|
||||||
))}
|
))}
|
||||||
@@ -68,7 +68,7 @@ export default function TopNav({ user, activeView, setActiveView, onLogout }) {
|
|||||||
)}
|
)}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div className="flex-1 md:hidden" />
|
<div className="flex-1" />
|
||||||
|
|
||||||
{/* User Menu */}
|
{/* User Menu */}
|
||||||
<div className="relative flex-shrink-0" ref={menuRef}>
|
<div className="relative flex-shrink-0" ref={menuRef}>
|
||||||
@@ -140,10 +140,11 @@ export default function TopNav({ user, activeView, setActiveView, onLogout }) {
|
|||||||
|
|
||||||
function NavBtn({ icon: Icon, label, active, onClick }) {
|
function NavBtn({ icon: Icon, label, active, onClick }) {
|
||||||
return (
|
return (
|
||||||
<button onClick={onClick}
|
<button onClick={onClick} title={label}
|
||||||
className={`inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition flex-shrink-0
|
className={`inline-flex items-center gap-2 rounded-lg px-2 xl:px-3 py-1.5 text-sm font-medium transition flex-shrink-0
|
||||||
${active ? 'bg-brand-50 text-brand-900' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'}`}>
|
${active ? 'bg-brand-50 text-brand-900' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'}`}>
|
||||||
<Icon size={14} />{label}
|
<Icon size={16} />
|
||||||
|
<span className="hidden xl:inline">{label}</span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user