valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: align layout chrome with glass blueprint

Browse Source 
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:
Sebastian Krüger
2026-03-01 08:58:33 +01:00
parent 002fa037b7
commit 413c677173
3 changed files with 140 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
components/layout/AppHeader.tsx
View File

@@ -1,42 +1,60 @@
'use client'; 'use client';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Menu, X, PanelLeftClose, PanelLeftOpen } from 'lucide-react'; 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 { useSidebar } from './SidebarProvider';
import { getToolByHref } from '@/lib/tools';
import Logo from '@/components/Logo'; 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() { export function AppHeader() {
const { toggle, isOpen, isCollapsed, toggleCollapse } = useSidebar(); const { toggle, isOpen, isCollapsed, toggleCollapse } = useSidebar();
const pathname = usePathname();
const tool = getToolByHref(pathname);
return ( 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)]"> <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-2"> <div className="flex items-center gap-1.5 min-w-0">
<Button {/* Desktop: sidebar collapse toggle */}
variant="ghost" <button
size="icon"
className="hidden lg:inline-flex text-muted-foreground hover:text-foreground"
onClick={toggleCollapse} onClick={toggleCollapse}
title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
className={cn(iconBtn, 'hidden lg:flex shrink-0')}
> >
{isCollapsed ? ( {isCollapsed
<PanelLeftOpen className="h-5 w-5" /> ? <PanelLeftOpen className="w-4 h-4" />
) : ( : <PanelLeftClose className="w-4 h-4" />
<PanelLeftClose className="h-5 w-5" /> }
)} </button>
</Button>
<Link href="/" className="lg:hidden shrink-0 ml-2"> {/* Mobile: logo home link */}
<Logo size={24} /> <Link href="/" className="lg:hidden shrink-0">
<Logo size={20} />
</Link> </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> </div>
<Button {/* Mobile: open/close sidebar */}
variant="ghost" <button
size="icon"
className="lg:hidden text-muted-foreground hover:text-foreground"
onClick={toggle} 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" />} {isOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
</Button> </button>
</header> </header>
); );
} }

35
components/layout/AppPage.tsx
View File

