-

2026-05-19 21:09:56 +08:00
commit f3e6b95be9
78 changed files with 10099 additions and 0 deletions
@@ -0,0 +1,96 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface NavItem {
+  title: string;
+  href: string;
+  items?: NavItem[];
+}
+
+const navigation: NavItem[] = [
+  {
+    title: '概览',
+    href: '/',
+  },
+  {
+    title: '栅格系统',
+    href: '/grid-system',
+  },
+  {
+    title: '核心组件',
+    href: '/components',
+    items: [
+      { title: 'Article', href: '/components/article' },
+      { title: 'Layer', href: '/components/layer' },
+      { title: '媒体组件', href: '/components/media' },
+    ],
+  },
+  {
+    title: '文本组件',
+    href: '/text',
+  },
+  {
+    title: '主题系统',
+    href: '/theme',
+  },
+  {
+    title: '示例',
+    href: '/examples',
+    items: [
+      { title: '跨栏布局', href: '/examples/spanning' },
+      { title: '响应式布局', href: '/examples/responsive' },
+    ],
+  },
+];
+
+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>
+      </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>
+  );
+}