@@ -17,6 +17,9 @@ export const SidebarProduct = () => {
17
17
18
18
const productTitle = currentProductTree . renderedShortTitle || currentProductTree . renderedFullTitle
19
19
const routePath = `/${ router . locale } ${ router . asPath . split ( '?' ) [ 0 ] } ` // remove query string
20
+ const hasExactCategory = currentProductTree . childPages . find ( ( { href } ) =>
21
+ routePath . includes ( href )
22
+ )
20
23
return (
21
24
< >
22
25
< AllProductsLink />
@@ -40,6 +43,7 @@ export const SidebarProduct = () => {
40
43
const childTitle = childPage . renderedShortTitle || childPage . renderedFullTitle
41
44
const isActive = routePath . includes ( childPage . href )
42
45
const isCurrent = routePath === childPage . href
46
+ const defaultOpen = hasExactCategory ? isActive : i < 3
43
47
return (
44
48
< li
45
49
key = { childPage . href + i }
@@ -59,7 +63,7 @@ export const SidebarProduct = () => {
59
63
</ Link >
60
64
) : (
61
65
< CollapsibleSection
62
- index = { i }
66
+ defaultOpen = { defaultOpen }
63
67
routePath = { routePath }
64
68
title = { childTitle }
65
69
page = { childPage }
@@ -77,15 +81,15 @@ export const SidebarProduct = () => {
77
81
}
78
82
79
83
type SectionProps = {
80
- index : number
81
84
routePath : string
82
85
page : CurrentProductTree
83
86
title : string
87
+ defaultOpen : boolean
84
88
}
85
89
const CollapsibleSection = ( props : SectionProps ) => {
86
- const { routePath, index , title, page } = props
87
- const isDefaultOpen = routePath . includes ( page . href ) || index < 3
88
- const { getDetailsProps , open : isOpen } = useDetails ( { defaultOpen : isDefaultOpen } )
90
+ const { routePath, defaultOpen , title, page } = props
91
+ const { getDetailsProps , open : isOpen } = useDetails ( { defaultOpen : defaultOpen } )
92
+ const hideChildren = ! defaultOpen
89
93
return (
90
94
< Details { ...getDetailsProps ( ) } className = "details-reset" >
91
95
< summary >
@@ -96,96 +100,104 @@ const CollapsibleSection = (props: SectionProps) => {
96
100
>
97
101
{ title }
98
102
</ Link >
99
- { page . childPages . length > 0 && (
103
+ { ! hideChildren && page . childPages . length > 0 && (
100
104
< span style = { { marginTop : 7 } } className = "flex-shrink-0 pr-3" >
101
105
< ChevronDownIcon className = { cx ( 'opacity-60' , isOpen && 'rotate-180' ) } />
102
106
</ span >
103
107
) }
104
108
</ div >
105
109
</ summary >
106
- { /* <!-- some categories have maptopics with child articles --> */ }
107
- { page . childPages [ 0 ] . page . documentType === 'mapTopic' ? (
108
- < ul className = "sidebar-topics list-style-none position-relative" >
109
- { page . childPages . map ( ( childPage , i ) => {
110
- const childTitle = childPage . renderedShortTitle || childPage . renderedFullTitle
111
- const isActive = routePath . includes ( childPage . href )
112
- const isCurrent = routePath === childPage . href
113
- return (
114
- < li
115
- key = { childPage . href + i }
116
- className = { cx (
117
- 'sidebar-maptopic' ,
118
- isActive && 'active' ,
119
- isCurrent && 'is-current-page'
120
- ) }
121
- >
122
- < Link
123
- href = { childPage . href }
124
- className = "pl-4 pr-5 py-2 color-text-primary no-underline"
125
- >
126
- { childTitle }
127
- </ Link >
128
- < ul className = "sidebar-articles my-2" >
129
- { childPage . childPages . map ( ( grandchildPage , i , arr ) => {
130
- const grandchildTitle =
131
- grandchildPage . renderedShortTitle || grandchildPage . renderedFullTitle
132
- const isLast = i === arr . length - 1
133
- const isActive = routePath . includes ( grandchildPage . href )
134
- const isCurrent = routePath === grandchildPage . href
135
- return (
136
- < li
137
- key = { grandchildPage . href + i }
138
- className = { cx (
139
- 'sidebar-article' ,
140
- isActive && 'active' ,
141
- isCurrent && 'is-current-page'
142
- ) }
143
- >
144
- < Link
145
- href = { grandchildPage . href }
146
- className = { cx (
147
- 'pl-6 pr-5 py-1 color-text-primary no-underline' ,
148
- isLast && 'pb-2'
149
- ) }
150
- >
151
- { grandchildTitle }
152
- </ Link >
153
- </ li >
154
- )
155
- } ) }
156
- </ ul >
157
- </ li >
158
- )
159
- } ) }
160
- </ ul >
161
- ) : page . childPages [ 0 ] . page . documentType === 'article' ? (
162
- < ul className = "sidebar-articles list-style-none" >
163
- { /* <!-- some categories have no maptopics, only articles --> */ }
164
- { page . childPages . map ( ( childPage , i , arr ) => {
165
- const childTitle = childPage . renderedShortTitle || childPage . renderedFullTitle
166
- const isLast = i === arr . length - 1
167
- const isActive = routePath . includes ( childPage . href )
168
- const isCurrent = routePath === childPage . href
169
- return (
170
- < li
171
- key = { childPage . href + i }
172
- className = { cx (
173
- 'sidebar-article' ,
174
- isActive && 'active' ,
175
- isCurrent && 'is-current-page'
176
- ) }
177
- >
178
- < Link
179
- href = { childPage . href }
180
- className = { cx ( 'pl-6 pr-5 py-1 color-text-primary no-underline' , isLast && 'pb-2' ) }
181
- >
182
- { childTitle }
183
- </ Link >
184
- </ li >
185
- )
186
- } ) }
187
- </ ul >
188
- ) : null }
110
+
111
+ { ! hideChildren && (
112
+ < >
113
+ { /* <!-- some categories have maptopics with child articles --> */ }
114
+ { page . childPages [ 0 ] . page . documentType === 'mapTopic' ? (
115
+ < ul className = "sidebar-topics list-style-none position-relative" >
116
+ { page . childPages . map ( ( childPage , i ) => {
117
+ const childTitle = childPage . renderedShortTitle || childPage . renderedFullTitle
118
+ const isActive = routePath . includes ( childPage . href )
119
+ const isCurrent = routePath === childPage . href
120
+ return (
121
+ < li
122
+ key = { childPage . href + i }
123
+ className = { cx (
124
+ 'sidebar-maptopic' ,
125
+ isActive && 'active' ,
126
+ isCurrent && 'is-current-page'
127
+ ) }
128
+ >
129
+ < Link
130
+ href = { childPage . href }
131
+ className = "pl-4 pr-5 py-2 color-text-primary no-underline"
132
+ >
133
+ { childTitle }
134
+ </ Link >
135
+ < ul className = "sidebar-articles my-2" >
136
+ { childPage . childPages . map ( ( grandchildPage , i , arr ) => {
137
+ const grandchildTitle =
138
+ grandchildPage . renderedShortTitle || grandchildPage . renderedFullTitle
139
+ const isLast = i === arr . length - 1
140
+ const isActive = routePath . includes ( grandchildPage . href )
141
+ const isCurrent = routePath === grandchildPage . href
142
+ return (
143
+ < li
144
+ key = { grandchildPage . href + i }
145
+ className = { cx (
146
+ 'sidebar-article' ,
147
+ isActive && 'active' ,
148
+ isCurrent && 'is-current-page'
149
+ ) }
150
+ >
151
+ < Link
152
+ href = { grandchildPage . href }
153
+ className = { cx (
154
+ 'pl-6 pr-5 py-1 color-text-primary no-underline' ,
155
+ isLast && 'pb-2'
156
+ ) }
157
+ >
158
+ { grandchildTitle }
159
+ </ Link >
160
+ </ li >
161
+ )
162
+ } ) }
163
+ </ ul >
164
+ </ li >
165
+ )
166
+ } ) }
167
+ </ ul >
168
+ ) : page . childPages [ 0 ] . page . documentType === 'article' ? (
169
+ < ul className = "sidebar-articles list-style-none" >
170
+ { /* <!-- some categories have no maptopics, only articles --> */ }
171
+ { page . childPages . map ( ( childPage , i , arr ) => {
172
+ const childTitle = childPage . renderedShortTitle || childPage . renderedFullTitle
173
+ const isLast = i === arr . length - 1
174
+ const isActive = routePath . includes ( childPage . href )
175
+ const isCurrent = routePath === childPage . href
176
+ return (
177
+ < li
178
+ key = { childPage . href + i }
179
+ className = { cx (
180
+ 'sidebar-article' ,
181
+ isActive && 'active' ,
182
+ isCurrent && 'is-current-page'
183
+ ) }
184
+ >
185
+ < Link
186
+ href = { childPage . href }
187
+ className = { cx (
188
+ 'pl-6 pr-5 py-1 color-text-primary no-underline' ,
189
+ isLast && 'pb-2'
190
+ ) }
191
+ >
192
+ { childTitle }
193
+ </ Link >
194
+ </ li >
195
+ )
196
+ } ) }
197
+ </ ul >
198
+ ) : null }
199
+ </ >
200
+ ) }
189
201
</ Details >
190
202
)
191
203
}
0 commit comments