git.iko.soy/urbit.org
on bb3adff help sign in
urbit.org/components/Header.js
146 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 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="/blog"
79 >
80 Blog
81 </ActiveLink>
82 <ActiveLink
83 currentPath={currentPath}
84 className="mr-5 type-ui"
85 href="/events"
86 >
87 Events
88 </ActiveLink>
89 <ActiveLink
90 currentPath={currentPath}
91 className="mr-5 text-green-400 type-ui button-text"
92 href="/getting-started"
93 >
94 Get Started
95 </ActiveLink>
96 <button
97 onClick={(e) => {
98 e.stopPropagation();
99 props.search.toggleSearch(e);
100 }}
101 className="bg-wall-100 text-wall-500 flex px-4 py-1 rounded-lg type-ui"
102 >
103 <div>Search</div>
104 <div className="ml-4 text-wall-400">{shortcut}</div>
105 </button>
106 </nav>
108 {
109 // Small screen header
110 }
111 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
112 <Link href="/">
113 <a className="type-ui mb-12">Urbit</a>
114 </Link>
115 <ActiveLink
116 currentPath={currentPath}
117 className="mr-5 mb-4 type-h3"
118 href="/docs"
119 >
120 Docs
121 </ActiveLink>
122 <ActiveLink
123 currentPath={currentPath}
124 className="mr-5 mb-4 type-h3"
125 href="/blog"
126 >
127 Blog
128 </ActiveLink>
129 <ActiveLink
130 currentPath={currentPath}
131 className="mr-5 mb-4 type-h3"
132 href="/events"
133 >
134 Events
135 </ActiveLink>
136 <ActiveLink
137 currentPath={currentPath}
138 className="mr-5 mb-4 type-h3"
139 href="/grants"
140 >
141 Grants
142 </ActiveLink>
143 </MenuTray>
144 </header>
145 );