@@ -5,12 +5,14 @@ import { MenuIcon, XIcon } from "lucide-react";
55import Image from "next/image" ;
66import Link from "next/link" ;
77import { useEffect , useState } from "react" ;
8+ import { ScrollShadow } from "../components/ui/ScrollShadow/ScrollShadow" ;
89import { Button } from "../components/ui/button" ;
9- import { Sidebar } from "../components/ui/sidebar" ;
10- import { navLinks } from "./navLinks" ;
10+ import { Sidebar , type SidebarLink } from "../components/ui/sidebar" ;
1111import { otherLinks } from "./otherLinks" ;
1212
13- export function MobileHeader ( ) {
13+ export function MobileHeader ( props : {
14+ links : SidebarLink [ ] ;
15+ } ) {
1416 const [ isOpen , setIsOpen ] = useState ( false ) ;
1517
1618 useEffect ( ( ) => {
@@ -26,43 +28,53 @@ export function MobileHeader() {
2628 } , [ isOpen ] ) ;
2729
2830 return (
29- // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
30- < header
31- className = "sticky top-0 z-10 flex justify-between gap-4 border-b bg-background px-4 py-4 xl:hidden "
32- onClick = { ( e ) => {
33- if ( e . target instanceof HTMLAnchorElement ) {
34- setIsOpen ( false ) ;
35- }
36- } }
37- >
38- < Link
39- className = "flex items-center gap-3"
40- href = "/"
41- aria-label = "thirdweb Docs"
42- title = "thirdweb Docs"
43- >
44- < Image src = { thirdwebIconSrc } className = "size-7" alt = "" />
45- < span className = "font-bold text-xl leading-none tracking-tight" >
46- Playground
47- </ span >
48- </ Link >
49- < Button
50- variant = "outline"
51- className = "!h-auto p-2"
52- onClick = { ( ) => {
53- setIsOpen ( ( v ) => ! v ) ;
54- } }
55- >
56- { ! isOpen ? (
57- < MenuIcon className = "size-6" />
58- ) : (
59- < XIcon className = "size-6" />
60- ) }
61- </ Button >
31+ < >
32+ < header className = "sticky top-0 z-10 flex justify-between gap-4 border-b bg-background px-4 py-4 xl:hidden" >
33+ < Link
34+ className = "flex items-center gap-3"
35+ href = "/"
36+ aria-label = "thirdweb Docs"
37+ title = "thirdweb Docs"
38+ >
39+ < Image src = { thirdwebIconSrc } className = "size-7" alt = "" />
40+ < span className = "font-bold text-xl leading-none tracking-tight" >
41+ Playground
42+ </ span >
43+ </ Link >
44+ < Button
45+ variant = "outline"
46+ className = "!h-auto p-2"
47+ onClick = { ( ) => {
48+ setIsOpen ( ( v ) => ! v ) ;
49+ } }
50+ >
51+ { ! isOpen ? (
52+ < MenuIcon className = "size-6" />
53+ ) : (
54+ < XIcon className = "size-6" />
55+ ) }
56+ </ Button >
57+ </ header >
58+
6259 { 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" >
60+ < div
61+ 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"
62+ onClickCapture = { ( e ) => {
63+ if ( e . target instanceof HTMLElement && e . target . closest ( "a" ) ) {
64+ setIsOpen ( false ) ;
65+ }
66+ } }
67+ >
68+ < div className = "relative flex max-h-full flex-1 flex-col overflow-hidden" >
69+ < ScrollShadow
70+ className = "grow px-6"
71+ scrollableClassName = "max-h-full pt-6"
72+ >
73+ < Sidebar links = { props . links } />
74+ </ ScrollShadow >
75+ </ div >
76+
77+ < div className = "mt-auto flex flex-col gap-4 border-t px-6 py-6" >
6678 { otherLinks . map ( ( link ) => {
6779 return (
6880 < Link
@@ -78,6 +90,6 @@ export function MobileHeader() {
7890 </ div >
7991 </ div >
8092 ) }
81- </ header >
93+ </ >
8294 ) ;
8395}
0 commit comments