Skip to content

[Portal] Redesign header with improved mobile menu layout #7138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 24, 2025
+190 −83
Merged

[Portal] Redesign header with improved mobile menu layout #7138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
267 changes: 189 additions & 78 deletions apps/portal/src/app/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@
import { ThirdwebIcon } from "../icons/thirdweb";

const links = [
{
name: "Connect",
href: "/connect",
icon: TableOfContentsIcon,
},
{
name: "Bridge",
href: "/pay",
Expand All @@ -46,13 +51,13 @@
name: "Nebula",
href: "/nebula",
},
];

const toolLinks = [
{
name: "Vault",
href: "/vault",
},
];

const toolLinks = [
{
name: "Chain List",
href: "https://thirdweb.com/chainlist",
Expand Down Expand Up @@ -140,6 +145,39 @@
},
];

const sdkLinks = [
{
name: "TypeScript",
href: "/typescript/v5",
icon: TypeScriptIcon,
},
{
name: "React",
href: "/react/v5",
icon: ReactIcon,
},
{
name: "React Native",
href: "/react-native/v5",
icon: ReactIcon,
},
{
name: ".NET",
href: "/dotnet",
icon: DotNetIcon,
},
{
name: "Unity",
href: "/unity",
icon: UnityIcon,
},
{
name: "Unreal Engine",
href: "/unreal-engine",
icon: UnrealEngineIcon,
},
];
Comment on lines +148 to +179
Copy link
Contributor

@coderabbitai coderabbitai bot May 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Eliminate code duplication between sdkLinks and connectLinks.

The newly added sdkLinks array duplicates most entries from the existing connectLinks array (lines 87-127), differing only by the missing "Overview" entry. This violates the DRY principle and creates maintenance overhead.

Consider deriving sdkLinks from connectLinks to eliminate duplication:

-const sdkLinks = [
-  {
-    name: "TypeScript",
-    href: "/typescript/v5",
-    icon: TypeScriptIcon,
-  },
-  {
-    name: "React",
-    href: "/react/v5",
-    icon: ReactIcon,
-  },
-  {
-    name: "React Native",
-    href: "/react-native/v5",
-    icon: ReactIcon,
-  },
-  {
-    name: ".NET",
-    href: "/dotnet",
-    icon: DotNetIcon,
-  },
-  {
-    name: "Unity",
-    href: "/unity",
-    icon: UnityIcon,
-  },
-  {
-    name: "Unreal Engine",
-    href: "/unreal-engine",
-    icon: UnrealEngineIcon,
-  },
-];
+const sdkLinks = connectLinks.filter(link => link.name !== "Overview");
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const sdkLinks = [
{
name: "TypeScript",
href: "/typescript/v5",
icon: TypeScriptIcon,
},
{
name: "React",
href: "/react/v5",
icon: ReactIcon,
},
{
name: "React Native",
href: "/react-native/v5",
icon: ReactIcon,
},
{
name: ".NET",
href: "/dotnet",
icon: DotNetIcon,
},
{
name: "Unity",
href: "/unity",
icon: UnityIcon,
},
{
name: "Unreal Engine",
href: "/unreal-engine",
icon: UnrealEngineIcon,
},
];
-const sdkLinks = [
- {
- name: "TypeScript",
- href: "/typescript/v5",
- icon: TypeScriptIcon,
- },
- {
- name: "React",
- href: "/react/v5",
- icon: ReactIcon,
- },
- {
- name: "React Native",
- href: "/react-native/v5",
- icon: ReactIcon,
- },
- {
- name: ".NET",
- href: "/dotnet",
- icon: DotNetIcon,
- },
- {
- name: "Unity",
- href: "/unity",
- icon: UnityIcon,
- },
- {
- name: "Unreal Engine",
- href: "/unreal-engine",
- icon: UnrealEngineIcon,
- },
-];
+const sdkLinks = connectLinks.filter(link => link.name !== "Overview");
🤖 Prompt for AI Agents 
In apps/portal/src/app/Header.tsx between lines 87-127 and 148-179, the sdkLinks
array duplicates most entries from the connectLinks array except for the
"Overview" entry. To fix this, refactor sdkLinks to be derived from connectLinks
by filtering out the "Overview" entry instead of redefining the entire array.
This will eliminate duplication and reduce maintenance overhead.


