refactor: align layout chrome with glass blueprint
AppHeader: - Remove shadcn Button → native 8×8 rounded glass icon buttons - Shrink to h-14 (from h-16) to match sidebar header - Add current tool name breadcrumb (navTitle) next to collapse toggle; shows context when sidebar is collapsed or on mobile AppSidebar: - Remove shadcn Button → native button for mobile close - Sidebar narrows to w-60 (from w-64); matches h-14 header - Active state: slim absolute left-bar (0.5px) replaces harsh border-l-2; bg-primary/10 tint kept; no border on the link itself - Nav item text refined: 13px font-medium title + 9px mono description - Border opacity drops to border-border/20 throughout (from border-border) - Footer: smaller mono text, lighter icon opacity AppPage: - Shrink from py-8 / text-2xl to py-5 / text-lg font-semibold - Icon wrapped in 7×7 glass pill (bg-primary/10) matching tool cards - Description moved inline under title as 10px mono, truncated - border-b border-border/20 separator between header and tool content Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,42 +1,60 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Menu, X, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { useSidebar } from './SidebarProvider';
|
||||
import { getToolByHref } from '@/lib/tools';
|
||||
import Logo from '@/components/Logo';
|
||||
|
||||
const iconBtn =
|
||||
'w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground/50 hover:text-foreground hover:bg-white/5 transition-all';
|
||||
|
||||
export function AppHeader() {
|
||||
const { toggle, isOpen, isCollapsed, toggleCollapse } = useSidebar();
|
||||
const pathname = usePathname();
|
||||
const tool = getToolByHref(pathname);
|
||||
|
||||
return (
|
||||
<header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-6 shadow-[0_1px_3px_0_rgb(0_0_0/0.05)]">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hidden lg:inline-flex text-muted-foreground hover:text-foreground"
|
||||
<header className="h-14 border-b border-border/20 bg-background/8 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 gap-3">
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
{/* Desktop: sidebar collapse toggle */}
|
||||
<button
|
||||
onClick={toggleCollapse}
|
||||
title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
className={cn(iconBtn, 'hidden lg:flex shrink-0')}
|
||||
>
|
||||
{isCollapsed ? (
|
||||
<PanelLeftOpen className="h-5 w-5" />
|
||||
) : (
|
||||
<PanelLeftClose className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
<Link href="/" className="lg:hidden shrink-0 ml-2">
|
||||
<Logo size={24} />
|
||||
{isCollapsed
|
||||
? <PanelLeftOpen className="w-4 h-4" />
|
||||
: <PanelLeftClose className="w-4 h-4" />
|
||||
}
|
||||
</button>
|
||||
|
||||
{/* Mobile: logo home link */}
|
||||
<Link href="/" className="lg:hidden shrink-0">
|
||||
<Logo size={20} />
|
||||
</Link>
|
||||
|
||||
{/* Current tool breadcrumb */}
|
||||
{tool && (
|
||||
<div className="flex items-center gap-1.5 min-w-0 ml-1">
|
||||
<span className="text-border/50 text-xs select-none">/</span>
|
||||
<span className="text-sm text-foreground/60 truncate font-mono">
|
||||
{tool.navTitle}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="lg:hidden text-muted-foreground hover:text-foreground"
|
||||
{/* Mobile: open/close sidebar */}
|
||||
<button
|
||||
onClick={toggle}
|
||||
title={isOpen ? 'Close menu' : 'Open menu'}
|
||||
className={cn(iconBtn, 'lg:hidden shrink-0')}
|
||||
>
|
||||
{isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||
</Button>
|
||||
{isOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,20 +11,31 @@ interface AppPageProps {
|
||||
|
||||
export function AppPage({ title, description, icon: Icon, children, className }: AppPageProps) {
|
||||
return (
|
||||
<div className={cn("min-h-screen py-8", className)}>
|
||||
<div className="max-w-7xl mx-auto px-8 space-y-6 animate-fade-in">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
{Icon && <Icon className="h-6 w-6 text-primary shrink-0" />}
|
||||
<h1 className="text-2xl font-bold">{title}</h1>
|
||||
<div className={cn('min-h-screen', className)}>
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 animate-fade-in">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="py-5 border-b border-border/20 mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
{Icon && (
|
||||
<div className="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<Icon className="w-3.5 h-3.5 text-primary" />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-lg font-semibold text-foreground leading-tight">{title}</h1>
|
||||
{description && (
|
||||
<p className="text-[10px] text-muted-foreground/50 font-mono mt-0.5 truncate">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground max-w-2xl">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
|
||||
<div className="pb-8">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -6,7 +6,6 @@ import { X, GitFork, Heart } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import Logo from '@/components/Logo';
|
||||
import { useSidebar } from './SidebarProvider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { tools } from '@/lib/tools';
|
||||
|
||||
export function AppSidebar() {
|
||||
@@ -15,7 +14,7 @@ export function AppSidebar() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Overlay Backdrop */}
|
||||
{/* Mobile backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-transparent backdrop-blur-sm z-40 lg:hidden"
|
||||
@@ -24,94 +23,100 @@ export function AppSidebar() {
|
||||
)}
|
||||
|
||||
<aside className={cn(
|
||||
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background/10 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
|
||||
isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
|
||||
isCollapsed ? "lg:w-14" : "w-64"
|
||||
'fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border/20 bg-background/10 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full',
|
||||
isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
|
||||
isCollapsed ? 'lg:w-14' : 'w-60'
|
||||
)}>
|
||||
{/* Sidebar Header */}
|
||||
|
||||
{/* Header */}
|
||||
<div className={cn(
|
||||
"flex h-16 items-center shrink-0 border-b border-border",
|
||||
isCollapsed ? "justify-center px-2" : "justify-between px-5"
|
||||
'flex h-14 items-center shrink-0 border-b border-border/20',
|
||||
isCollapsed ? 'justify-center px-2' : 'justify-between px-4'
|
||||
)}>
|
||||
<Link href="/" className={cn(
|
||||
"flex items-center group overflow-hidden",
|
||||
isCollapsed ? "justify-center" : "gap-3"
|
||||
)}>
|
||||
<Link
|
||||
href="/"
|
||||
className={cn(
|
||||
'flex items-center group overflow-hidden',
|
||||
isCollapsed ? 'justify-center' : 'gap-2.5'
|
||||
)}
|
||||
>
|
||||
<div className="shrink-0">
|
||||
<Logo size={isCollapsed ? 20 : 28} />
|
||||
<Logo size={isCollapsed ? 18 : 24} />
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="min-w-0">
|
||||
<span className="font-bold text-lg leading-tight block text-foreground">
|
||||
Kit
|
||||
</span>
|
||||
<span className="text-[10px] leading-tight text-muted-foreground block">
|
||||
<span className="font-semibold text-base leading-tight block text-foreground">Kit</span>
|
||||
<span className="text-[9px] leading-tight text-muted-foreground/50 block font-mono tracking-wider">
|
||||
Browser-first toolkit
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{!isCollapsed && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="lg:hidden text-muted-foreground"
|
||||
<button
|
||||
onClick={close}
|
||||
className="lg:hidden w-7 h-7 flex items-center justify-center rounded-lg text-muted-foreground/40 hover:text-foreground hover:bg-white/5 transition-all"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</Button>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className={cn(
|
||||
"flex-1 overflow-y-auto py-2 space-y-6 mt-4 overflow-hidden scrollbar",
|
||||
isCollapsed ? "px-2" : "px-4"
|
||||
'flex-1 overflow-y-auto py-3 space-y-0.5 scrollbar-thin scrollbar-thumb-primary/10 scrollbar-track-transparent',
|
||||
isCollapsed ? 'px-2' : 'px-3'
|
||||
)}>
|
||||
<div className="space-y-0.5">
|
||||
{tools.map((tool) => {
|
||||
const isActive = pathname === tool.href || (tool.href !== '/' && pathname.startsWith(tool.href));
|
||||
const Icon = tool.icon;
|
||||
{tools.map((tool) => {
|
||||
const isActive = pathname === tool.href || (tool.href !== '/' && pathname.startsWith(tool.href));
|
||||
const Icon = tool.icon;
|
||||
|
||||
return (
|
||||
<div key={tool.href} className="space-y-1">
|
||||
<Link
|
||||
href={tool.href}
|
||||
onClick={() => { if (window.innerWidth < 1024) close(); }}
|
||||
className={cn(
|
||||
"flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300 relative group/item",
|
||||
isActive
|
||||
? "bg-primary/10 text-primary border-l-2 border-primary"
|
||||
: "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
|
||||
isCollapsed ? "justify-center" : "justify-between"
|
||||
)}
|
||||
title={isCollapsed ? tool.navTitle : undefined}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<span className={cn(
|
||||
"transition-colors duration-300 shrink-0",
|
||||
isActive ? "text-primary" : "text-foreground/80 group-hover/item:text-foreground"
|
||||
)}>
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
{!isCollapsed && (
|
||||
<div className="min-w-0">
|
||||
<span className="whitespace-nowrap block">{tool.navTitle}</span>
|
||||
<span className="text-[10px] text-muted-foreground leading-tight block line-clamp-2">{tool.description}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
return (
|
||||
<Link
|
||||
key={tool.href}
|
||||
href={tool.href}
|
||||
onClick={() => { if (window.innerWidth < 1024) close(); }}
|
||||
title={isCollapsed ? tool.navTitle : undefined}
|
||||
className={cn(
|
||||
'relative flex items-center rounded-lg text-sm transition-all duration-200 group/item',
|
||||
isActive
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'text-foreground/55 hover:bg-white/4 hover:text-foreground',
|
||||
isCollapsed ? 'justify-center p-2' : 'gap-3 px-3 py-2'
|
||||
)}
|
||||
>
|
||||
{/* Active left bar */}
|
||||
{isActive && (
|
||||
<span className="absolute left-0 inset-y-2 w-0.5 rounded-r-full bg-primary" />
|
||||
)}
|
||||
|
||||
<span className={cn(
|
||||
'shrink-0 transition-colors duration-200',
|
||||
isActive ? 'text-primary' : 'text-foreground/40 group-hover/item:text-foreground/70'
|
||||
)}>
|
||||
<Icon className="w-4 h-4" />
|
||||
</span>
|
||||
|
||||
{!isCollapsed && (
|
||||
<div className="min-w-0">
|
||||
<span className="whitespace-nowrap block text-[13px] font-medium leading-tight">
|
||||
{tool.navTitle}
|
||||
</span>
|
||||
<span className="text-[9px] text-muted-foreground/40 leading-tight block truncate font-mono mt-0.5">
|
||||
{tool.description}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Sidebar Footer */}
|
||||
{/* Footer */}
|
||||
<div className={cn(
|
||||
"shrink-0 border-t border-border py-3",
|
||||
isCollapsed ? "flex justify-center px-2" : "px-4"
|
||||
'shrink-0 border-t border-border/20 py-3',
|
||||
isCollapsed ? 'flex justify-center px-2' : 'px-4'
|
||||
)}>
|
||||
{isCollapsed ? (
|
||||
<a
|
||||
@@ -119,21 +124,20 @@ export function AppSidebar() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="View source"
|
||||
className="text-muted-foreground hover:text-primary transition-colors duration-300"
|
||||
className="text-muted-foreground/40 hover:text-primary transition-colors"
|
||||
>
|
||||
<GitFork className="h-4 w-4" />
|
||||
<GitFork className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
) : (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="flex items-center gap-1 text-[10px] text-muted-foreground">
|
||||
© {new Date().getFullYear()} Kit.
|
||||
<Heart className="h-2.5 w-2.5 text-primary shrink-0 animate-pulse" fill="currentColor" />
|
||||
<p className="flex items-center gap-1 text-[9px] text-muted-foreground/40 font-mono">
|
||||
© {new Date().getFullYear()} Kit
|
||||
<Heart className="w-2 h-2 text-primary/70 shrink-0 animate-pulse" fill="currentColor" />
|
||||
<a
|
||||
href="https://pivoine.art"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="Pivoine.Art"
|
||||
className="font-medium underline underline-offset-4 decoration-primary/0 hover:decoration-primary transition-all duration-300"
|
||||
className="hover:text-foreground/70 transition-colors"
|
||||
>
|
||||
Valknar
|
||||
</a>
|
||||
@@ -143,14 +147,13 @@ export function AppSidebar() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="View source"
|
||||
className="text-muted-foreground hover:text-primary transition-colors duration-300"
|
||||
className="text-muted-foreground/30 hover:text-primary transition-colors"
|
||||
>
|
||||
<GitFork className="h-3.5 w-3.5" />
|
||||
<GitFork className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user