Skip to content

Commit fd8674a

Browse files
MananTankMananTank
committed
Single Header component for App and Pages router (#4877)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on refactoring the dashboard components, enhancing the UI elements, and improving the overall structure of the codebase. It includes updates to navigation, styling, and the introduction of new components for better functionality. ### Detailed summary - Deleted unused files: `nav-link.client.tsx`, `headerLinks.ts`, `MobileBurgerMenu.tsx`. - Updated `cmd-k-search` button styling and icon size. - Changed import paths in `layout.tsx`. - Added `DashboardHeaderTabs` component to manage navigation. - Refactored `DashboardHeader` to streamline layout and include new links. - Updated `ColorModeToggle` and `CreditsButton` for better UI interaction. - Enhanced `CreditsItem` component layout and functionality. - Replaced `TrackedLinkButton` with `NavLink` in `UpgradeButton`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent d3b0dc6 commit fd8674a

File tree

14 files changed

+309
-507
lines changed

14 files changed

+309
-507
lines changed

‎apps/dashboard/src/@/components/ui/tabs.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,8 @@ function useUnderline<El extends HTMLElement>() {
165165
block: "nearest",
166166
inline: "center",
167167
});
168+
} else if (lineRef.current) {
169+
lineRef.current.style.width = "0px";
168170
}
169171
}
170172

‎apps/dashboard/src/app/(dashboard)/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AppFooter } from "@/components/blocks/app-footer";
2-
import { DashboardHeader } from "app/components/Header/DashboardHeader";
32
import { ErrorProvider } from "../../contexts/error-handler";
3+
import { DashboardHeader } from "../components/Header/DashboardHeader";
44

