Evenly space admin portal tab navigation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-11 02:59:23 +08:00
parent 84b3083987
commit 98ad83ae5f

View File

@ -19,7 +19,7 @@ export default function AdminPortal() {
{/* Portal header with tab navigation */} {/* Portal header with tab navigation */}
<div className="shrink-0 border-b bg-card overflow-hidden"> <div className="shrink-0 border-b bg-card overflow-hidden">
<div className="px-3 md:px-6 h-14 md:h-16 flex items-center gap-2 md:gap-4"> <div className="px-3 md:px-6 h-14 md:h-16 flex items-center gap-2 md:gap-4">
<div className="flex items-center gap-2 mr-2 md:mr-6 shrink-0"> <div className="flex items-center gap-2 shrink-0">
<div className="p-1.5 rounded-md bg-red-500/10"> <div className="p-1.5 rounded-md bg-red-500/10">
<ShieldCheck className="h-5 w-5 text-red-400" /> <ShieldCheck className="h-5 w-5 text-red-400" />
</div> </div>
@ -27,7 +27,7 @@ export default function AdminPortal() {
</div> </div>
{/* Horizontal tab navigation */} {/* Horizontal tab navigation */}
<nav className="flex items-center gap-1 h-full min-w-0 overflow-x-auto"> <nav className="flex items-center justify-evenly flex-1 h-full min-w-0 overflow-x-auto">
{tabs.map(({ label, path, icon: Icon }) => { {tabs.map(({ label, path, icon: Icon }) => {
const isActive = location.pathname.startsWith(path); const isActive = location.pathname.startsWith(path);
return ( return (
@ -36,7 +36,7 @@ export default function AdminPortal() {
to={path} to={path}
title={label} title={label}
className={cn( className={cn(
'flex items-center gap-1.5 px-2.5 md:px-4 h-full text-sm font-medium transition-colors duration-150 border-b-2 -mb-px whitespace-nowrap', 'flex items-center justify-center gap-1.5 px-2.5 md:px-4 h-full text-sm font-medium transition-colors duration-150 border-b-2 -mb-px whitespace-nowrap',
isActive isActive
? 'text-accent border-accent' ? 'text-accent border-accent'
: 'text-muted-foreground hover:text-foreground border-transparent' : 'text-muted-foreground hover:text-foreground border-transparent'