Standard.site landing page built in Next.js

Add documentation link to main navigation

+36 -3
+16 -2
app/components/MobileNav.tsx
··· 1 1 'use client' 2 2 3 3 import { useEffect, useState } from 'react' 4 + import Link from 'next/link' 4 5 import { ArrowUpRightIcon, MenuIcon, XIcon } from 'lucide-react' 5 6 import BlurEffect from 'react-progressive-blur' 6 7 import { AnimateIn, StandardSiteLogo } from '@/app/components' 7 - import { EXTERNAL_LINKS, NAV_ITEMS } from '@/app/data/content' 8 + import { EXTERNAL_LINKS, NAV_ITEMS, SECONDARY_NAV_ITEMS } from '@/app/data/content' 8 9 import { scrollToElement } from '@/app/lib/scroll' 9 10 10 11 export function MobileNav() { ··· 87 88 <div 88 89 className={ `p-4 relative flex flex-col gap-6 z-40 mx-auto max-w-[38rem] w-full min-h-0 overflow-hidden rounded-2xl transition-all duration-300 ease-in-out ${ 89 90 isOpen 90 - ? 'bg-zinc-950 dark:bg-zinc-50 text-zinc-50 dark:text-zinc-950 h-[27.25rem]' 91 + ? 'bg-zinc-950 dark:bg-zinc-50 text-zinc-50 dark:text-zinc-950 h-[31rem]' 91 92 : 'text-base-content h-15' 92 93 }` }> 93 94 <div className="flex justify-between items-center"> ··· 124 125 > 125 126 { item.label } 126 127 </a> 128 + )) } 129 + 130 + <div className="h-px w-full bg-border/10" /> 131 + 132 + { SECONDARY_NAV_ITEMS.map((item) => ( 133 + <Link 134 + key={ item.label } 135 + href={ item.href } 136 + onClick={ () => setIsOpen(false) } 137 + className="font-medium text-lg tracking-tight text-muted-content hover:text-zinc-50 dark:hover:text-zinc-950 transition-colors" 138 + > 139 + { item.label } 140 + </Link> 127 141 )) } 128 142 129 143 <div className="h-px w-full bg-border/10" />
+16 -1
app/components/Sidebar.tsx
··· 1 1 'use client' 2 2 3 3 import { useEffect, useState } from 'react' 4 + import Link from 'next/link' 4 5 import { AnimateIn, StandardSiteLogo } from '@/app/components' 5 - import { EXTERNAL_LINKS, NAV_ITEMS } from '@/app/data/content' 6 + import {EXTERNAL_LINKS, NAV_ITEMS, SECONDARY_NAV_ITEMS} from '@/app/data/content' 6 7 import { scrollToElement } from '@/app/lib/scroll' 7 8 import { ArrowUpRightIcon } from 'lucide-react' 8 9 ··· 80 81 > 81 82 { item.label } 82 83 </a> 84 + )) } 85 + </nav> 86 + 87 + <div className="h-px w-full bg-border" /> 88 + 89 + <nav className="flex flex-col gap-2"> 90 + { SECONDARY_NAV_ITEMS.map((item) => ( 91 + <Link 92 + key={ item.label } 93 + href={ item.href } 94 + className="font-medium text-base tracking-tight text-muted-content hover:text-base-content transition-colors" 95 + > 96 + { item.label } 97 + </Link> 83 98 )) } 84 99 </nav> 85 100
+4
app/data/content.ts
··· 6 6 { label: 'Questions', href: '#questions' }, 7 7 ] 8 8 9 + export const SECONDARY_NAV_ITEMS = [ 10 + { label: 'Documentation', href: '/docs/introduction' }, 11 + ] 12 + 9 13 export const EXTERNAL_LINKS = [ 10 14 { label: 'bsky.app', href: 'https://bsky.app/profile/standard.site' }, 11 15 { label: 'tangled.org', href: 'https://tangled.org/standard.site' },