git.iko.soy/urbit.org
on 4c90121 help sign in
urbit.org/components/Header.js
169 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 { capitalize, MenuTray } from "@urbit/foundation-design-system";
7function ActiveLink({ children, href, className, currentPath }) {
8 const firstCrumb = currentPath.split("/")[1];
10 const activeClassName = classnames({
11 "text-wall-900": "/" + firstCrumb === href,
12 "text-wall-500": "/" + firstCrumb !== href,
13 });
15 return (
16 <Link href={href} passHref>
17 <a className={`${className} ${activeClassName}`}>{children}</a>
18 </Link>
19 );
22export default function Header(props) {
23 const [isOpen, setTray] = useState(false);
25 const currentPath = useRouter().asPath;
27 const routeDepth = currentPath.split("/").length;
29 const firstCrumb = currentPath.split("/")[1];
31 return (
32 <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">
33 <div>
34 <Link href="/" passHref>
35 <a className="font-semibold text-lg">Urbit</a>
36 </Link>
37 {routeDepth > 2 ? (
38 <Link href={`/${firstCrumb}`} passHref>
39 <a className="inline md:hidden type-ui text-wall-500 ml-2">
40 {capitalize(firstCrumb)}
41 </a>
42 </Link>
43 ) : null}
44 </div>
45 {
46 // Large screen header
47 }
48 <nav className="items-center hidden md:flex">
49 <ActiveLink
50 currentPath={currentPath}
51 className="mr-5 type-ui"
52 href="/getting-started"
53 >
54 Get Started
55 </ActiveLink>
57 <ActiveLink
58 currentPath={currentPath}
59 className="mr-5 type-ui"
60 href="/overview"
61 >
62 Overview
63 </ActiveLink>
65 <ActiveLink
66 currentPath={currentPath}
67 className="mr-5 type-ui"
68 href="/ecosystem"
69 >
70 Ecosystem
71 </ActiveLink>
73 <ActiveLink
74 currentPath={currentPath}
75 className="mr-5 type-ui"
76 href="/grants"
77 >
78 Grants
79 </ActiveLink>
81 <ActiveLink
82 currentPath={currentPath}
83 className="mr-5 type-ui"
84 href="/events"
85 >
86 Events
87 </ActiveLink>
89 <ActiveLink
90 currentPath={currentPath}
91 className="mr-5 type-ui"
92 href="/blog"
93 >
94 Blog
95 </ActiveLink>
96 </nav>
98 {
99 // Small screen header
100 }
101 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
102 <Link href="/" passHref>
103 <a className="font-semibold mb-4">Urbit</a>
104 </Link>
105 <Link href="https://urbit.org" passHref>
106 <a className="font-semibold mt-2">Urbit.org</a>
107 </Link>
108 <Link href="https://operators.urbit.org" passHref>
109 <a className="mt-2">Operators</a>
110 </Link>
111 <Link href="https://developers.urbit.org" passHref>
112 <a className="mt-2">Developers</a>
113 </Link>
114 <Link href="https://roadmap.urbit.org" passHref>
115 <a className="mt-2 mb-4">Roadmap</a>
116 </Link>
117 <hr className="border-wall-200" />
119 <ActiveLink
120 currentPath={currentPath}
121 className="mr-5 mt-4 mb-4 text-green-400"
122 href="/getting-started"
123 >
124 Get Started
125 </ActiveLink>
127 <ActiveLink
128 currentPath={currentPath}
129 className="mr-5 mb-4"
130 href="/overview"
131 >
132 Overview
133 </ActiveLink>
135 <ActiveLink
136 currentPath={currentPath}
137 className="mr-5 mb-4"
138 href="/ecosystem"
139 >
140 Ecosystem
141 </ActiveLink>
143 <ActiveLink
144 currentPath={currentPath}
145 className="mr-5 mb-4"
146 href="/grants"
147 >
148 Grants
149 </ActiveLink>
151 <ActiveLink
152 currentPath={currentPath}
153 className="mr-5 mb-4"
154 href="/events"
155 >
156 Events
157 </ActiveLink>
159 <ActiveLink
160 currentPath={currentPath}
161 className="mr-5 mb-4"
162 href="/blog"
163 >
164 Blog
165 </ActiveLink>
166 </MenuTray>
167 </header>
168 );