git.iko.soy/urbit.org
on 6d42e8a help sign in
urbit.org/components/MenuTray.js
108 lines 3.6 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-20 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-20 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-20 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 xmlns="http://www.w3.org/2000/svg"
79 >
80 <path
81 fillRule="evenodd"
82 clipRule="evenodd"
83 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"
84 className="fill-white"
85 />
86 </svg>
87 ) : (
88 <svg
89 width="16"
90 height="16"
91 viewBox="0 0 16 17"
92 xmlns="http://www.w3.org/2000/svg"
93 >
94 <rect width="16" height="3" rx="1.5" className="fill-white" />
95 <rect y="7" width="16" height="3" rx="1.5" className="fill-white" />
96 <rect
97 y="14"
98 width="16"
99 height="3"
100 rx="1.5"
101 className="fill-white"
102 />
103 </svg>
104 )}
105 </button>
106 </>
107 );