style(header): proto2 chrome and spacing
This commit is contained in:
+13
-13
@@ -91,9 +91,9 @@ export function Header() {
|
|||||||
: "/settings"
|
: "/settings"
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-md supports-[backdrop-filter]:bg-background/60">
|
||||||
<div className="container mx-auto grid h-14 grid-cols-[1fr_auto_1fr] items-center gap-4 px-4">
|
<div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-6">
|
||||||
<Link href="/" className="flex items-center gap-2 font-bold text-lg shrink-0">
|
<Link href="/" className="flex items-center gap-2 font-bold text-lg shrink-0">
|
||||||
<Gamepad2 className="h-5 w-5" />
|
<Gamepad2 className="h-5 w-5" />
|
||||||
聚玩
|
聚玩
|
||||||
@@ -105,9 +105,9 @@ export function Header() {
|
|||||||
key={link.href}
|
key={link.href}
|
||||||
href={link.href}
|
href={link.href}
|
||||||
className={cn(
|
className={cn(
|
||||||
"px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
"px-3 py-1.5 rounded-full text-sm font-medium transition-colors",
|
||||||
pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href))
|
pathname === link.href || (link.href !== "/" && pathname.startsWith(link.href))
|
||||||
? "bg-accent text-accent-foreground"
|
? "bg-primary/10 text-primary"
|
||||||
: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
|
: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -121,7 +121,7 @@ export function Header() {
|
|||||||
<>
|
<>
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="outline" size="sm" className="hidden md:flex text-xs h-8">
|
<Button variant="ghost" size="sm" className="hidden md:flex text-xs h-8 text-muted-foreground hover:text-foreground">
|
||||||
{roleLabels[currentRole]}
|
{roleLabels[currentRole]}
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
@@ -140,7 +140,7 @@ export function Header() {
|
|||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|
||||||
<Button variant="ghost" size="icon" className="relative h-9 w-9" asChild>
|
<Button variant="ghost" size="icon" className="relative h-9 w-9 text-muted-foreground hover:text-foreground" asChild>
|
||||||
<Link href="/notifications">
|
<Link href="/notifications">
|
||||||
<Bell className="h-4 w-4" />
|
<Bell className="h-4 w-4" />
|
||||||
{unreadCount > 0 && (
|
{unreadCount > 0 && (
|
||||||
@@ -153,7 +153,7 @@ export function Header() {
|
|||||||
|
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" size="icon" className="rounded-full h-9 w-9">
|
<Button variant="ghost" size="icon" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground">
|
||||||
<Avatar className="h-7 w-7">
|
<Avatar className="h-7 w-7">
|
||||||
<AvatarImage src={user?.avatar} />
|
<AvatarImage src={user?.avatar} />
|
||||||
<AvatarFallback>{user?.nickname?.[0] ?? "?"}</AvatarFallback>
|
<AvatarFallback>{user?.nickname?.[0] ?? "?"}</AvatarFallback>
|
||||||
@@ -224,7 +224,7 @@ export function Header() {
|
|||||||
|
|
||||||
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
||||||
<SheetTrigger asChild>
|
<SheetTrigger asChild>
|
||||||
<Button variant="ghost" size="icon" className="md:hidden h-9 w-9">
|
<Button variant="ghost" size="icon" className="md:hidden h-9 w-9 text-muted-foreground hover:text-foreground">
|
||||||
<Menu className="h-5 w-5" />
|
<Menu className="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</SheetTrigger>
|
</SheetTrigger>
|
||||||
@@ -256,10 +256,10 @@ export function Header() {
|
|||||||
href={link.href}
|
href={link.href}
|
||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
"px-3 py-2 rounded-full text-sm font-medium transition-colors",
|
||||||
pathname === link.href ||
|
pathname === link.href ||
|
||||||
(link.href !== "/" && pathname.startsWith(link.href))
|
(link.href !== "/" && pathname.startsWith(link.href))
|
||||||
? "bg-accent text-accent-foreground"
|
? "bg-primary/10 text-primary"
|
||||||
: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
|
: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -271,14 +271,14 @@ export function Header() {
|
|||||||
<Link
|
<Link
|
||||||
href="/wallet"
|
href="/wallet"
|
||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className="px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
className="px-3 py-2 rounded-full text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
||||||
>
|
>
|
||||||
钱包
|
钱包
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/settings"
|
href="/settings"
|
||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className="px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
className="px-3 py-2 rounded-full text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
||||||
>
|
>
|
||||||
设置
|
设置
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Reference in New Issue
Block a user