@@ -3,7 +3,6 @@ import { useRouter } from "next/router";
33import { useState } from "react";
44import classnames from "classnames";
55import path from "path";
6−import { useLockBodyScroll } from "../lib/hooks";
76
87function ActiveLink({ children, href, className }) {
98 const router = useRouter();
@@ -32,16 +31,35 @@ function MenuTray(props) {
3231 }
3332 }
3433
35− const activeClasses = classnames({
34+ // Slides the tray in or out from the left
35+ const trayClasses = classnames({
3636 "tray-menu-open": props.isOpen,
3737 "tray-menu-closed": !props.isOpen,
3838 });
3939
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+ });
45+
46+ // Hides or shows the menu
47+ const menuClasses = classnames({
48+ "menu-open": props.isOpen,
49+ "menu-closed": !props.isOpen,
50+ });
51+
4052 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}
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={`fixed 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>
4563 </nav>
4664 );
4765}
@@ -51,13 +69,8 @@ export default function Header(props) {
5169 const [isOpen, toggleTray] = useState(false);
5270 return (
5371 <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>
5972 <Link href="/">
60− <a className="type-ui text-white">Urbit</a>
73+ <a className="type-ui">Urbit</a>
6174 </Link>
6275 {
6376 // Large screen header
@@ -86,9 +99,11 @@ export default function Header(props) {
8699 {
87100 // Small screen header
88101 }
89−
90102 <div className="block md:hidden">
91− <MenuTray isOpen={isOpen}>
103+ <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
104+ <Link href="/">
105+ <a className="type-ui mb-12">Urbit</a>
106+ </Link>
92107 <ActiveLink className="mr-5 type-h3" href="/docs">
93108 Docs
94109 </ActiveLink>
@@ -98,13 +113,13 @@ export default function Header(props) {
98113 <ActiveLink className="mr-5 type-h3" href="/events">
99114 Events
100115 </ActiveLink>
101− <button className="button-sm bg-wall text-gray">
102− Search<div className="ml-4 text-lightGray">⌘K</div>
116+ <button className="fixed bottom-4 left-4 right-4 bg-white rounded-xl items-center justify-between flex px-4 h-16 type-ui text-gray">
117+ Search...
103118 </button>
104119 </MenuTray>
105120 <button
106121 onClick={() => toggleTray(!isOpen)}
107− className="z-10 absolute right-4 top-8"
122+ className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
108123 >
109124 {isOpen ? (
110125 <svg
@@ -118,7 +133,7 @@ export default function Header(props) {
118133 fill-rule="evenodd"
119134 clip-rule="evenodd"
120135 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"
136+ fill="white"
122137 />
123138 </svg>
124139 ) : (
@@ -129,9 +144,9 @@ export default function Header(props) {
129144 fill="none"
130145 xmlns="http://www.w3.org/2000/svg"
131146 >
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" />
147+ <rect width="16" height="3" rx="1.5" fill="white" />
148+ <rect y="7" width="16" height="3" rx="1.5" fill="white" />
149+ <rect y="14" width="16" height="3" rx="1.5" fill="white" />
135150 </svg>
136151 )}
137152 </button>