@@ -1,47 +1,104 @@
11import classnames from "classnames";
2+import { useSwipeable } from "react-swipeable";
23
3−export default function MenuTray(props) {
4+export default function MenuTray({ isOpen, setTray, search, children }) {
45 // Locks document scrolling when menu is open
5−
66 if (typeof document !== "undefined") {
7− if (props.isOpen) {
7+ if (isOpen) {
88 document.body.style.overflow = "hidden";
99 } else {
1010 document.body.style.overflow = "visible";
1111 }
1212 }
1313
14+ const handlers = useSwipeable({
15+ onSwipedLeft: (e) => setTray(false),
16+ });
17+
1418 // Slides the tray in or out from the left
1519 const trayClasses = classnames({
16− "tray-menu-open": props.isOpen,
17− "tray-menu-closed": !props.isOpen,
20+ "tray-menu-open": isOpen,
21+ "tray-menu-closed": !isOpen,
1822 });
1923
2024 // Fades the background overlay in or out
2125 const overlayClasses = classnames({
22− "tray-overlay-open": props.isOpen,
23− "tray-overlay-closed": !props.isOpen,
26+ "tray-overlay-open": isOpen,
27+ "tray-overlay-closed": !isOpen,
2428 });
2529
2630 // Hides or shows the menu
2731 const menuClasses = classnames({
28− "menu-open": props.isOpen,
29− "menu-closed": !props.isOpen,
32+ "menu-open": isOpen,
33+ "menu-closed": !isOpen,
3034 });
3135
3236 return (
33− <nav className={`z-10 w-screen h-screen top-0 left-0 fixed ${menuClasses}`}>
34− <div
35− onClick={() => props.toggleTray(!props.isOpen)}
36− className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
37− />
38− <div
39− className={`absolute bg-wall h-screen top-0 left-0 tray-menu-width overflow-y-scroll mb-24 ${trayClasses}`}
37+ <>
38+ <nav
39+ {...handlers}
40+ className={`z-10 w-screen h-screen top-0 left-0 fixed block md:hidden ${menuClasses}`}
4041 >
41− <div className="flex flex-col px-4 md:px-8 pt-8 md:pt-10 lg:pt-12">
42− {props.children}
42+ <div
43+ onClick={() => setTray(!isOpen)}
44+ className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
45+ />
46+ <div
47+ className={`absolute bg-wall h-screen top-0 left-0 tray-menu-width overflow-y-scroll mb-24 ${trayClasses}`}
48+ >
49+ <div
50+ {...handlers}
51+ className="flex flex-col px-4 md:px-8 pt-8 md:pt-10 lg:pt-12"
52+ >
53+ {children}
54+ </div>
4355 </div>
44− </div>
45− </nav>
56+
57+ <button
58+ onClick={(e) => {
59+ e.stopPropagation();
60+ search.toggleSearch(e);
61+ }}
62+ 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 ${
63+ isOpen ? "flex" : "hidden"
64+ }`}
65+ >
66+ Search
67+ </button>
68+ </nav>
69+ <button
70+ onClick={() => setTray(!isOpen)}
71+ className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
72+ >
73+ {isOpen ? (
74+ <svg
75+ width="16"
76+ height="16"
77+ viewBox="0 0 16 16"
78+ fill="none"
79+ xmlns="http://www.w3.org/2000/svg"
80+ >
81+ <path
82+ fillRule="evenodd"
83+ clipRule="evenodd"
84+ 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"
85+ fill="white"
86+ />
87+ </svg>
88+ ) : (
89+ <svg
90+ width="16"
91+ height="16"
92+ viewBox="0 0 16 17"
93+ fill="none"
94+ xmlns="http://www.w3.org/2000/svg"
95+ >
96+ <rect width="16" height="3" rx="1.5" fill="white" />
97+ <rect y="7" width="16" height="3" rx="1.5" fill="white" />
98+ <rect y="14" width="16" height="3" rx="1.5" fill="white" />
99+ </svg>
100+ )}
101+ </button>
102+ </>
46103 );
47104}