e.xyehr.cn
forked from
standard.site/standard.site
Standard.site landing page built in Next.js
aka.dad
1'use client'
2
3import Link from 'next/link'
4import { usePathname } from 'next/navigation'
5import { ArrowLeftIcon } from 'lucide-react'
6import { AnimateIn, StandardSiteLogo } from '@/app/components'
7import { DOCS_NAV } from '@/app/data/docs-nav'
8
9export function DocsSidebar() {
10 const pathname = usePathname()
11
12 return (
13 <AnimateIn
14 as="aside"
15 direction="left"
16 delay={0.3}
17 onScroll={false}
18 className="flex sticky top-8 w-32 shrink-0 flex-col gap-6"
19 >
20 <Link href="/" className="flex items-center gap-2">
21 <StandardSiteLogo className="size-7 text-base-content" />
22 <span className="font-medium text-sm tracking-tight text-base-content">Docs</span>
23 </Link>
24
25 <nav className="flex flex-col gap-6">
26 {DOCS_NAV.map((section) => (
27 <div key={section.title} className="flex flex-col gap-2">
28 <span className="font-mono text-xs font-medium tracking-tight text-muted-content uppercase">
29 {section.title}
30 </span>
31 <div className="flex flex-col gap-1">
32 {section.items.map((item) => {
33 const isDocPage = item.href.startsWith('/docs/')
34 const className = `font-medium text-base tracking-tight py-0.5 ${
35 pathname === item.href
36 ? 'text-base-content'
37 : 'text-muted-content'
38 } hover:text-base-content transition-colors`
39
40 if (!isDocPage) {
41 return (
42 <a key={item.href} href={item.href} className={className}>
43 {item.label}
44 </a>
45 )
46 }
47
48 return (
49 <Link key={item.href} href={item.href} className={className}>
50 {item.label}
51 </Link>
52 )
53 })}
54 </div>
55 </div>
56 ))}
57 </nav>
58
59 <div className="h-px w-full bg-border" />
60
61 <Link
62 href="/"
63 className="flex items-center gap-2 font-medium text-base tracking-tight text-muted-content hover:text-base-content transition-colors"
64 >
65 <ArrowLeftIcon className="size-4" />
66 Back home
67 </Link>
68 </AnimateIn>
69 )
70}