git.iko.soy/urbit.org
on 4fdc19d help sign in
urbit.org/components/MenuTray.js
104 lines 3.5 kB history raw
1import classnames from "classnames";
2import { useSwipeable } from "react-swipeable";
4export default function MenuTray({ isOpen, setTray, search, children }) {
5 // Locks document scrolling when menu is open
6 if (typeof document !== "undefined") {
7 if (isOpen) {
8 document.body.style.overflow = "hidden";
9 } else {
10 document.body.style.overflow = "visible";
11 }
12 }
14 const handlers = useSwipeable({
15 onSwipedLeft: (e) => setTray(false),
16 });
18 // Slides the tray in or out from the left
19 const trayClasses = classnames({
20 "tray-menu-open": isOpen,
21 "tray-menu-closed": !isOpen,
22 });
24 // Fades the background overlay in or out
25 const overlayClasses = classnames({
26 "tray-overlay-open": isOpen,
27 "tray-overlay-closed": !isOpen,
28 });
30 // Hides or shows the menu
31 const menuClasses = classnames({
32 "menu-open": isOpen,
33 "menu-closed": !isOpen,
34 });
36 return (
37 <>
38 <nav
39 {...handlers}
40 className={`z-10 w-screen h-screen top-0 left-0 fixed block md:hidden ${menuClasses}`}
41 >
42 <div
43 onClick={() => setTray(!isOpen)}
44 className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
45 />
46 <div
47 className={`absolute bg-wall-100 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>
55 </div>
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-wall-500 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-wall-600 flex items-center justify-center rounded-full md:hidden"
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 </>
103 );