Skip to content

Commit 32d463f

Browse files
joaquim-vergesjoaquim-verges
committed
[Portal] Redesign header with improved mobile menu layout
1 parent 7130f9a commit 32d463f

File tree

2 files changed

+142
-75
lines changed

2 files changed

+142
-75
lines changed

‎apps/portal/src/app/Header.tsx‎

Lines changed: 141 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -155,52 +155,57 @@ export function Header() {
155155
const [showBurgerMenu, setShowBurgerMenu] = useState(false);
156156

157157
return (
158-
<header className="flex w-full items-center border-b bg-background">
159-
<div className="container flex items-center justify-between gap-6 p-4 xl:justify-start">
160-
<Link
161-
className="flex items-center gap-2"
162-
href="/"
163-
aria-label="thirdweb Docs"
164-
title="thirdweb Docs"
165-
>
166-
<ThirdwebIcon className="size-8" />
167-
<span className="font-bold text-[23px] text-foreground leading-none tracking-tight">
168-
Docs
169-
</span>
170-
</Link>
171-
172-
<div className="flex items-center gap-1 xl:hidden">
173-
<ThemeSwitcher className="border-none bg-transparent" />
174-
175-
<DocSearch variant="icon" />
176-
158+
<header className="flex w-full flex-col gap-2 border-b bg-background p-2 lg:px-4">
159+
<div className="container flex items-center justify-between gap-6">
160+
{/* Top row */}
161+
<div className="flex items-center gap-2">
177162
<Link
178-
href="https://github.com/thirdweb-dev"
179-
target="_blank"
180-
className="text-foreground"
163+
className="flex items-center gap-2"
164+
href="/"
165+
aria-label="thirdweb Docs"
166+
title="thirdweb Docs"
181167
>
182-
<GithubIcon className="mx-3 size-6" />
168+
<ThirdwebIcon className="size-8" />
169+
<span className="font-bold text-[23px] text-foreground leading-none tracking-tight">
170+
Docs
171+
</span>
183172
</Link>
173+
</div>
184174

185-
{/* Mobile burger menu */}
186-
<Button
187-
variant="ghost"
188-
className="p-2"
189-
onClick={() => setShowBurgerMenu(!showBurgerMenu)}
190-
>
191-
<MenuIcon className="size-7" />
192-
</Button>
175+
<div className="flex items-center gap-3">
176+
<div className="hidden xl:flex">
177+
<ThemeSwitcher />
178+
</div>
179+
180+
<div className="hidden xl:block">
181+
<DocSearch variant="search" />
182+
</div>
183+
184+
<div className="flex items-center gap-1 xl:hidden">
185+
<ThemeSwitcher className="border-none bg-transparent" />
186+
<DocSearch variant="icon" />
187+
<Link
188+
href="https://github.com/thirdweb-dev"
189+
target="_blank"
190+
className="text-foreground"
191+
>
192+
<GithubIcon className="mx-3 size-6" />
193+
</Link>
194+
<Button
195+
variant="ghost"
196+
className="p-2"
197+
onClick={() => setShowBurgerMenu(!showBurgerMenu)}
198+
>
199+
<MenuIcon className="size-7" />
200+
</Button>
201+
</div>
193202
</div>
203+
</div>
194204

195-
<nav
196-
className={clsx(
197-
"grow gap-5",
198-
!showBurgerMenu ? "hidden xl:flex" : "flex",
199-
"fade-in-20 slide-in-from-top-3 fixed inset-0 top-sticky-top-height animate-in flex-col overflow-auto bg-card p-6",
200-
"xl:static xl:animate-none xl:flex-row xl:justify-between xl:bg-transparent xl:p-0",
201-
)}
202-
>
203-
<ul className="flex flex-col gap-5 xl:flex-row xl:items-center">
205+
{/* Bottom row - hidden on mobile */}
206+
<div className="container hidden items-center justify-between gap-6 xl:flex">
207+
<nav className="flex grow gap-5">
208+
<ul className="flex flex-row items-center gap-5">
204209
<DropdownLinks
205210
links={connectLinks}
206211
onLinkClick={() => setShowBurgerMenu(false)}
@@ -230,50 +235,116 @@ export function Header() {
230235
category="Tools"
231236
/>
232237
</ul>
238+
</nav>
233239

234-
<div className="flex flex-col justify-start gap-5 xl:flex-row xl:items-center xl:gap-3">
235-
<div className="hidden xl:flex">
236-
<ThemeSwitcher />
240+
<div className="flex items-center gap-3">
241+
<div className="px-1">
242+
<DropdownLinks
243+
links={apisLinks}
244+
onLinkClick={() => setShowBurgerMenu(false)}
245+
category="APIs"
246+
/>
247+
</div>
248+
249+
<div className="px-1">
250+
<DropdownLinks
251+
links={supportLinks}
252+
onLinkClick={() => setShowBurgerMenu(false)}
253+
category="Support"
254+
/>
255+
</div>
256+
257+
<NavLink
258+
name="Changelog"
259+
href="/changelog"
260+
onClick={() => {
261+
setShowBurgerMenu(false);
262+
}}
263+
/>
264+
265+
<Link
266+
href="https://github.com/thirdweb-dev"
267+
target="_blank"
268+
className="text-muted-foreground transition-colors hover:text-foreground"
269+
>
270+
<GithubIcon className="mx-2 size-6" />
271+
</Link>
272+
</div>
273+
</div>
274+
275+
{/* Mobile menu */}
276+
{showBurgerMenu && (
277+
<div className="fixed inset-0 top-sticky-top-height z-50 overflow-auto bg-card p-6 xl:hidden">
278+
<div className="flex flex-col gap-6">
279+
<div className="flex flex-col gap-4">
280+
<h3 className="font-semibold text-lg">Connect</h3>
281+
{connectLinks.map((link) => (
282+
<NavLink
283+
key={link.name}
284+
name={link.name}
285+
href={link.href}
286+
onClick={() => setShowBurgerMenu(false)}
287+
icon={link.icon}
288+
/>
289+
))}
290+
</div>
291+
292+
<div className="flex flex-col gap-4">
293+
<h3 className="font-semibold text-lg">Products</h3>
294+
{links.map((link) => (
295+
<NavLink
296+
key={link.name}
297+
name={link.name}
298+
href={link.href}
299+
onClick={() => setShowBurgerMenu(false)}
300+
/>
301+
))}
237302
</div>
238303

239-
<div className="hidden xl:block">
240-
<DocSearch variant="search" />
304+
<div className="flex flex-col gap-4">
305+
<h3 className="font-semibold text-lg">Tools</h3>
306+
{toolLinks.map((link) => (
307+
<NavLink
308+
key={link.name}
309+
name={link.name}
310+
href={link.href}
311+
onClick={() => setShowBurgerMenu(false)}
312+
/>
313+
))}
241314
</div>
242315

243-
<div className="xl:px-1">
244-
<DropdownLinks
245-
links={apisLinks}
246-
onLinkClick={() => setShowBurgerMenu(false)}
247-
category="APIs"
248-
/>
316+
<div className="flex flex-col gap-4">
317+
<h3 className="font-semibold text-lg">APIs</h3>
318+
{apisLinks.map((link) => (
319+
<NavLink
320+
key={link.name}
321+
name={link.name}
322+
href={link.href}
323+
onClick={() => setShowBurgerMenu(false)}
324+
/>
325+
))}
249326
</div>
250327

251-
<div className="xl:px-1">
252-
<DropdownLinks
253-
links={supportLinks}
254-
onLinkClick={() => setShowBurgerMenu(false)}
255-
category="Support"
256-
/>
328+
<div className="flex flex-col gap-4">
329+
<h3 className="font-semibold text-lg">Support</h3>
330+
{supportLinks.map((link) => (
331+
<NavLink
332+
key={link.name}
333+
name={link.name}
334+
href={link.href}
335+
onClick={() => setShowBurgerMenu(false)}
336+
/>
337+
))}
257338
</div>
258339

259340
<NavLink
260341
name="Changelog"
261342
href="/changelog"
262-
onClick={() => {
263-
setShowBurgerMenu(false);
264-
}}
343+
onClick={() => setShowBurgerMenu(false)}
265344
/>
266-
267-
<Link
268-
href="https://github.com/thirdweb-dev"
269-
target="_blank"
270-
className="hidden text-muted-foreground transition-colors hover:text-foreground xl:block"
271-
>
272-
<GithubIcon className="mx-2 size-6" />
273-
</Link>
274345
</div>
275-
</nav>
276-
</div>
346+
</div>
347+
)}
277348
</header>
278349
);
279350
}

‎apps/portal/src/components/others/DocSearch.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ export function DocSearch(props: { variant: "icon" | "search" }) {
357357
<DialogTrigger asChild>
358358
<Button
359359
variant="outline"
360-
className="flex w-56 justify-between px-3"
360+
className="flex w-64 justify-between px-3"
361361
>
362362
Search Docs
363363
<div className="flex items-center gap-1 rounded-sm border bg-background px-2 py-1 text-muted-foreground text-xs">
@@ -387,10 +387,6 @@ export function DocSearch(props: { variant: "icon" | "search" }) {
387387
);
388388
}
389389

390-
// function isNewSDK(href: string) {
391-
// return href.includes("/typescript/v5");
392-
// }
393-
394390
function getTagsFromHref(href: string): Tag[] | undefined {
395391
if (href.includes("/react-native/v0")) {
396392
if (href.includes("/references")) {

0 commit comments

Comments
 (0)