55
export default function DashboardLayout(props: { children: React.ReactNode }) {
66
return (

‎apps/dashboard/src/app/components/Header/DashboardHeader.tsx‎

Lines changed: 86 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,101 @@
1-
import { ColorModeToggle } from "@/components/color-mode-toggle";
2-
import { Spinner } from "@/components/ui/Spinner/Spinner";
1+
import { NavLink } from "@/components/ui/NavLink";
2+
import { Button } from "@/components/ui/button";
33
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
4-
import { ClientOnly } from "components/ClientOnly/ClientOnly";
4+
import { CmdKSearch } from "components/cmd-k-search";
5+
import { ColorModeToggle } from "components/color-mode/color-mode-toggle";
6+
import { Logo } from "components/logo";
7+
import { CreditsButton } from "components/settings/Account/Billing/CreditsButton";
8+
import { UpgradeButton } from "components/settings/Account/Billing/UpgradeButton";
9+
import { CircleHelpIcon } from "lucide-react";
510
import Link from "next/link";
6-
import { ThirdwebMiniLogo } from "../ThirdwebMiniLogo";
7-
import { NavLink } from "../nav-link.client";
8-
import { MobileBurgerMenu } from "./MobileBurgerMenu";
9-
import { headerLinks } from "./headerLinks";
11+
import { Suspense } from "react";
12+
import { DashboardHeaderTabs } from "./DashboardHeaderTabs";
1013

11-
export function DashboardHeader() {
14+
export const DashboardHeader: React.FC = () => {
1215
return (
13-
// the "h-24" avoids layout shift when connecting wallet (connected wallet button is taller than disconnected...)
14-
<header className="flex h-20 flex-shrink-0 flex-row items-center justify-between border-border border-b bg-muted/50 px-4 py-4 md:h-20 lg:px-6">
15-
{/* Left */}
16-
<div className="flex items-center gap-6">
17-
<div className="flex items-center gap-2">
18-
<MobileBurgerMenu />
16+
<div className="bg-muted/50">
17+
<header className="flex items-center justify-between px-4 py-3 lg:px-6">
18+
{/* left */}
19+
<div className="flex items-center gap-4">
1920
<Link href="/dashboard">
20-
<ThirdwebMiniLogo className="h-6" />
21+
<Logo hideWordmark />
2122
</Link>
23+
<CmdKSearch />
2224
</div>
2325

24-
<div className="hidden items-center gap-2 md:flex">
25-
{headerLinks.left.map((link) => (
26-
<NavLink
27-
key={link.href}
28-
href={link.href}
29-
target={link.href.startsWith("https") ? "_blank" : undefined}
30-
className="px-[10px] py-2 font-normal text-muted-foreground text-sm hover:text-foreground"
31-
activeClassName="font-medium text-foreground"
32-
>
33-
{link.name}
34-
</NavLink>
35-
))}
36-
</div>
37-
</div>
38-
{/* Right */}
39-
<div className="flex items-center gap-4">
40-
<div className="items-center gap-2 lg:flex">
41-
<div className="hidden items-center gap-2 lg:flex">
42-
{headerLinks.right.map((link) => (
43-
<Link
44-
key={link.href}
45-
href={link.href}
46-
target={link.href.startsWith("https") ? "_blank" : undefined}
47-
className="px-[10px] py-2 font-normal text-muted-foreground text-sm hover:text-foreground"
26+
{/* Right */}
27+
<div className="flex items-center gap-2">
28+
<div className="hidden gap-2 md:flex">
29+
<Suspense fallback={null}>
30+
<CreditsButton />
31+
</Suspense>
32+
<UpgradeButton />
33+
</div>
34+
35+
<HeaderNavLink
36+
trackingLabel="chainlist"
37+
href="/chainlist"
38+
label="Chainlist"
39+
/>
40+
41+
<HeaderNavLink
42+
trackingLabel="docs"
43+
href="https://portal.thirdweb.com"
44+
label="Docs"
45+
/>
46+
47+
<HeaderNavLink
48+
trackingLabel="support"
49+
href="/support"
50+
label="Support"
51+
/>
52+
53+
<div className="md:hidden">
54+
<Button asChild variant="ghost">
55+
<NavLink
56+
className="fade-in-0 !h-auto !w-auto p-2"
57+
href="/support"
58+
tracking={{
59+
category: "header",
60+
action: "click",
61+
label: "support",
62+
}}
4863
>
49-
{link.name}
50-
</Link>
51-
))}
64+
<CircleHelpIcon className="size-5" />
65+
</NavLink>
66+
</Button>
5267
</div>
68+
5369
<ColorModeToggle />
70+
71+
<div className="md:ml-2">
72+
<CustomConnectWallet />
73+
</div>
5474
</div>
75+
</header>
5576

56-
<ClientOnly
57-
ssr={
58-
<div className="flex h-[48px] w-[144px] items-center justify-center rounded-lg border bg-muted/50">
59-
<Spinner className="size-4" />
60-
</div>
61-
}
62-
>
63-
<CustomConnectWallet />
64-
</ClientOnly>
65-
</div>
66-
</header>
77+
<DashboardHeaderTabs />
78+
</div>
79+
);
80+
};
81+
82+
function HeaderNavLink(props: {
83+
label: string;
84+
trackingLabel: string;
85+
href: string;
86+
}) {
87+
return (
88+
<NavLink
89+
href={props.href}
90+
tracking={{
91+
category: "header",
92+
action: "click",
93+
label: props.trackingLabel,
94+
}}
95+
className="hidden px-2.5 text-muted-foreground text-sm hover:text-foreground md:block"
96+
activeClassName="text-foreground"
97+
>
98+
{props.label}
99+
</NavLink>
67100
);
68101
}

‎apps/dashboard/src/app/components/Header/DashboardHeaderTabs.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
"use client";
2+
3+
import { TabLinks } from "@/components/ui/tabs";
4+
import { usePathname } from "next/navigation";
5+
6+
export function DashboardHeaderTabs() {
7+
const pathname = usePathname() || "";
8+
return (
9+
<TabLinks
10+
className="w-full"
11+
tabContainerClassName="px-4"
12+
shadowColor="transparent"
13+
links={[
14+
{
15+
href: "/dashboard",
16+
name: "Home",
17+
isActive: pathname === "/dashboard",
18+
},
19+
{
20+
href: "/dashboard/connect/analytics",
21+
name: "Connect",
22+
isActive: pathname.startsWith("/dashboard/connect"),
23+
},
24+
{
25+
href: "/dashboard/contracts/deploy",
26+
name: "Contracts",
27+
isActive: pathname.startsWith("/dashboard/contracts"),
28+
},
29+
{
30+
href: "/dashboard/engine",
31+
name: "Engine",
32+
isActive: pathname.startsWith("/dashboard/engine"),
33+
},
34+
{
35+
href: "/dashboard/settings/api-keys",
36+
name: "Settings",
37+
isActive: pathname.startsWith("/dashboard/settings"),
38+
},
39+
]}
40+
/>
41+
);
42+
}

‎apps/dashboard/src/app/components/Header/MobileBurgerMenu.tsx‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎apps/dashboard/src/app/components/Header/headerLinks.ts‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎apps/dashboard/src/app/components/nav-link.client.tsx‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎apps/dashboard/src/components/cmd-k-search/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,12 +290,12 @@ export const CmdKSearch: React.FC = () => {
290290
</div>
291291

292292
<Button
293-
className="p-2 lg:hidden"
293+
className="!h-auto !w-auto p-2 lg:hidden"
294294
aria-label="Search any contract"
295295
variant="ghost"
296296
onClick={() => setOpen(true)}
297297
>
298-
<SearchIcon className="size-4" />
298+
<SearchIcon className="size-5" />
299299
</Button>
300300

301301
<CmdKSearchModal open={open} setOpen={setOpen} />

‎apps/dashboard/src/components/color-mode/color-mode-toggle.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import { Button } from "@/components/ui/button";
24
import { SkeletonContainer } from "@/components/ui/skeleton";
35
import { useTheme } from "next-themes";
@@ -21,15 +23,15 @@ export const ColorModeToggle: React.FC = () => {
2123
render={(v) => {
2224
return (
2325
<Button
24-
className="fade-in-0 p-2 md:p-3"
26+
className="fade-in-0 !h-auto !w-auto p-2 text-muted-foreground hover:text-foreground"
2527
variant="ghost"
2628
aria-label="toggle color"
2729
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
2830
>
2931
{v === "dark" ? (
30-
<FiMoon className="size-4 md:size-5" />
32+
<FiMoon className="size-5" />
3133
) : (
32-
<FiSun className="size-4 md:size-5" />
34+
<FiSun className="size-5" />
3335
)}
3436
</Button>
3537
);

0 commit comments

Comments
 (0)