const supportLinks = [
{
name: "Get thirdweb support",
Expand All @@ -155,58 +193,57 @@
const [showBurgerMenu, setShowBurgerMenu] = useState(false);

return (
<header className="flex w-full items-center border-b bg-background">
<div className="container flex items-center justify-between gap-6 p-4 xl:justify-start">
<Link
className="flex items-center gap-2"
href="/"
aria-label="thirdweb Docs"
title="thirdweb Docs"
>
<ThirdwebIcon className="size-8" />
<span className="font-bold text-[23px] text-foreground leading-none tracking-tight">
Docs
</span>
</Link>

<div className="flex items-center gap-1 xl:hidden">
<ThemeSwitcher className="border-none bg-transparent" />

<DocSearch variant="icon" />

<header className="flex w-full flex-col gap-2 border-b bg-background p-2 lg:px-4">
<div className="container flex items-center justify-between gap-6">
{/* Top row */}
<div className="flex items-center gap-2">
<Link
href="https://github.com/thirdweb-dev"
target="_blank"
className="text-foreground"
className="flex items-center gap-2"
href="/"
aria-label="thirdweb Docs"
title="thirdweb Docs"
>
<GithubIcon className="mx-3 size-6" />
<ThirdwebIcon className="size-8" />
<span className="font-bold text-[23px] text-foreground leading-none tracking-tight">
Docs
</span>
</Link>

{/* Mobile burger menu */}
<Button
variant="ghost"
className="p-2"
onClick={() => setShowBurgerMenu(!showBurgerMenu)}
>
<MenuIcon className="size-7" />
</Button>
</div>

<nav
className={clsx(
"grow gap-5",
!showBurgerMenu ? "hidden xl:flex" : "flex",
"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",
"xl:static xl:animate-none xl:flex-row xl:justify-between xl:bg-transparent xl:p-0",
)}
>
<ul className="flex flex-col gap-5 xl:flex-row xl:items-center">
<DropdownLinks
links={connectLinks}
onLinkClick={() => setShowBurgerMenu(false)}
category="Connect"
/>
<div className="flex items-center gap-3">
<div className="hidden xl:flex">
<ThemeSwitcher />
</div>

<div className="hidden xl:block">
<DocSearch variant="search" />
</div>

<div className="flex items-center gap-1 xl:hidden">
<ThemeSwitcher className="border-none bg-transparent" />
<DocSearch variant="icon" />
<Link
href="https://github.com/thirdweb-dev"
target="_blank"
className="text-foreground"
>
<GithubIcon className="mx-3 size-6" />
</Link>
<Button
variant="ghost"
className="p-2"
onClick={() => setShowBurgerMenu(!showBurgerMenu)}
>
<MenuIcon className="size-7" />
</Button>
</div>
</div>
</div>

{/* Bottom row - hidden on mobile */}
<div className="container hidden items-center justify-between gap-6 xl:flex">
<nav className="flex grow gap-5">
<ul className="flex flex-row items-center gap-5">
{links.map((link) => {
return (
<li
Expand All @@ -230,50 +267,124 @@
category="Tools"
/>
</ul>
</nav>

<div className="flex items-center gap-3">
<div className="px-1">
<DropdownLinks
links={sdkLinks}
onLinkClick={() => setShowBurgerMenu(false)}
category="SDKs"
/>
</div>
<div className="px-1">
<DropdownLinks
links={apisLinks}
onLinkClick={() => setShowBurgerMenu(false)}
category="APIs"
/>
</div>

<div className="px-1">
<DropdownLinks
links={supportLinks}
onLinkClick={() => setShowBurgerMenu(false)}
category="Support"
/>
</div>

<NavLink
name="Changelog"
href="/changelog"
onClick={() => {
setShowBurgerMenu(false);
}}
/>

<Link
href="https://github.com/thirdweb-dev"
target="_blank"
className="text-muted-foreground transition-colors hover:text-foreground"
>
<GithubIcon className="mx-2 size-6" />
</Link>
</div>
</div>

<div className="flex flex-col justify-start gap-5 xl:flex-row xl:items-center xl:gap-3">
<div className="hidden xl:flex">
<ThemeSwitcher />
{/* Mobile menu */}
{showBurgerMenu && (
<div className="fixed inset-0 top-sticky-top-height z-50 overflow-auto bg-card p-6 xl:hidden">

Check warning on line 316 in apps/portal/src/app/Header.tsx

View workflow job for this annotation

GitHub Actions / Lint Packages 

Classname 'z-50' is not a Tailwind CSS class!
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
<h3 className="font-semibold text-lg">Products</h3>
{links.map((link) => (
<NavLink
key={link.name}
name={link.name}
href={link.href}
icon={link.icon}
onClick={() => setShowBurgerMenu(false)}
/>
))}
</div>

<div className="hidden xl:block">
<DocSearch variant="search" />
<div className="flex flex-col gap-4">
<h3 className="font-semibold text-lg">SDKs</h3>
{sdkLinks.map((link) => (
<NavLink
key={link.name}
name={link.name}
href={link.href}
icon={link.icon}
onClick={() => setShowBurgerMenu(false)}
/>
))}
</div>

<div className="xl:px-1">
<DropdownLinks
links={apisLinks}
onLinkClick={() => setShowBurgerMenu(false)}
category="APIs"
/>
<div className="flex flex-col gap-4">
<h3 className="font-semibold text-lg">APIs</h3>
{apisLinks.map((link) => (
<NavLink
key={link.name}
name={link.name}
href={link.href}
onClick={() => setShowBurgerMenu(false)}
/>
))}
</div>

<div className="xl:px-1">
<DropdownLinks
links={supportLinks}
onLinkClick={() => setShowBurgerMenu(false)}
category="Support"
/>
<div className="flex flex-col gap-4">
<h3 className="font-semibold text-lg">Support</h3>
{supportLinks.map((link) => (
<NavLink
key={link.name}
name={link.name}
href={link.href}
onClick={() => setShowBurgerMenu(false)}
/>
))}
</div>

<NavLink
name="Changelog"
href="/changelog"
onClick={() => {
setShowBurgerMenu(false);
}}
onClick={() => setShowBurgerMenu(false)}
/>

<Link
href="https://github.com/thirdweb-dev"
target="_blank"
className="hidden text-muted-foreground transition-colors hover:text-foreground xl:block"
>
<GithubIcon className="mx-2 size-6" />
</Link>
<div className="flex flex-col gap-4">
<h3 className="font-semibold text-lg">Tools</h3>
{toolLinks.map((link) => (
<NavLink
key={link.name}
name={link.name}
href={link.href}
onClick={() => setShowBurgerMenu(false)}
/>
))}
</div>
</div>
</nav>
</div>
</div>
)}
</header>
);
}
Expand Down
6 changes: 1 addition & 5 deletions apps/portal/src/components/others/DocSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@ export function DocSearch(props: { variant: "icon" | "search" }) {
<DialogTrigger asChild>
<Button
variant="outline"
className="flex w-56 justify-between px-3"
className="flex w-64 justify-between px-3"
>
Search Docs
<div className="flex items-center gap-1 rounded-sm border bg-background px-2 py-1 text-muted-foreground text-xs">
Expand Down Expand Up @@ -387,10 +387,6 @@ export function DocSearch(props: { variant: "icon" | "search" }) {
);
}

// function isNewSDK(href: string) {
// return href.includes("/typescript/v5");
// }

function getTagsFromHref(href: string): Tag[] | undefined {
if (href.includes("/react-native/v0")) {
if (href.includes("/references")) {
Expand Down
Loading