@@ -1,15 +1,44 @@
11import Link from 'next/link'
2+import { useRouter } from 'next/router'
3+import classnames from 'classnames'
4+import path from 'path'
5+
6+function ActiveLink({ children, href, className }) {
7+ const router = useRouter()
8+
9+ const firstCrumb = router.asPath.split('/')[1]
10+
11+ const activeClassName = classnames({
12+ 'text-black': '/' + firstCrumb === href,
13+ 'text-gray': '/' + firstCrumb !== href,
14+ })
15+
16+ return (
17+ <Link href={href}><a className={className + ' ' + activeClassName}>
18+ {children}
19+ </a></Link>
20+ )
21+ }
222
323export default function Header() {
24+ const router = useRouter()
25+
426 return (
527 <header className="layout-wide flex justify-between items-center pt-8">
628 <Link href="/"><a className="type-ui">Urbit</a></Link>
729 <nav className="flex items-center">
8− <Link href="/docs"><a className="type-ui text-gray mr-6">Docs</a></Link>
9− <Link href="/blog"><a className="type-ui text-gray mr-6">Blog</a></Link>
10− <Link href="/events"><a className="type-ui text-gray mr-6">Events</a></Link>
11− <button className="button-sm bg-green">Download Port</button>
30+ <ActiveLink className="mr-4 type-ui" href="/docs">Docs</ActiveLink>
31+ <ActiveLink className="mr-4 type-ui" href="/blog">Blog</ActiveLink>
32+ <ActiveLink className="mr-4 type-ui" href="/events">Events</ActiveLink>
33+ {
34+ router.asPath === '/'
35+ ? <button className="button-sm bg-green">Download Port</button>
36+ : <button className="button-sm bg-wall text-gray">Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div></button>
37+ }
1238 </nav>
1339 </header>
1440 )
41+
1542}
43+
44+