Skip to content

Commit 5b5ac92

Browse files
MananTankMananTank
committed
[TOOL-3299] Playground: Update Sidebar, Minor improvements and fixes
1 parent 9a432af commit 5b5ac92

File tree

18 files changed

+386
-406
lines changed

18 files changed

+386
-406
lines changed

‎apps/playground-web/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"prelint": "biome check ./src",
1111
"lint": "eslint ./src",
1212
"prefix": "biome check ./src --fix",
13-
"fix": "eslint ./src --fix"
13+
"fix": "eslint ./src --fix",
14+
"typecheck": "tsc --noEmit"
1415
},
1516
"dependencies": {
1617
"@abstract-foundation/agw-client": "^1.4.0",
@@ -36,6 +37,7 @@
3637
"lucide-react": "0.474.0",
3738
"next": "15.1.6",
3839
"next-themes": "^0.4.4",
40+
"nextjs-toploader": "^1.6.12",
3941
"prettier": "3.3.3",
4042
"react": "19.0.0",
4143
"react-dom": "19.0.0",

‎apps/playground-web/src/app/AppSidebar.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,32 @@ import thirdwebIconSrc from "@/../public/thirdweb.svg";
22
import { Sidebar } from "@/components/ui/sidebar";
33
import Image from "next/image";
44
import Link from "next/link";
5+
import { ScrollShadow } from "../components/ui/ScrollShadow/ScrollShadow";
56
import { navLinks } from "./navLinks";
67
import { otherLinks } from "./otherLinks";
78

89
export function AppSidebar() {
910
return (
10-
<div className="sticky top-0 z-10 hidden h-dvh w-[300px] flex-col border-border/50 border-r-2 xl:flex">
11-
<div className="px-6 pt-6">
12-
<Link
13-
className="flex items-center gap-2"
14-
href="/"
15-
aria-label="thirdweb Docs"
16-
title="thirdweb Docs"
17-
>
18-
<Image src={thirdwebIconSrc} className="size-6" alt="" />
11+
<div className="z-10 hidden h-dvh w-[300px] flex-col border-border/50 border-r-2 xl:flex">
12+
<div className="border-b px-6 py-5">
13+
<div className="flex items-center gap-2">
14+
<Image src={thirdwebIconSrc} className="size-6" alt="thirdweb" />
1915
<span className="font-bold text-lg leading-none tracking-tight">
2016
Playground
2117
</span>
22-
</Link>
18+
</div>
2319
</div>
2420

25-
<div className="h-5" />
26-
27-
<div className="px-6">
28-
<Sidebar links={navLinks} />
21+
<div className="relative flex max-h-full flex-1 flex-col overflow-hidden">
22+
<ScrollShadow
23+
className="grow pr-4 pl-6"
24+
scrollableClassName="max-h-full pt-6"
25+
>
26+
<Sidebar links={navLinks} />
27+
</ScrollShadow>
2928
</div>
3029

31-
<div className="mt-auto flex flex-col gap-4 p-6">
30+
<div className="mt-auto flex flex-col gap-4 border-t px-6 py-6">
3231
{otherLinks.map((link) => {
3332
return (
3433
<Link

‎apps/playground-web/src/app/MobileHeader.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { MenuIcon, XIcon } from "lucide-react";
55
import Image from "next/image";
66
import Link from "next/link";
77
import { useEffect, useState } from "react";
8+
import { ScrollShadow } from "../components/ui/ScrollShadow/ScrollShadow";
89
import { Button } from "../components/ui/button";
910
import { Sidebar } from "../components/ui/sidebar";
1011
import { navLinks } from "./navLinks";
@@ -60,9 +61,17 @@ export function MobileHeader() {
6061
)}
6162
</Button>
6263
{isOpen && (
63-
<div className="fade-in-0 slide-in-from-top-5 fixed top-[75px] right-0 bottom-0 left-0 z-50 flex animate-in flex-col gap-6 overflow-auto bg-background p-6 duration-200">
64-
<Sidebar links={navLinks} />
65-
<div className="mt-auto flex flex-col gap-4">
64+
<div className="fade-in-0 slide-in-from-top-5 fixed top-[75px] right-0 bottom-0 left-0 z-50 flex animate-in flex-col bg-background duration-200">
65+
<div className="relative flex max-h-full flex-1 flex-col overflow-hidden">
66+
<ScrollShadow
67+
className="grow px-6"
68+
scrollableClassName="max-h-full pt-6"
69+
>
70+
<Sidebar links={navLinks} />
71+
</ScrollShadow>
72+
</div>
73+
74+
<div className="mt-auto flex flex-col gap-4 border-t px-6 py-6">
6675
{otherLinks.map((link) => {
6776
return (
6877
<Link

‎apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { abstractWallet } from "@abstract-foundation/agw-react/thirdweb";
22
import { XIcon } from "lucide-react";
3-
import { useRouter } from "next/navigation";
4-
import { useEffect, useMemo } from "react";
3+
import { usePathname } from "next/navigation";
4+
import { useEffect, useState } from "react";
55
import {
66
arbitrumSepolia,
77
baseSepolia,
@@ -25,21 +25,26 @@ import { cn } from "../../../../lib/utils";
2525
import { CodeGen } from "../components/CodeGen";
2626
import type { ConnectPlaygroundOptions } from "../components/types";
2727

28+
type Tab = "modal" | "button" | "code";
29+
2830
export function RightSection(props: {
2931
connectOptions: ConnectPlaygroundOptions;
3032
tab?: string;
3133
}) {
32-
const router = useRouter();
33-
const previewTab = useMemo(
34-
() =>
35-
["modal", "button", "code"].includes(props.tab || "")
36-
? (props.tab as "modal" | "button" | "code")
37-
: "modal",
38-
[props.tab],
39-
);
40-
const setPreviewTab = (tab: "modal" | "button" | "code") => {
41-
router.push(`/connect/sign-in?tab=${tab}`);
42-
};
34+
const pathname = usePathname();
35+
const [previewTab, _setPreviewTab] = useState<Tab>(() => {
36+
return props.tab === "code"
37+
? "code"
38+
: props.tab === "button"
39+
? "button"
40+
: "modal";
41+
});
42+
43+
function setPreviewTab(tab: "modal" | "button" | "code") {
44+
_setPreviewTab(tab);
45+
window.history.replaceState({}, "", `${pathname}?tab=${tab}`);
46+
}
47+
4348
const { connectOptions } = props;
4449
const wallet = useActiveWallet();
4550
const account = useActiveAccount();

‎apps/playground-web/src/app/connect/sign-in/components/WalletsSelection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ function WalletButton(props: {
134134
>
135135
<span className="flex items-center gap-3">
136136
<Img
137-
src={walletImage.data || ""}
137+
src={walletImage.data}
138138
alt=""
139139
className="size-7 rounded-lg"
140140
loading="lazy"

‎apps/playground-web/src/app/globals.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,17 @@ html.dark .shiki span {
7979
font-weight: var(--shiki-dark-font-weight) !important;
8080
text-decoration: var(--shiki-dark-text-decoration) !important;
8181
}
82+
83+
@layer utilities {
84+
/* Hide scrollbar for Chrome, Safari and Opera */
85+
.no-scrollbar::-webkit-scrollbar,
86+
.no-scrollbar *::-webkit-scrollbar {
87+
display: none;
88+
}
89+
/* Hide scrollbar for IE, Edge and Firefox */
90+
.no-scrollbar,
91+
.no-scrollbar * {
92+
-ms-overflow-style: none; /* IE and Edge */
93+
scrollbar-width: none; /* Firefox */
94+
}
95+
}

‎apps/playground-web/src/app/layout.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Script from "next/script";
66
import { AppSidebar } from "./AppSidebar";
77
import { Providers } from "./providers";
88
import "./globals.css";
9+
import NextTopLoader from "nextjs-toploader";
910
import { MobileHeader } from "./MobileHeader";
1011

1112
const sansFont = Inter({
@@ -49,14 +50,18 @@ export default function RootLayout({
4950
monoFont.variable,
5051
)}
5152
>
53+
<NextTopLoader
54+
color="hsl(var(--foreground))"
55+
height={2}
56+
shadow={false}
57+
showSpinner={false}
58+
/>
5259
<MobileHeader />
53-
<div className="relative">
54-
<div className="flex flex-col lg:flex-row">
55-
<AppSidebar />
56-
<div className="flex grow flex-col">
57-
<div className="container relative grow px-4 md:px-6">
58-
<Providers>{children}</Providers>
59-
</div>
60+
<div className="flex h-dvh flex-col lg:flex-row">
61+
<AppSidebar />
62+
<div className="flex grow flex-col overflow-auto">
63+
<div className="container relative grow px-4 md:px-6">
64+
<Providers>{children}</Providers>
6065
</div>
6166
</div>
6267
</div>

0 commit comments

Comments
 (0)