git.iko.soy/urbit.org
on ce165bc help sign in
urbit.org/components/Header.js
132 lines 3.5 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">
50 <ActiveLink
51 currentPath={currentPath}
52 className="mr-5 type-ui"
53 href="/using"
54 >
55 Manual
56 </ActiveLink>
57 <ActiveLink
58 currentPath={currentPath}
59 className="mr-5 type-ui"
60 href="/blog"
61 >
62 Blog
63 </ActiveLink>
64 <ActiveLink
65 currentPath={currentPath}
66 className="mr-5 type-ui"
67 href="/events"
68 >
69 Events
70 </ActiveLink>
71 <ActiveLink
72 currentPath={currentPath}
73 className="mr-5 type-ui"
74 href="/faq"
75 >
76 FAQ
77 </ActiveLink>
78 <ActiveLink
79 currentPath={currentPath}
80 className="mr-5 text-green-400 type-ui button-text"
81 href="/getting-started"
82 >
83 Get Started
84 </ActiveLink>
85 </nav>
87 {
88 // Small screen header
89 }
90 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
91 <Link href="/" passHref>
92 <a className="type-ui mb-12">Urbit</a>
93 </Link>
94 <ActiveLink
95 currentPath={currentPath}
96 className="mr-5 mb-4 type-h3"
97 href="/manual"
98 >
99 Manual
100 </ActiveLink>
101 <ActiveLink
102 currentPath={currentPath}
103 className="mr-5 mb-4 type-h3"
104 href="/blog"
105 >
106 Blog
107 </ActiveLink>
108 <ActiveLink
109 currentPath={currentPath}
110 className="mr-5 mb-4 type-h3"
111 href="/events"
112 >
113 Events
114 </ActiveLink>
115 <ActiveLink
116 currentPath={currentPath}
117 className="mr-5 mb-4 text-green-400 type-h3"
118 href="/getting-started"
119 >
120 Get Started
121 </ActiveLink>
122 <ActiveLink
123 currentPath={currentPath}
124 className="mr-5 mb-4 type-h3"
125 href="/faq"
126 >
127 FAQ
128 </ActiveLink>
129 </MenuTray>
130 </header>
131 );