git.iko.soy/urbit.org
on a4600bc help sign in
urbit.org/components/Header.js
144 lines 3.8 kB history raw
1import Link from "next/link";
2import { useRouter } from "next/router";
3import { useState, useEffect } from "react";
4import classnames from "classnames";
5import MenuTray from "../components/MenuTray";
6import { capitalize } from "../lib/lib";
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">
51 <ActiveLink
52 currentPath={currentPath}
53 className="mr-5 text-green-400 type-ui button-text"
54 href="/getting-started"
55 >
56 Get Started
57 </ActiveLink>
59 <ActiveLink
60 currentPath={currentPath}
61 className="mr-5 type-ui"
62 href="/using"
63 >
64 Manual
65 </ActiveLink>
68 <ActiveLink
69 currentPath={currentPath}
70 className="mr-5 type-ui"
71 href="/faq"
72 >
73 FAQ
74 </ActiveLink>
76 <ActiveLink
77 currentPath={currentPath}
78 className="mr-5 type-ui"
79 href="/events"
80 >
81 Events
82 </ActiveLink>
84 <ActiveLink
85 currentPath={currentPath}
86 className="mr-5 type-ui"
87 href="/blog"
88 >
89 Blog
90 </ActiveLink>
91 </nav>
93 {
94 // Small screen header
95 }
96 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
97 <Link href="/" passHref>
98 <a className="font-semibold mb-4">Urbit</a>
99 </Link>
100 <Link href="https://urbit.org" passHref>
101 <a className="font-semibold mt-2">Urbit.org</a>
102 </Link>
103 <Link href="https://operators.urbit.org" passHref>
104 <a className="mt-2">Operators</a>
105 </Link>
106 <Link href="https://developers.urbit.org" passHref>
107 <a className="mt-2 mb-4">Developers</a>
108 </Link>
109 <hr className="border-wall-200" />
110 <ActiveLink
111 currentPath={currentPath}
112 className="mt-4 mr-5 mb-4"
113 href="/using"
114 >
115 Manual
116 </ActiveLink>
117 <ActiveLink
118 currentPath={currentPath}
119 className="mr-5 mb-4"
120 href="/blog"
121 >
122 Blog
123 </ActiveLink>
124 <ActiveLink
125 currentPath={currentPath}
126 className="mr-5 mb-4"
127 href="/events"
128 >
129 Events
130 </ActiveLink>
131 <ActiveLink
132 currentPath={currentPath}
133 className="mr-5 mb-4 text-green-400"
134 href="/getting-started"
135 >
136 Get Started
137 </ActiveLink>
138 <ActiveLink currentPath={currentPath} className="mr-5 mb-4" href="/faq">
139 FAQ
140 </ActiveLink>
141 </MenuTray>
142 </header>
143 );