mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-09-11 13:55:59 +03:00
151 lines
4.2 KiB
JavaScript
151 lines
4.2 KiB
JavaScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { useState } from "react";
|
|
import classnames from "classnames";
|
|
import { IntraNav, capitalize, MenuTray } from "@urbit/foundation-design-system";
|
|
|
|
function ActiveLink({ children, href, className, currentPath }) {
|
|
const firstCrumb = currentPath.split("/")[1];
|
|
|
|
const activeClassName = classnames({
|
|
"text-wall-600": "/" + firstCrumb === href,
|
|
"text-wall-500": "/" + firstCrumb !== href,
|
|
});
|
|
|
|
return (
|
|
<Link href={href} passHref>
|
|
<a className={`${className} ${activeClassName}`}>{children}</a>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default function Header({ search }) {
|
|
const [isOpen, setTray] = useState(false);
|
|
|
|
const currentPath = useRouter().asPath;
|
|
|
|
const routeDepth = currentPath.split("/").length;
|
|
|
|
const firstCrumb = currentPath.split("/")[1];
|
|
|
|
return (
|
|
<>
|
|
{" "}
|
|
<IntraNav ourSite="https://developers.urbit.org" search={search} />
|
|
<header className="layout max-w-screen-lg px-4 md:px-8 flex justify-between items-end pt-8 md:pt-10 lg:pt-12 pb-10 md:pb-12 lg:pb-24">
|
|
<div>
|
|
<Link href="/" passHref>
|
|
<a className="text-lg font-semibold leading-3 mr-5">
|
|
Urbit Developers
|
|
</a>
|
|
</Link>
|
|
{routeDepth > 2 ? (
|
|
<Link href={`/${firstCrumb}`} passHref>
|
|
<a className="inline md:hidden type-ui text-wall-500 ml-2">
|
|
{capitalize(firstCrumb)}
|
|
</a>
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
{
|
|
// Large screen header
|
|
}
|
|
<nav className="items-center hidden md:flex">
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="mr-5 type-ui"
|
|
href="/overview"
|
|
>
|
|
Overview
|
|
</ActiveLink>
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="mr-5 type-ui"
|
|
href="/guides"
|
|
>
|
|
Guides
|
|
</ActiveLink>
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="mr-5 type-ui"
|
|
href="/reference"
|
|
>
|
|
Reference
|
|
</ActiveLink>
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="mr-5 type-ui button-text"
|
|
href="/courses"
|
|
>
|
|
Courses
|
|
</ActiveLink>
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="type-ui"
|
|
href="/blog"
|
|
>
|
|
Blog
|
|
</ActiveLink>
|
|
</nav>
|
|
|
|
{
|
|
// Small screen header
|
|
}
|
|
<MenuTray isOpen={isOpen} setTray={setTray} search={search}>
|
|
<Link href="/" passHref>
|
|
<a className="font-semibold mb-4">Urbit Developers</a>
|
|
</Link>
|
|
<Link href="https://urbit.org" passHref>
|
|
<a className="mt-2">Urbit.org</a>
|
|
</Link>
|
|
<Link href="https://operators.urbit.org" passHref>
|
|
<a className="mt-2">Operators</a>
|
|
</Link>
|
|
<Link href="/" passHref>
|
|
<a className="font-semibold mt-2">Developers</a>
|
|
</Link>
|
|
<Link href="https://roadmap.urbit.org" passHref>
|
|
<a className="mt-2 mb-4">Roadmap</a>
|
|
</Link>
|
|
<hr className="border-wall-200" />
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="mt-4 mr-5 mb-3 type-ui"
|
|
href="/overview"
|
|
>
|
|
Overview
|
|
</ActiveLink>
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="mr-5 mb-3 type-ui"
|
|
href="/guides"
|
|
>
|
|
Guides
|
|
</ActiveLink>
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="mr-5 mb-3 type-ui"
|
|
href="/reference"
|
|
>
|
|
Reference
|
|
</ActiveLink>
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="mr-5 mb-3 type-ui button-text"
|
|
href="/courses"
|
|
>
|
|
Courses
|
|
</ActiveLink>
|
|
<ActiveLink
|
|
currentPath={currentPath}
|
|
className="mr-5 type-ui"
|
|
href="/blog"
|
|
>
|
|
Blog
|
|
</ActiveLink>
|
|
</MenuTray>
|
|
</header>
|
|
</>
|
|
);
|
|
}
|