git.iko.soy/urbit.org
on roller-tutorial help sign in
urbit.org/components/Header.js
160 lines 4.2 kB history raw
1import Link from "next/link";
2import { useRouter } from "next/router";
3import { useState, useEffect } 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-wall-600": "/" + firstCrumb === href,
15 "text-wall-500": "/" + 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);
27 const [shortcut, setShortcut] = useState("");
29 const currentPath = useRouter().asPath;
31 const routeDepth = currentPath.split("/").length;
33 const firstCrumb = currentPath.split("/")[1];
35 const detectOS = () => {
36 const agent = window.navigator.appVersion;
37 if (agent.includes("Win")) {
38 return "Ctrl+K";
39 } else if (agent.includes("Mac")) {
40 return "⌘K";
41 } else if (agent.includes("Linux")) {
42 return "Ctrl+K";
43 }
44 };
46 useEffect(() => {
47 setShortcut(detectOS());
48 }, []);
50 return (
51 <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">
52 <div>
53 <Link href="/">
54 <a className="type-ui">Urbit</a>
55 </Link>
56 {routeDepth > 2 ? (
57 <Link href={`/${firstCrumb}`}>
58 <a className="inline md:hidden type-ui text-wall-500 ml-2">
59 {capitalize(firstCrumb)}
60 </a>
61 </Link>
62 ) : null}
63 </div>
64 {
65 // Large screen header
66 }
67 <nav className="items-center hidden md:flex">
68 <ActiveLink
69 currentPath={currentPath}
70 className="mr-5 type-ui"
71 href="/docs"
72 >
73 Docs
74 </ActiveLink>
75 <ActiveLink
76 currentPath={currentPath}
77 className="mr-5 type-ui"
78 href="/using"
79 >
80 Manual
81 </ActiveLink>
82 <ActiveLink
83 currentPath={currentPath}
84 className="mr-5 type-ui"
85 href="/blog"
86 >
87 Blog
88 </ActiveLink>
89 <ActiveLink
90 currentPath={currentPath}
91 className="mr-5 type-ui"
92 href="/events"
93 >
94 Events
95 </ActiveLink>
96 <ActiveLink
97 currentPath={currentPath}
98 className="mr-5 text-green-400 type-ui button-text"
99 href="/getting-started"
100 >
101 Get Started
102 </ActiveLink>
103 <ActiveLink
104 currentPath={currentPath}
105 className="mr-5 type-ui"
106 href="/faq"
107 >
108 FAQ
109 </ActiveLink>
110 <button
111 onClick={(e) => {
112 e.stopPropagation();
113 props.search.toggleSearch(e);
114 }}
115 className="bg-wall-100 text-wall-500 flex px-4 py-1 rounded-lg type-ui"
116 >
117 <div>Search</div>
118 <div className="ml-4 text-wall-400">{shortcut}</div>
119 </button>
120 </nav>
122 {
123 // Small screen header
124 }
125 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
126 <Link href="/">
127 <a className="type-ui mb-12">Urbit</a>
128 </Link>
129 <ActiveLink
130 currentPath={currentPath}
131 className="mr-5 mb-4 type-h3"
132 href="/docs"
133 >
134 Docs
135 </ActiveLink>
136 <ActiveLink
137 currentPath={currentPath}
138 className="mr-5 mb-4 type-h3"
139 href="/blog"
140 >
141 Blog
142 </ActiveLink>
143 <ActiveLink
144 currentPath={currentPath}
145 className="mr-5 mb-4 type-h3"
146 href="/events"
147 >
148 Events
149 </ActiveLink>
150 <ActiveLink
151 currentPath={currentPath}
152 className="mr-5 mb-4 type-h3"
153 href="/grants"
154 >
155 Grants
156 </ActiveLink>
157 </MenuTray>
158 </header>
159 );