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

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 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>
</>
);