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:
christian
2026-05-26 14:44:58 +00:00
parent 261357a44e
commit a4794dc60c

View File

@@ -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>
); );
} }