11"use client" ;
2- import * as SidebarPrimitive from "fumadocs-core/sidebar" ;
3- import { useSidebar , useTreeContext , useTreePath } from "fumadocs-ui/provider" ;
4- import { createContext , ReactNode , useContext , useMemo , useState , useCallback } from "react" ;
2+ import { useTreeContext , useTreePath } from "fumadocs-ui/provider" ;
3+ import { createContext , ReactNode , useContext , useMemo , useState , useCallback , useEffect } from "react" ;
54import { useDocsNavigation } from "@/app/docs/DocsNavigationProvider" ;
6- import { PageTree } from "fumadocs-core/server " ;
5+ import * as PageTree from "fumadocs-core/page-tree " ;
76import Link from "next/link" ;
87import { usePathname } from "next/navigation" ;
98import { ChevronDown } from "lucide-react" ;
109import { cn } from "@/lib/utils" ;
1110import { Collapsible , CollapsibleContent , CollapsibleTrigger , } from "@/components/ui/collapsible" ;
12- import { ScrollArea , ScrollViewport } from "@/components/ui/scroll-area" ;
13- import { useOnChange } from "fumadocs-core/utils/use-on-change" ;
1411import { ncIsObject } from "@/utils/is" ;
1512
1613interface FolderContextType {
@@ -28,40 +25,16 @@ const useFolderContext = () => {
2825 return context ;
2926} ;
3027
31- interface InternalContext {
32- level : number ;
33- isMobile ?: boolean ;
34- closeSidebar ?: ( ) => void ;
35- }
36-
37- const InternalContext = createContext < InternalContext | null > ( null ) ;
38-
39- const useInternalContext = ( ) => {
40- const context = useContext ( InternalContext ) ;
41- if ( ! context ) {
42- throw new Error ( "useInternalContext must be used within an InternalContext Provider" ) ;
43- }
44- return context ;
45- } ;
46-
4728const Sidebar = ( { isMobile} : { isMobile ?: boolean } ) => {
4829 const { root} = useTreeContext ( ) ;
4930 const pathname = usePathname ( ) ;
5031 const { setIsOpen } = useDocsNavigation ( ) ;
5132
52- const { open} = useSidebar ( )
53-
5433 const closeSidebar = useCallback ( ( ) => {
5534 if ( isMobile ) {
5635 setIsOpen ( false ) ;
5736 }
5837 } , [ isMobile , setIsOpen ] ) ;
59-
60- const context = useMemo < InternalContext > ( ( ) => ( {
61- level : 1 ,
62- isMobile,
63- closeSidebar
64- } ) , [ isMobile , closeSidebar ] ) ;
6538
6639 const children = useMemo ( ( ) => {
6740 function renderItems ( items : PageTree . Node [ ] , level : number ) {
@@ -81,15 +54,11 @@ const Sidebar = ({isMobile}: {isMobile?: boolean}) => {
8154 } , [ pathname ] ) ;
8255
8356 return (
84- < InternalContext . Provider value = { context } >
85- < SidebarPrimitive . SidebarList removeScrollOn = "(width < 768px)" className = { cn ( "xl:flex sticky py-4 mr-3 flex-col shrink-0 " , open ? 'block' : 'hidden xl:block' , isMobile ? 'block' : 'hidden top-[120px] h-[calc(100dvh-120px)] w-64' ) } >
86- < ScrollArea className = "h-full" >
87- < ScrollViewport >
88- { children }
89- </ ScrollViewport >
90- </ ScrollArea >
91- </ SidebarPrimitive . SidebarList >
92- </ InternalContext . Provider >
57+ < div className = { cn ( "xl:flex sticky py-4 mr-3 flex-col shrink-0 " , isMobile ? 'block' : 'hidden xl:block' , isMobile ? 'w-64' : 'top-[120px] h-[calc(100dvh-120px)] w-64' ) } >
58+ < div className = "flex flex-col gap-2" >
59+ { children }
60+ </ div >
61+ </ div >
9362 ) ;
9463} ;
9564
@@ -99,14 +68,14 @@ function SidebarItem({item, children, level,}: {
9968 pathname : string ;
10069 level : number ;
10170} ) {
102- const context = useInternalContext ( ) ;
10371 const path = useTreePath ( ) ;
104-
10572 const active = path . includes ( item ) ;
106-
73+
10774 const handleLinkClick = ( ) => {
108- if ( context . closeSidebar ) {
109- context . closeSidebar ( ) ;
75+ // Close sidebar on mobile navigation
76+ const sidebar = document . querySelector ( '[data-sidebar="sidebar"]' ) ;
77+ if ( sidebar && window . innerWidth < 768 ) {
78+ // Mobile sidebar close logic will be handled by Shadcn sidebar
11079 }
11180 } ;
11281
@@ -122,7 +91,7 @@ function SidebarItem({item, children, level,}: {
12291 href = { item . url }
12392 onClick = { handleLinkClick }
12493 >
125- { ncIsObject ( item . icon ) ? item . icon : '' }
94+ { ncIsObject ( item . icon ) ? item . icon : '' }
12695 { item . name }
12796 </ Link >
12897 ) ;
@@ -131,11 +100,12 @@ function SidebarItem({item, children, level,}: {
131100 if ( item . type === "separator" ) {
132101 return (
133102 < p className = "text-fd-muted-foreground mt-6 mb-2 first:mt-0" >
134- { ncIsObject ( item . icon ) ? item . icon : '' }
103+ { ncIsObject ( item . icon ) ? item . icon : '' }
135104 { item . name }
136105 </ p >
137106 ) ;
138107 }
108+
139109 if ( item . type === "folder" ) {
140110 return (
141111 < SidebarFolder defaultOpen = { ( active || ( item . defaultOpen ?? false ) ) } >
@@ -148,14 +118,14 @@ function SidebarItem({item, children, level,}: {
148118 active
149119 ? "text-nc-content-grey-emphasis"
150120 : "text-nc-content-grey-subtle-2 hover:bg-nc-background-grey-light"
151- ) }
152- href = { item . index . url }
153- onClick = { handleLinkClick }
154- >
155- { ncIsObject ( item . index . icon ) ? item . index . icon : '' }
156- { item . index . name }
157- </ Link >
158- </ div >
121+ ) }
122+ href = { item . index . url }
123+ onClick = { handleLinkClick }
124+ >
125+ { ncIsObject ( item . index . icon ) ? item . index . icon : '' }
126+ { item . index . name }
127+ </ Link >
128+ </ div >
159129 </ SidebarFolderTrigger >
160130 ) : (
161131 < SidebarFolderTrigger >
@@ -165,7 +135,7 @@ function SidebarItem({item, children, level,}: {
165135 active ? "text-nc-content-grey-subtle-2 font-[600]" : ""
166136 ) }
167137 >
168- { ncIsObject ( item . icon ) ? item . icon : '' }
138+ { ncIsObject ( item . icon ) ? item . icon : '' }
169139 { item . name }
170140 </ div >
171141 </ SidebarFolderTrigger >
@@ -190,9 +160,9 @@ function SidebarFolder({defaultOpen = false, children}: {
190160} ) {
191161 const [ open , setOpen ] = useState ( defaultOpen ) ;
192162
193- useOnChange ( defaultOpen , ( v ) => {
194- if ( v ) setOpen ( v ) ;
195- } ) ;
163+ useEffect ( ( ) => {
164+ if ( defaultOpen ) setOpen ( defaultOpen ) ;
165+ } , [ defaultOpen ] ) ;
196166
197167 return (
198168 < Collapsible open = { open } onOpenChange = { setOpen } >
@@ -227,19 +197,9 @@ function SidebarFolderTrigger({children}: { children: ReactNode }) {
227197}
228198
229199function SidebarFolderContent ( { children} : { children : ReactNode } ) {
230- const ctx = useInternalContext ( ) ;
231-
232200 return (
233201 < CollapsibleContent >
234- < InternalContext . Provider
235- value = { useMemo ( ( ) => ( {
236- level : ctx . level + 1 ,
237- isMobile : ctx . isMobile ,
238- closeSidebar : ctx . closeSidebar
239- } ) , [ ctx . level , ctx . isMobile , ctx . closeSidebar ] ) }
240- >
241- { children }
242- </ InternalContext . Provider >
202+ { children }
243203 </ CollapsibleContent >
244204 ) ;
245205}
0 commit comments