@@ -102,59 +102,77 @@ export default function Header(props) {
102102 Search<div className="ml-4 text-lightGray">⌘K</div>
103103 </button>
104104 </nav>
105+ <button
106+ onClick={(e) => {
107+ e.stopPropagation();
108+ props.search.toggleSearch(e);
109+ }}
110+ className="button-sm bg-wall text-gray md:hidden justify-self-end"
111+ >
112+ Search<div className="ml-4 text-lightGray">⌘K</div>
113+ </button>
105114 {
106115 // Small screen header
107116 }
108− <div className="block md:hidden">
109− <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
110− <Link href="/">
111− <a className="type-ui mb-12">Urbit</a>
112− </Link>
113− <ActiveLink className="mr-5 type-h3" href="/docs">
114− Docs
115− </ActiveLink>
116− <ActiveLink className="mr-5 type-h3" href="/blog">
117− Blog
118− </ActiveLink>
119− <ActiveLink className="mr-5 type-h3" href="/events">
120− Events
121− </ActiveLink>
122− </MenuTray>
117+
118+ <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
119+ <Link href="/">
120+ <a className="type-ui mb-12">Urbit</a>
121+ </Link>
122+ <ActiveLink className="mr-5 type-h3" href="/docs">
123+ Docs
124+ </ActiveLink>
125+ <ActiveLink className="mr-5 type-h3" href="/blog">
126+ Blog
127+ </ActiveLink>
128+ <ActiveLink className="mr-5 type-h3" href="/events">
129+ Events
130+ </ActiveLink>
123131
124132 <button
125− onClick={() => toggleTray(!isOpen)}
126− className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
133+ onClick={(e) => {
134+ e.stopPropagation();
135+ props.search.toggleSearch(e);
136+ }}
137+ className="flex px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-gray absolute left-4 right-4 bottom-4"
127138 >
128− {isOpen ? (
129− <svg
130− width="16"
131− height="16"
132− viewBox="0 0 16 16"
133− fill="none"
134− xmlns="http://www.w3.org/2000/svg"
135− >
136− <path
137− fill-rule="evenodd"
138− clip-rule="evenodd"
139− 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"
140− fill="white"
141− />
142− </svg>
143− ) : (
144− <svg
145− width="16"
146− height="16"
147− viewBox="0 0 16 17"
148− fill="none"
149− xmlns="http://www.w3.org/2000/svg"
150− >
151− <rect width="16" height="3" rx="1.5" fill="white" />
152− <rect y="7" width="16" height="3" rx="1.5" fill="white" />
153− <rect y="14" width="16" height="3" rx="1.5" fill="white" />
154− </svg>
155− )}
139+ Search
156140 </button>
157− </div>
141+ </MenuTray>
142+
143+ <button
144+ onClick={() => toggleTray(!isOpen)}
145+ className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
146+ >
147+ {isOpen ? (
148+ <svg
149+ width="16"
150+ height="16"
151+ viewBox="0 0 16 16"
152+ fill="none"
153+ xmlns="http://www.w3.org/2000/svg"
154+ >
155+ <path
156+ fill-rule="evenodd"
157+ clip-rule="evenodd"
158+ 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"
159+ fill="white"
160+ />
161+ </svg>
162+ ) : (
163+ <svg
164+ width="16"
165+ height="16"
166+ viewBox="0 0 16 17"
167+ fill="none"
168+ xmlns="http://www.w3.org/2000/svg"
169+ >
170+ <rect width="16" height="3" rx="1.5" fill="white" />
171+ <rect y="7" width="16" height="3" rx="1.5" fill="white" />
172+ <rect y="14" width="16" height="3" rx="1.5" fill="white" />
173+ </svg>
174+ )}
175+ </button>
158176 </header>
159177 );
160178}