-
This commit is contained in:
sunzhongyi
@@ -1,96 +1,134 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { cx } from '@newspaperui/utils';
|
||||
|
||||
interface NavItem {
|
||||
title: string;
|
||||
label: string;
|
||||
href: string;
|
||||
items?: NavItem[];
|
||||
children?: NavItem[];
|
||||
}
|
||||
|
||||
const navigation: NavItem[] = [
|
||||
const nav: NavItem[] = [
|
||||
{ label: '概览 / 头版', href: '/' },
|
||||
{ label: '栅格系统', href: '/grid-system' },
|
||||
{
|
||||
title: '概览',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: '栅格系统',
|
||||
href: '/grid-system',
|
||||
},
|
||||
{
|
||||
title: '核心组件',
|
||||
href: '/components',
|
||||
items: [
|
||||
{ title: 'Article', href: '/components/article' },
|
||||
{ title: 'Layer', href: '/components/layer' },
|
||||
{ title: '媒体组件', href: '/components/media' },
|
||||
label: '布局组件',
|
||||
href: '/components/article',
|
||||
children: [
|
||||
{ label: 'Masthead', href: '/components/masthead' },
|
||||
{ label: 'Article + Layer', href: '/components/article' },
|
||||
{ label: 'Rule 分隔线', href: '/components/rule' },
|
||||
],
|
||||
},
|
||||
{ label: '文本组件', href: '/text' },
|
||||
{ label: '媒体组件', href: '/components/media' },
|
||||
{ label: '主题与颜色', href: '/theme' },
|
||||
{
|
||||
title: '文本组件',
|
||||
href: '/text',
|
||||
},
|
||||
{
|
||||
title: '主题系统',
|
||||
href: '/theme',
|
||||
},
|
||||
{
|
||||
title: '示例',
|
||||
href: '/examples',
|
||||
items: [
|
||||
{ title: '跨栏布局', href: '/examples/spanning' },
|
||||
{ title: '响应式布局', href: '/examples/responsive' },
|
||||
label: '示例',
|
||||
href: '/examples/spanning',
|
||||
children: [
|
||||
{ label: '跨栏布局', href: '/examples/spanning' },
|
||||
{ label: '响应式', href: '/examples/responsive' },
|
||||
{ label: 'Blackletter 头版', href: '/examples/blackletter-frontpage' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<nav className="w-64 border-r border-gray-200 bg-white h-screen sticky top-0 overflow-y-auto">
|
||||
<div className="p-6">
|
||||
<Link href="/" className="text-xl font-bold text-gray-900">
|
||||
NewspaperUI
|
||||
</Link>
|
||||
<p className="mt-1 text-sm text-gray-600">报纸布局组件库</p>
|
||||
<aside
|
||||
style={{
|
||||
width: '240px',
|
||||
flexShrink: 0,
|
||||
padding: '2rem 1rem',
|
||||
borderRight: '1px solid var(--nui-rule-hairline)',
|
||||
background: 'var(--nui-bg-surface)',
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '14px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
alignSelf: 'flex-start',
|
||||
maxHeight: '100vh',
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href="/"
|
||||
style={{
|
||||
display: 'block',
|
||||
fontFamily: 'var(--font-family-masthead)',
|
||||
fontSize: '22px',
|
||||
fontWeight: 700,
|
||||
color: 'var(--nui-text-primary)',
|
||||
textDecoration: 'none',
|
||||
marginBottom: '0.25rem',
|
||||
letterSpacing: '0.02em',
|
||||
}}
|
||||
>
|
||||
NewspaperUI
|
||||
</Link>
|
||||
<div
|
||||
className="nui-small-caps"
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
color: 'var(--nui-text-muted)',
|
||||
marginBottom: '2rem',
|
||||
letterSpacing: '0.08em',
|
||||
}}
|
||||
>
|
||||
Production Newspaper Components
|
||||
</div>
|
||||
|
||||
<div className="px-4 pb-6">
|
||||
{navigation.map((item) => (
|
||||
<div key={item.href} className="mb-4">
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`block px-3 py-2 rounded-md text-sm font-medium ${
|
||||
pathname === item.href
|
||||
? 'bg-gray-100 text-gray-900'
|
||||
: 'text-gray-700 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
|
||||
{item.items && (
|
||||
<div className="ml-4 mt-2 space-y-1">
|
||||
{item.items.map((subItem) => (
|
||||
<Link
|
||||
key={subItem.href}
|
||||
href={subItem.href}
|
||||
className={`block px-3 py-2 rounded-md text-sm ${
|
||||
pathname === subItem.href
|
||||
? 'bg-gray-100 text-gray-900'
|
||||
: 'text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{subItem.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
||||
{nav.map((item) => (
|
||||
<li key={item.href} style={{ marginBottom: '0.75rem' }}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={cx(pathname === item.href && 'active')}
|
||||
style={{
|
||||
display: 'block',
|
||||
padding: '0.25rem 0',
|
||||
color:
|
||||
pathname === item.href
|
||||
? 'var(--nui-accent-primary)'
|
||||
: 'var(--nui-text-secondary)',
|
||||
textDecoration: 'none',
|
||||
fontWeight: pathname === item.href ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
{item.children && (
|
||||
<ul style={{ listStyle: 'none', padding: '0 0 0 1rem', margin: '0.25rem 0 0' }}>
|
||||
{item.children.map((child) => (
|
||||
<li key={child.href} style={{ marginBottom: '0.25rem' }}>
|
||||
<Link
|
||||
href={child.href}
|
||||
style={{
|
||||
display: 'block',
|
||||
padding: '0.15rem 0',
|
||||
fontSize: '13px',
|
||||
color:
|
||||
pathname === child.href
|
||||
? 'var(--nui-accent-primary)'
|
||||
: 'var(--nui-text-muted)',
|
||||
textDecoration: 'none',
|
||||
fontWeight: pathname === child.href ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{child.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user