git.iko.soy/urbit.org
on e4dea95 help sign in
urbit.org/components/Header.js
129 lines 3.4 kB history raw
1import Link from "next/link";
2import { useRouter } from "next/router";
3import { useState } from "react";
4import classnames from "classnames";
5import path from "path";
6import MenuTray from "../components/MenuTray";
7import Section from "../components/Section";
8import { capitalize } from "../lib/lib";
10function ActiveLink({ children, href, className, currentPath }) {
11 const firstCrumb = currentPath.split("/")[1];
13 const activeClassName = classnames({
14 "text-black": "/" + firstCrumb === href,
15 "text-gray": "/" + firstCrumb !== href,
16 });
18 return (
19 <Link href={href}>
20 <a className={`${className} ${activeClassName}`}>{children}</a>
21 </Link>
22 );
25export default function Header(props) {
26 const [isOpen, setTray] = useState(false);
28 const currentPath = useRouter().asPath;
30 const routeDepth = currentPath.split("/").length;
32 const firstCrumb = currentPath.split("/")[1];
34 return (
35 <header className="w-full px-4 md:px-8 md:w-10/12 flex flex-row justify-between items-center pt-8 md:pt-10 lg:pt-12 pb-10 md:pb-12 lg:pb-24">
36 <div>
37 <Link href="/">
38 <a className="type-ui">Urbit</a>
39 </Link>
40 {routeDepth > 2 ? (
41 <Link href={`/${firstCrumb}`}>
42 <a className="inline md:hidden type-ui text-gray ml-2">
43 {capitalize(firstCrumb)}
44 </a>
45 </Link>
46 ) : null}
47 </div>
48 {
49 // Large screen header
50 }
51 <nav className="items-center hidden md:flex">
52 <ActiveLink
53 currentPath={currentPath}
54 className="mr-5 type-ui"
55 href="/docs"
56 >
57 Docs
58 </ActiveLink>
59 <ActiveLink
60 currentPath={currentPath}
61 className="mr-5 type-ui"
62 href="/blog"
63 >
64 Blog
65 </ActiveLink>
66 <ActiveLink
67 currentPath={currentPath}
68 className="mr-5 type-ui"
69 href="/events"
70 >
71 Events
72 </ActiveLink>
73 <ActiveLink
74 currentPath={currentPath}
75 className="mr-5 text-green type-ui button-text"
76 href="/getting-started"
77 >
78 Download Port
79 </ActiveLink>
80 <button
81 onClick={(e) => {
82 e.stopPropagation();
83 props.search.toggleSearch(e);
84 }}
85 className="button-sm bg-wall text-gray"
86 >
87 Search<div className="ml-4 text-lightGray">⌘K</div>
88 </button>
89 </nav>
91 {
92 // Small screen header
93 }
94 <MenuTray isOpen={isOpen} setTray={setTray}>
95 <Link href="/">
96 <a className="type-ui mb-12">Urbit</a>
97 </Link>
98 <ActiveLink
99 currentPath={currentPath}
100 className="mr-5 mb-4 type-h3"
101 href="/docs"
102 >
103 Docs
104 </ActiveLink>
105 <ActiveLink
106 currentPath={currentPath}
107 className="mr-5 mb-4 type-h3"
108 href="/blog"
109 >
110 Blog
111 </ActiveLink>
112 <ActiveLink
113 currentPath={currentPath}
114 className="mr-5 mb-4 type-h3"
115 href="/events"
116 >
117 Events
118 </ActiveLink>
119 <ActiveLink
120 currentPath={currentPath}
121 className="mr-5 mb-4 type-h3"
122 href="/grants"
123 >
124 Grants
125 </ActiveLink>
126 </MenuTray>
127 </header>
128 );