@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
33import { useState } from "react";
44import classnames from "classnames";
55import path from "path";
6+import MenuTray from "../components/MenuTray";
67
78function ActiveLink({ children, href, className }) {
89 const router = useRouter();
@@ -21,58 +22,10 @@ function ActiveLink({ children, href, className }) {
2122 );
2223}
2324
24−function 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− }
33−
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− });
39−
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−
52− return (
53− <nav className={`z-10 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 tray-menu-width ${trayClasses}`}
60− >
61− {props.children}
62− </div>
63− </nav>
64− );
65−}
66−
6725// This is the header for the index page
6826export default function Header(props) {
6927 const [isOpen, toggleTray] = useState(false);
7028
71− const mobileSearchButtonClasses = classnames({
72− visible: isOpen,
73− invisible: !isOpen,
74− });
75−
7629 return (
7730 <header className="layout-wide flex justify-between items-center pt-12">
7831 <Link href="/">
@@ -91,7 +44,9 @@ export default function Header(props) {
9144 <ActiveLink className="mr-5 type-ui" href="/events">
9245 Events
9346 </ActiveLink>
94− <button className="mr-5 text-green type-ui">Download Port</button>
47+ <button className="mr-5 text-green type-ui button-text">
48+ Download Port
49+ </button>
9550 <button
9651 onClick={(e) => {
9752 e.stopPropagation();
@@ -121,51 +76,55 @@ export default function Header(props) {
12176 </ActiveLink>
12277 </MenuTray>
12378
124− <button
125− onClick={(e) => {
126− e.stopPropagation();
127− props.search.toggleSearch(e);
128− }}
129− className={`z-10 fixed px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-gray left-4 right-4 bottom-4 mobile-search-button-width ${
130− isOpen ? "flex" : "hidden"
131− }`}
132− >
133− Search
134− </button>
135−
136− <button
137− onClick={() => toggleTray(!isOpen)}
138− className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
139− >
140− {isOpen ? (
141− <svg
142− width="16"
143− height="16"
144− viewBox="0 0 16 16"
145− fill="none"
146− xmlns="http://www.w3.org/2000/svg"
147− >
148− <path
149− fill-rule="evenodd"
150− clip-rule="evenodd"
151− 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"
152− fill="white"
153− />
154− </svg>
155− ) : (
156− <svg
157− width="16"
158− height="16"
159− viewBox="0 0 16 17"
160− fill="none"
161− xmlns="http://www.w3.org/2000/svg"
162− >
163− <rect width="16" height="3" rx="1.5" fill="white" />
164− <rect y="7" width="16" height="3" rx="1.5" fill="white" />
165− <rect y="14" width="16" height="3" rx="1.5" fill="white" />
166− </svg>
167− )}
168− </button>
79+ {
80+ // Mobile menu button and search button
81+ }
82+ <div className="block md:hidden">
83+ <button
84+ onClick={(e) => {
85+ e.stopPropagation();
86+ props.search.toggleSearch(e);
87+ }}
88+ className={`z-10 fixed px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-gray left-4 right-4 bottom-4 mobile-search-button-width ${
89+ isOpen ? "flex" : "hidden"
90+ }`}
91+ >
92+ Search
93+ </button>
94+ <button
95+ onClick={() => toggleTray(!isOpen)}
96+ className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
97+ >
98+ {isOpen ? (
99+ <svg
100+ width="16"
101+ height="16"
102+ viewBox="0 0 16 16"
103+ fill="none"
104+ xmlns="http://www.w3.org/2000/svg"
105+ >
106+ <path
107+ fill-rule="evenodd"
108+ clip-rule="evenodd"
109+ 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"
110+ fill="white"
111+ />
112+ </svg>
113+ ) : (
114+ <svg
115+ width="16"
116+ height="16"
117+ viewBox="0 0 16 17"
118+ fill="none"
119+ xmlns="http://www.w3.org/2000/svg"
120+ >
121+ <rect width="16" height="3" rx="1.5" fill="white" />
122+ <rect y="7" width="16" height="3" rx="1.5" fill="white" />
123+ <rect y="14" width="16" height="3" rx="1.5" fill="white" />
124+ </svg>
125+ )}
126+ </button>
127+ </div>
169128 </header>
170129 );
171130}