git.iko.soy/urbit.org
on 8cef528 help sign in
urbit.org/components/Header.js
135 lines 4.4 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() {
51 const [isOpen, toggleTray] = useState(false);
52 return (
53 <header className="layout-wide flex justify-between items-center pt-8">
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 className="button-sm bg-wall text-gray">
77 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
78 </button>
79 </nav>
80 {
81 // Small screen header
82 }
84 <div className="block md:hidden">
85 <MenuTray isOpen={isOpen}>
86 <ActiveLink className="mr-5 type-h3" href="/docs">
87 Docs
88 </ActiveLink>
89 <ActiveLink className="mr-5 type-h3" href="/blog">
90 Blog
91 </ActiveLink>
92 <ActiveLink className="mr-5 type-h3" href="/events">
93 Events
94 </ActiveLink>
95 <button className="button-sm bg-wall text-gray">
96 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
97 </button>
98 </MenuTray>
99 <button
100 onClick={() => toggleTray(!isOpen)}
101 className="z-10 absolute right-4 top-8"
102 >
103 {isOpen ? (
104 <svg
105 width="16"
106 height="16"
107 viewBox="0 0 16 16"
108 fill="none"
109 xmlns="http://www.w3.org/2000/svg"
110 >
111 <path
112 fill-rule="evenodd"
113 clip-rule="evenodd"
114 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"
115 fill="black"
116 />
117 </svg>
118 ) : (
119 <svg
120 width="16"
121 height="16"
122 viewBox="0 0 16 17"
123 fill="none"
124 xmlns="http://www.w3.org/2000/svg"
125 >
126 <rect width="16" height="3" rx="1.5" fill="black" />
127 <rect y="7" width="16" height="3" rx="1.5" fill="black" />
128 <rect y="14" width="16" height="3" rx="1.5" fill="black" />
129 </svg>
130 )}
131 </button>
132 </div>
133 </header>
134 );