git.iko.soy/urbit.org
on 40fbeae help sign in
urbit.org/components/Header.js
145 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-black": "/" + firstCrumb === href,
15 "text-gray": "/" + 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="w-full px-4 md:px-8 md:w-10/12 flex flex-row 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-gray 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 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="button-sm bg-wall text-gray"
102 >
103 Search<div className="ml-4 text-lightGray">{shortcut}</div>
104 </button>
105 </nav>
107 {
108 // Small screen header
109 }
110 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
111 <Link href="/">
112 <a className="type-ui mb-12">Urbit</a>
113 </Link>
114 <ActiveLink
115 currentPath={currentPath}
116 className="mr-5 mb-4 type-h3"
117 href="/docs"
118 >
119 Docs
120 </ActiveLink>
121 <ActiveLink
122 currentPath={currentPath}
123 className="mr-5 mb-4 type-h3"
124 href="/blog"
125 >
126 Blog
127 </ActiveLink>
128 <ActiveLink
129 currentPath={currentPath}
130 className="mr-5 mb-4 type-h3"
131 href="/events"
132 >
133 Events
134 </ActiveLink>
135 <ActiveLink
136 currentPath={currentPath}
137 className="mr-5 mb-4 type-h3"
138 href="/grants"
139 >
140 Grants
141 </ActiveLink>
142 </MenuTray>
143 </header>
144 );