git.iko.soy/urbit.org
on a054df2 help sign in
urbit.org/components/Header.js
160 lines 5.1 kB history raw
1import Link from "next/link";
2import { useRouter } from "next/router";
3import { useState } from "react";
4import classnames from "classnames";
5import path from "path";
7function ActiveLink({ children, href, className }) {
8 const router = useRouter();
10 const firstCrumb = router.asPath.split("/")[1];
12 const activeClassName = classnames({
13 "text-black": "/" + firstCrumb === href,
14 "text-gray": "/" + firstCrumb !== href,
15 });
17 return (
18 <Link href={href}>
19 <a className={`${className} ${activeClassName}`}>{children}</a>
20 </Link>
21 );
24function MenuTray(props) {
25 // Locks document scrolling when menu is open
26 if (typeof document !== "undefined") {
27 if (props.isOpen) {
28 document.body.style.overflow = "hidden";
29 } else {
30 document.body.style.overflow = "visible";
31 }
32 }
34 // Slides the tray in or out from the left
35 const trayClasses = classnames({
36 "tray-menu-open": props.isOpen,
37 "tray-menu-closed": !props.isOpen,
38 });
40 // Fades the background overlay in or out
41 const overlayClasses = classnames({
42 "tray-overlay-open": props.isOpen,
43 "tray-overlay-closed": !props.isOpen,
44 });
46 // Hides or shows the menu
47 const menuClasses = classnames({
48 "menu-open": props.isOpen,
49 "menu-closed": !props.isOpen,
50 });
52 return (
53 <nav className={`w-screen h-screen top-0 left-0 fixed ${menuClasses}`}>
54 <div
55 onClick={() => props.toggleTray(!props.isOpen)}
56 className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
57 />
58 <div
59 className={`absolute bg-wall h-screen top-0 left-0 flex flex-col p-4 pt-12 tray-menu-width ${trayClasses}`}
60 >
61 {props.children}
62 </div>
63 </nav>
64 );
67// This is the header for the index page
68export default function Header(props) {
69 const [isOpen, toggleTray] = useState(false);
71 const mobileSearchButtonClasses = classnames({
72 visible: isOpen,
73 invisible: !isOpen,
74 });
76 return (
77 <header className="layout-wide flex justify-between items-center pt-12">
78 <Link href="/">
79 <a className="type-ui">Urbit</a>
80 </Link>
81 {
82 // Large screen header
83 }
84 <nav className="items-center hidden md:flex">
85 <ActiveLink className="mr-5 type-ui" href="/docs">
86 Docs
87 </ActiveLink>
88 <ActiveLink className="mr-5 type-ui" href="/blog">
89 Blog
90 </ActiveLink>
91 <ActiveLink className="mr-5 type-ui" href="/events">
92 Events
93 </ActiveLink>
94 <button className="mr-5 text-green type-ui">Download Port</button>
95 <button
96 onClick={(e) => {
97 e.stopPropagation();
98 props.search.toggleSearch(e);
99 }}
100 className="button-sm bg-wall text-gray"
101 >
102 Search<div className="ml-4 text-lightGray">⌘K</div>
103 </button>
104 </nav>
105 {
106 // Small screen header
107 }
108 <div className="block md:hidden">
109 <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
110 <Link href="/">
111 <a className="type-ui mb-12">Urbit</a>
112 </Link>
113 <ActiveLink className="mr-5 type-h3" href="/docs">
114 Docs
115 </ActiveLink>
116 <ActiveLink className="mr-5 type-h3" href="/blog">
117 Blog
118 </ActiveLink>
119 <ActiveLink className="mr-5 type-h3" href="/events">
120 Events
121 </ActiveLink>
122 </MenuTray>
124 <button
125 onClick={() => toggleTray(!isOpen)}
126 className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
127 >
128 {isOpen ? (
129 <svg
130 width="16"
131 height="16"
132 viewBox="0 0 16 16"
133 fill="none"
134 xmlns="http://www.w3.org/2000/svg"
135 >
136 <path
137 fill-rule="evenodd"
138 clip-rule="evenodd"
139 d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1312 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.13125 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"
140 fill="white"
141 />
142 </svg>
143 ) : (
144 <svg
145 width="16"
146 height="16"
147 viewBox="0 0 16 17"
148 fill="none"
149 xmlns="http://www.w3.org/2000/svg"
150 >
151 <rect width="16" height="3" rx="1.5" fill="white" />
152 <rect y="7" width="16" height="3" rx="1.5" fill="white" />
153 <rect y="14" width="16" height="3" rx="1.5" fill="white" />
154 </svg>
155 )}
156 </button>
157 </div>
158 </header>
159 );