@@ -11,20 +11,31 @@ interface AppPageProps {
export function AppPage({ title, description, icon: Icon, children, className }: AppPageProps) { export function AppPage({ title, description, icon: Icon, children, className }: AppPageProps) {
return ( return (
<div className={cn("min-h-screen py-8", className)}> <div className={cn('min-h-screen', className)}>
<div className="max-w-7xl mx-auto px-8 space-y-6 animate-fade-in"> <div className="max-w-7xl mx-auto px-6 lg:px-8 animate-fade-in">
<div>
<div className="flex items-center gap-3 mb-1"> {/* Page header */}
{Icon && <Icon className="h-6 w-6 text-primary shrink-0" />} <div className="py-5 border-b border-border/20 mb-6">
<h1 className="text-2xl font-bold">{title}</h1> <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> </div>
{description && (
<p className="text-sm text-muted-foreground max-w-2xl">
{description}
</p>
)}
</div> </div>
{children}
<div className="pb-8">
{children}
</div>
</div> </div>
</div> </div>
); );

153
components/layout/AppSidebar.tsx
View File

@@ -6,7 +6,6 @@ import { X, GitFork, Heart } from 'lucide-react';
import { cn } from '@/lib/utils/cn'; import { cn } from '@/lib/utils/cn';
import Logo from '@/components/Logo'; import Logo from '@/components/Logo';
import { useSidebar } from './SidebarProvider'; import { useSidebar } from './SidebarProvider';
import { Button } from '@/components/ui/button';
import { tools } from '@/lib/tools'; import { tools } from '@/lib/tools';
export function AppSidebar() { export function AppSidebar() {
@@ -15,7 +14,7 @@ export function AppSidebar() {
return ( return (
<> <>
{/* Mobile Overlay Backdrop */} {/* Mobile backdrop */}
{isOpen && ( {isOpen && (
<div <div
className="fixed inset-0 bg-transparent backdrop-blur-sm z-40 lg:hidden" className="fixed inset-0 bg-transparent backdrop-blur-sm z-40 lg:hidden"
@@ -24,94 +23,100 @@ export function AppSidebar() {
)} )}
<aside className={cn( <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", '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", isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
isCollapsed ? "lg:w-14" : "w-64" isCollapsed ? 'lg:w-14' : 'w-60'
)}> )}>
{/* Sidebar Header */}
{/* Header */}
<div className={cn( <div className={cn(
"flex h-16 items-center shrink-0 border-b border-border", 'flex h-14 items-center shrink-0 border-b border-border/20',
isCollapsed ? "justify-center px-2" : "justify-between px-5" isCollapsed ? 'justify-center px-2' : 'justify-between px-4'
)}> )}>
<Link href="/" className={cn( <Link
"flex items-center group overflow-hidden", href="/"
isCollapsed ? "justify-center" : "gap-3" className={cn(
)}> 'flex items-center group overflow-hidden',
isCollapsed ? 'justify-center' : 'gap-2.5'
)}
>
<div className="shrink-0"> <div className="shrink-0">
<Logo size={isCollapsed ? 20 : 28} /> <Logo size={isCollapsed ? 18 : 24} />
</div> </div>
{!isCollapsed && ( {!isCollapsed && (
<div className="min-w-0"> <div className="min-w-0">
<span className="font-bold text-lg leading-tight block text-foreground"> <span className="font-semibold text-base leading-tight block text-foreground">Kit</span>
Kit <span className="text-[9px] leading-tight text-muted-foreground/50 block font-mono tracking-wider">
</span>
<span className="text-[10px] leading-tight text-muted-foreground block">
Browser-first toolkit Browser-first toolkit
</span> </span>
</div> </div>
)} )}
</Link> </Link>
{!isCollapsed && ( {!isCollapsed && (
<Button <button
variant="ghost"
size="icon"
className="lg:hidden text-muted-foreground"
onClick={close} 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" /> <X className="w-3.5 h-3.5" />
</Button> </button>
)} )}
</div> </div>
{/* Navigation */} {/* Navigation */}
<nav className={cn( <nav className={cn(
"flex-1 overflow-y-auto py-2 space-y-6 mt-4 overflow-hidden scrollbar", 'flex-1 overflow-y-auto py-3 space-y-0.5 scrollbar-thin scrollbar-thumb-primary/10 scrollbar-track-transparent',
isCollapsed ? "px-2" : "px-4" isCollapsed ? 'px-2' : 'px-3'
)}> )}>
<div className="space-y-0.5"> {tools.map((tool) => {
{tools.map((tool) => { const isActive = pathname === tool.href || (tool.href !== '/' && pathname.startsWith(tool.href));
const isActive = pathname === tool.href || (tool.href !== '/' && pathname.startsWith(tool.href)); const Icon = tool.icon;
const Icon = tool.icon;
return ( return (
<div key={tool.href} className="space-y-1"> <Link
<Link key={tool.href}
href={tool.href} href={tool.href}
onClick={() => { if (window.innerWidth < 1024) close(); }} onClick={() => { if (window.innerWidth < 1024) close(); }}
className={cn( title={isCollapsed ? tool.navTitle : undefined}
"flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300 relative group/item", className={cn(
isActive 'relative flex items-center rounded-lg text-sm transition-all duration-200 group/item',
? "bg-primary/10 text-primary border-l-2 border-primary" isActive
: "text-foreground/80 hover:bg-accent/50 hover:text-foreground", ? 'bg-primary/10 text-primary'
isCollapsed ? "justify-center" : "justify-between" : 'text-foreground/55 hover:bg-white/4 hover:text-foreground',
)} isCollapsed ? 'justify-center p-2' : 'gap-3 px-3 py-2'
title={isCollapsed ? tool.navTitle : undefined} )}
> >
<div className="flex items-center gap-3 min-w-0"> {/* Active left bar */}
<span className={cn( {isActive && (
"transition-colors duration-300 shrink-0", <span className="absolute left-0 inset-y-2 w-0.5 rounded-r-full bg-primary" />
isActive ? "text-primary" : "text-foreground/80 group-hover/item:text-foreground" )}
)}>
<Icon className="h-4 w-4" /> <span className={cn(
</span> 'shrink-0 transition-colors duration-200',
{!isCollapsed && ( isActive ? 'text-primary' : 'text-foreground/40 group-hover/item:text-foreground/70'
<div className="min-w-0"> )}>
<span className="whitespace-nowrap block">{tool.navTitle}</span> <Icon className="w-4 h-4" />
<span className="text-[10px] text-muted-foreground leading-tight block line-clamp-2">{tool.description}</span> </span>
</div>
)} {!isCollapsed && (
</div> <div className="min-w-0">
</Link> <span className="whitespace-nowrap block text-[13px] font-medium leading-tight">
</div> {tool.navTitle}
); </span>
})} <span className="text-[9px] text-muted-foreground/40 leading-tight block truncate font-mono mt-0.5">
</div> {tool.description}
</span>
</div>
)}
</Link>
);
})}
</nav> </nav>
{/* Sidebar Footer */} {/* Footer */}
<div className={cn( <div className={cn(
"shrink-0 border-t border-border py-3", 'shrink-0 border-t border-border/20 py-3',
isCollapsed ? "flex justify-center px-2" : "px-4" isCollapsed ? 'flex justify-center px-2' : 'px-4'
)}> )}>
{isCollapsed ? ( {isCollapsed ? (
<a <a
@@ -119,21 +124,20 @@ export function AppSidebar() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
title="View source" 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> </a>
) : ( ) : (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="flex items-center gap-1 text-[10px] text-muted-foreground"> <p className="flex items-center gap-1 text-[9px] text-muted-foreground/40 font-mono">
© {new Date().getFullYear()} Kit. © {new Date().getFullYear()} Kit
<Heart className="h-2.5 w-2.5 text-primary shrink-0 animate-pulse" fill="currentColor" /> <Heart className="w-2 h-2 text-primary/70 shrink-0 animate-pulse" fill="currentColor" />
<a <a
href="https://pivoine.art" href="https://pivoine.art"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
title="Pivoine.Art" className="hover:text-foreground/70 transition-colors"
className="font-medium underline underline-offset-4 decoration-primary/0 hover:decoration-primary transition-all duration-300"
> >
Valknar Valknar
</a> </a>
@@ -143,14 +147,13 @@ export function AppSidebar() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
title="View source" 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> </a>
</div> </div>
)} )}
</div> </div>
</aside> </aside>
</> </>
); );