git.iko.soy/urbit.org
on d4a0a49 help sign in
urbit.org/components/Header.js
170 lines 4.3 kB history raw
1import Link from "next/link";
2import { useRouter } from "next/router";
3import { useState } from "react";
4import classnames from "classnames";
5import MenuTray from "../components/MenuTray";
6import { capitalize } from "@urbit/foundation-design-system";
8function ActiveLink({ children, href, className, currentPath }) {
9 const firstCrumb = currentPath.split("/")[1];
11 const activeClassName = classnames({
12 "text-wall-600": "/" + firstCrumb === href,
13 "text-wall-500": "/" + firstCrumb !== href,
14 });
16 return (
17 <Link href={href} passHref>
18 <a className={`${className} ${activeClassName}`}>{children}</a>
19 </Link>
20 );
23export default function Header(props) {
24 const [isOpen, setTray] = useState(false);
26 const currentPath = useRouter().asPath;
28 const routeDepth = currentPath.split("/").length;
30 const firstCrumb = currentPath.split("/")[1];
32 return (
33 <header className="layout px-4 md:px-8 flex justify-between items-center pt-8 md:pt-10 lg:pt-12 pb-10 md:pb-12 lg:pb-24">
34 <div>
35 <Link href="/" passHref>
36 <a className="font-semibold text-lg">Urbit</a>
37 </Link>
38 {routeDepth > 2 ? (
39 <Link href={`/${firstCrumb}`} passHref>
40 <a className="inline md:hidden type-ui text-wall-500 ml-2">
41 {capitalize(firstCrumb)}
42 </a>
43 </Link>
44 ) : null}
45 </div>
46 {
47 // Large screen header
48 }
49 <nav className="items-center hidden md:flex">
50 <ActiveLink
51 currentPath={currentPath}
52 className="mr-5 text-green-400 type-ui button-text"
53 href="/getting-started"
54 >
55 Get Started
56 </ActiveLink>
58 <ActiveLink
59 currentPath={currentPath}
60 className="mr-5 type-ui"
61 href="/overview"
62 >
63 Overview
64 </ActiveLink>
66 <ActiveLink
67 currentPath={currentPath}
68 className="mr-5 type-ui"
69 href="/ecosystem"
70 >
71 Ecosystem
72 </ActiveLink>
74 <ActiveLink
75 currentPath={currentPath}
76 className="mr-5 type-ui"
77 href="/grants"
78 >
79 Grants
80 </ActiveLink>
82 <ActiveLink
83 currentPath={currentPath}
84 className="mr-5 type-ui"
85 href="/events"
86 >
87 Events
88 </ActiveLink>
90 <ActiveLink
91 currentPath={currentPath}
92 className="mr-5 type-ui"
93 href="/blog"
94 >
95 Blog
96 </ActiveLink>
97 </nav>
99 {
100 // Small screen header
101 }
102 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
103 <Link href="/" passHref>
104 <a className="font-semibold mb-4">Urbit</a>
105 </Link>
106 <Link href="https://urbit.org" passHref>
107 <a className="font-semibold mt-2">Urbit.org</a>
108 </Link>
109 <Link href="https://operators.urbit.org" passHref>
110 <a className="mt-2">Operators</a>
111 </Link>
112 <Link href="https://developers.urbit.org" passHref>
113 <a className="mt-2">Developers</a>
114 </Link>
115 <Link href="https://roadmap.urbit.org" passHref>
116 <a className="mt-2 mb-4">Roadmap</a>
117 </Link>
118 <hr className="border-wall-200" />
120 <ActiveLink
121 currentPath={currentPath}
122 className="mr-5 mt-4 mb-4 text-green-400"
123 href="/getting-started"
124 >
125 Get Started
126 </ActiveLink>
128 <ActiveLink
129 currentPath={currentPath}
130 className="mr-5 mb-4"
131 href="/overview"
132 >
133 Overview
134 </ActiveLink>
136 <ActiveLink
137 currentPath={currentPath}
138 className="mr-5 mb-4"
139 href="/ecosystem"
140 >
141 Ecosystem
142 </ActiveLink>
144 <ActiveLink
145 currentPath={currentPath}
146 className="mr-5 mb-4"
147 href="/grants"
148 >
149 Grants
150 </ActiveLink>
152 <ActiveLink
153 currentPath={currentPath}
154 className="mr-5 mb-4"
155 href="/events"
156 >
157 Events
158 </ActiveLink>
160 <ActiveLink
161 currentPath={currentPath}
162 className="mr-5 mb-4"
163 href="/blog"
164 >
165 Blog
166 </ActiveLink>
167 </MenuTray>
168 </header>
169 );