git.iko.soy/urbit.org
on d2fbd56 help sign in
urbit.org/components/Header.js
141 lines 4.5 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";
6import { useLockBodyScroll } from "../lib/hooks";
8function ActiveLink({ children, href, className }) {
9 const router = useRouter();
11 const firstCrumb = router.asPath.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 );
25function MenuTray(props) {
26 // Locks document scrolling when menu is open
27 if (typeof document !== "undefined") {
28 if (props.isOpen) {
29 document.body.style.overflow = "hidden";
30 } else {
31 document.body.style.overflow = "visible";
32 }
33 }
35 const activeClasses = classnames({
36 "tray-menu-open": props.isOpen,
37 "tray-menu-closed": !props.isOpen,
38 });
40 return (
41 <nav
42 className={`z-9 w-screen h-screen bg-wall flex top-0 left-0 flex-col p-4 pt-24 fixed ${activeClasses}`}
43 >
44 {props.children}
45 </nav>
46 );
49// This is the header for the index page
50export default function Header(props) {
51 const [isOpen, toggleTray] = useState(false);
52 return (
53 <header className="layout-wide flex justify-between items-center pt-12">
54 <div className="absolute z-10">
55 <Link href="/">
56 <a className="type-ui">Urbit</a>
57 </Link>
58 </div>
59 <Link href="/">
60 <a className="type-ui text-white">Urbit</a>
61 </Link>
62 {
63 // Large screen header
64 }
65 <nav className="items-center hidden md:flex">
66 <ActiveLink className="mr-5 type-ui" href="/docs">
67 Docs
68 </ActiveLink>
69 <ActiveLink className="mr-5 type-ui" href="/blog">
70 Blog
71 </ActiveLink>
72 <ActiveLink className="mr-5 type-ui" href="/events">
73 Events
74 </ActiveLink>
75 <button className="mr-5 text-green type-ui">Download Port</button>
76 <button
77 onClick={(e) => {
78 e.stopPropagation();
79 props.toggleSearch();
80 }}
81 className="button-sm bg-wall text-gray"
82 >
83 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
84 </button>
85 </nav>
86 {
87 // Small screen header
88 }
90 <div className="block md:hidden">
91 <MenuTray isOpen={isOpen}>
92 <ActiveLink className="mr-5 type-h3" href="/docs">
93 Docs
94 </ActiveLink>
95 <ActiveLink className="mr-5 type-h3" href="/blog">
96 Blog
97 </ActiveLink>
98 <ActiveLink className="mr-5 type-h3" href="/events">
99 Events
100 </ActiveLink>
101 <button className="button-sm bg-wall text-gray">
102 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
103 </button>
104 </MenuTray>
105 <button
106 onClick={() => toggleTray(!isOpen)}
107 className="z-10 absolute right-4 top-8"
108 >
109 {isOpen ? (
110 <svg
111 width="16"
112 height="16"
113 viewBox="0 0 16 16"
114 fill="none"
115 xmlns="http://www.w3.org/2000/svg"
116 >
117 <path
118 fill-rule="evenodd"
119 clip-rule="evenodd"
120 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"
121 fill="black"
122 />
123 </svg>
124 ) : (
125 <svg
126 width="16"
127 height="16"
128 viewBox="0 0 16 17"
129 fill="none"
130 xmlns="http://www.w3.org/2000/svg"
131 >
132 <rect width="16" height="3" rx="1.5" fill="black" />
133 <rect y="7" width="16" height="3" rx="1.5" fill="black" />
134 <rect y="14" width="16" height="3" rx="1.5" fill="black" />
135 </svg>
136 )}
137 </button>
138 </div>
139 </header>
140 );