git.iko.soy/urbit.org
on master help sign in
more mobile menu
3be226aGavin Atkinson
components/Header.js+19−26
compare with master
unifiedsplit
@@ -50,13 +50,13 @@ function MenuTray(props) {
50 });
50 });
51
51
52 return (
52 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}`}>
54 <div
54 <div
55 onClick={() => props.toggleTray(!props.isOpen)}
55 onClick={() => props.toggleTray(!props.isOpen)}
56 className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
56 className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
57 />
57 />
58 <div
58 <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}`}
60 >
60 >
61 {props.children}
61 {props.children}
62 </div>
62 </div>
@@ -102,44 +102,37 @@ export default function Header(props) {
102 Search<div className="ml-4 text-lightGray">⌘K</div>
102 Search<div className="ml-4 text-lightGray">⌘K</div>
103 </button>
103 </button>
104 </nav>
104 </nav>
105− <button
105+
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>
114 {
106 {
115 // Small screen header
107 // Small screen header
116 }
108 }
117−
118 <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
109 <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
119 <Link href="/">
110 <Link href="/">
120− <a className="type-ui mb-12">Urbit</a>
111+ <a className="type-ui mb-12 mt-8">Urbit</a>
121 </Link>
112 </Link>
122− <ActiveLink className="mr-5 type-h3" href="/docs">
113+ <ActiveLink className="mr-5 mb-4 type-h3" href="/docs">
123 Docs
114 Docs
124 </ActiveLink>
115 </ActiveLink>
125− <ActiveLink className="mr-5 type-h3" href="/blog">
116+ <ActiveLink className="mr-5 mb-4 type-h3" href="/blog">
126 Blog
117 Blog
127 </ActiveLink>
118 </ActiveLink>
128− <ActiveLink className="mr-5 type-h3" href="/events">
119+ <ActiveLink className="mr-5 mb-4 type-h3" href="/events">
129 Events
120 Events
130 </ActiveLink>
121 </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>
141 </MenuTray>
122 </MenuTray>
142
123
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+
143 <button
136 <button
144 onClick={() => toggleTray(!isOpen)}
137 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"
138 className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
styles/globals.css+4
@@ -162,6 +162,10 @@ a:hover {
162 width: calc(100vw - 64px - 16px - 16px);
162 width: calc(100vw - 64px - 16px - 16px);
163}
163}
164
164
165+.mobile-search-button-width {
166+ width: calc(100vw - 64px - 16px - 16px - 16px - 16px);
167+}
168+
165.tray-overlay-open {
169.tray-overlay-open {
166 opacity: 1;
170 opacity: 1;
167 transition: opacity var(--tray-time);
171 transition: opacity var(--tray-time);