@@ -50,13 +50,13 @@ function MenuTray(props) {
5050 });
5151
5252 return (
53− <nav className={`w-screen h-screen top-0 left-0 fixed ${menuClasses}`}>
53+ <nav className={`z-10 w-screen h-screen top-0 left-0 fixed ${menuClasses}`}>
5454 <div
5555 onClick={() => props.toggleTray(!props.isOpen)}
5656 className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
5757 />
5858 <div
59− className={`absolute bg-wall h-screen top-0 left-0 flex flex-col p-4 pt-12 tray-menu-width ${trayClasses}`}
59+ className={`absolute bg-wall h-screen top-0 left-0 flex flex-col p-4 tray-menu-width ${trayClasses}`}
6060 >
6161 {props.children}
6262 </div>
@@ -102,44 +102,37 @@ 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>
105+
114106 {
115107 // Small screen header
116108 }
117−
118109 <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
119110 <Link href="/">
120− <a className="type-ui mb-12">Urbit</a>
111+ <a className="type-ui mb-12 mt-8">Urbit</a>
121112 </Link>
122− <ActiveLink className="mr-5 type-h3" href="/docs">
113+ <ActiveLink className="mr-5 mb-4 type-h3" href="/docs">
123114 Docs
124115 </ActiveLink>
125− <ActiveLink className="mr-5 type-h3" href="/blog">
116+ <ActiveLink className="mr-5 mb-4 type-h3" href="/blog">
126117 Blog
127118 </ActiveLink>
128− <ActiveLink className="mr-5 type-h3" href="/events">
119+ <ActiveLink className="mr-5 mb-4 type-h3" href="/events">
129120 Events
130121 </ActiveLink>
131−
132− <button
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"
138− >
139− Search
140− </button>
141122 </MenuTray>
142123
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+
143136 <button
144137 onClick={() => toggleTray(!isOpen)}
145138 className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"