@@ -47,7 +47,12 @@ const getDimensions = (ele) => {
4747
4848// Functions to make scroll with speed control
4949// Element to move, element or px from, element or px to, time in ms to animate
50- const scrollTo = ( element , duration = 2000 ) => {
50+ const scrollTo = ( element , sectionId , duration = 2000 ) => {
51+ // Update URL hash
52+ if ( sectionId ) {
53+ window . history . pushState ( null , null , `#${ sectionId } ) ;
54+ }
55+
5156 let e = document . documentElement ;
5257 if ( e . scrollTop === 0 ) {
5358 let t = e . scrollTop ;
@@ -127,6 +132,36 @@ const Brand = () => {
127132 { section : "SocialBackgrounds" , ref : SocialBackgroundsRef }
128133 ] ;
129134
135+ const sectionIdMap = {
136+ "layer5" : layer5Ref ,
137+ "social-backgrounds" : SocialBackgroundsRef ,
138+ "meshery" : mesheryRef ,
139+ "meshsync" : meshsyncRef ,
140+ "meshery-operator" : mesheryOperatorRef ,
141+ "image-hub" : imageHubRef ,
142+ "smp" : smpRef ,
143+ "meshmark" : meshmarkRef ,
144+ "service-mesh-patterns" : servicemeshpatternsRef ,
145+ "nighthawk" : nightHawkRef ,
146+ "meshmate" : meshmateRef ,
147+ "meshmaster" : meshMasterRef ,
148+ "kanvas" : kanvasRef ,
149+ "catalog" : CatalogRef ,
150+ "five" : stickfiguresRef
151+ } ;
152+
153+ // Handle initial hash navigation on page load
154+ useEffect ( ( ) => {
155+ if ( typeof window !== "undefined" ) {
156+ const hash = window . location . hash . substring ( 1 ) ;
157+ if ( hash && sectionIdMap [ hash ] ) {
158+ setTimeout ( ( ) => {
159+ scrollTo ( sectionIdMap [ hash ] . current , hash ) ;
160+ } , 100 ) ;
161+ }
162+ }
163+ } , [ ] ) ;
164+
130165 useEffect ( ( ) => {
131166 const handleScroll = ( ) => {
132167 const { height : headerHeight } = getDimensions ( headerRef . current ) ;
@@ -173,52 +208,52 @@ const Brand = () => {
173208 </ div >
174209 < Row className = "brand-row" >
175210 < Col $xs = { 12 } $md = { 9 } className = "brand-col" >
176- < div className = "section" >
211+ < div className = "section" id = "brand-guide" >
177212 < BrandGuide />
178213 </ div >
179- < div className = "section" ref = { layer5Ref } >
214+ < div className = "section" id = "layer5" ref = { layer5Ref } >
180215 < Layer5Brand />
181216 </ div >
182- < div className = "section" ref = { SocialBackgroundsRef } >
217+ < div className = "section" id = "social-backgrounds" ref = { SocialBackgroundsRef } >
183218 < SocialBackgrounds />
184219 </ div >
185- < div className = "section" ref = { mesheryRef } >
220+ < div className = "section" id = "meshery" ref = { mesheryRef } >
186221 < MesheryBrand />
187222 </ div >
188- < div className = "section" ref = { meshsyncRef } >
223+ < div className = "section" id = "meshsync" ref = { meshsyncRef } >
189224 < MeshSyncBrand />
190225 </ div >
191- < div className = "section" ref = { mesheryOperatorRef } >
226+ < div className = "section" id = "meshery-operator" ref = { mesheryOperatorRef } >
192227 < MesheryOperatorBrand />
193228 </ div >
194- < div className = "section" ref = { imageHubRef } >
229+ < div className = "section" id = "image-hub" ref = { imageHubRef } >
195230 < ImageHubBrand />
196231 </ div >
197- < div className = "section" ref = { smpRef } >
232+ < div className = "section" id = "smp" ref = { smpRef } >
198233 < SMPBrand />
199234 </ div >
200- < div className = "section" ref = { meshmarkRef } >
235+ < div className = "section" id = "meshmark" ref = { meshmarkRef } >
201236 < MeshMarkBrand />
202237 </ div >
203- < div className = "section" ref = { servicemeshpatternsRef } >
238+ < div className = "section" id = "service-mesh-patterns" ref = { servicemeshpatternsRef } >
204239 < ServiceMeshPatterns />
205240 </ div >
206- < div className = "section" ref = { nightHawkRef } >
241+ < div className = "section" id = "nighthawk" ref = { nightHawkRef } >
207242 < NightHawk />
208243 </ div >
209- < div className = "section" ref = { meshmateRef } >
244+ < div className = "section" id = "meshmate" ref = { meshmateRef } >
210245 < CommunityBrand />
211246 </ div >
212- < div className = "section" ref = { meshMasterRef } >
247+ < div className = "section" id = "meshmaster" ref = { meshMasterRef } >
213248 < MeshMasterBrand />
214249 </ div >
215- < div className = "section" ref = { kanvasRef } >
250+ < div className = "section" id = "kanvas" ref = { kanvasRef } >
216251 < KanvasBrand />
217252 </ div >
218- < div className = "section" ref = { CatalogRef } >
253+ < div className = "section" id = "catalog" ref = { CatalogRef } >
219254 < Catalog />
220255 </ div >
221- < div className = "section" ref = { stickfiguresRef } >
256+ < div className = "section" id = "five" ref = { stickfiguresRef } >
222257 < StickFigures />
223258 </ div >
224259 </ Col >
@@ -229,7 +264,7 @@ const Brand = () => {
229264 visibleSection === "Layer5" ? "selected" : ""
230265 } `}
231266 onClick = { ( ) => {
232- scrollTo ( layer5Ref . current ) ;
267+ scrollTo ( layer5Ref . current , "layer5" ) ;
233268 } }
234269 >
235270 < span > Layer5</ span >
@@ -239,7 +274,7 @@ const Brand = () => {
239274 visibleSection === "SocialBackgrounds" ? "selected" : ""
240275 } `}
241276 onClick = { ( ) => {
242- scrollTo ( SocialBackgroundsRef . current ) ;
277+ scrollTo ( SocialBackgroundsRef . current , "social-backgrounds" ) ;
243278 } }
244279 >
245280 < span > Layer5 Social Backgrounds </ span >
@@ -249,7 +284,7 @@ const Brand = () => {
249284 visibleSection === "Meshery" ? "selected" : ""
250285 } `}
251286 onClick = { ( ) => {
252- scrollTo ( mesheryRef . current ) ;
287+ scrollTo ( mesheryRef . current , "meshery" ) ;
253288 } }
254289 >
255290 < span > Meshery</ span >
@@ -259,7 +294,7 @@ const Brand = () => {
259294 visibleSection === "MeshSync" ? "selected" : ""
260295 } `}
261296 onClick = { ( ) => {
262- scrollTo ( meshsyncRef . current ) ;
297+ scrollTo ( meshsyncRef . current , "meshsync" ) ;
263298 } }
264299 >
265300 < span > MeshSync</ span >
@@ -269,7 +304,7 @@ const Brand = () => {
269304 visibleSection === "MesheryOperator" ? "selected" : ""
270305 } `}
271306 onClick = { ( ) => {
272- scrollTo ( mesheryOperatorRef . current ) ;
307+ scrollTo ( mesheryOperatorRef . current , "meshery-operator" ) ;
273308 } }
274309 >
275310 < span > Meshery Operator</ span >
@@ -279,7 +314,7 @@ const Brand = () => {
279314 visibleSection === "ImageHub" ? "selected" : ""
280315 } `}
281316 onClick = { ( ) => {
282- scrollTo ( imageHubRef . current ) ;
317+ scrollTo ( imageHubRef . current , "image-hub" ) ;
283318 } }
284319 >
285320 < span > Image Hub</ span >
@@ -289,7 +324,7 @@ const Brand = () => {
289324 visibleSection === "SMP" ? "selected" : ""
290325 } `}
291326 onClick = { ( ) => {
292- scrollTo ( smpRef . current ) ;
327+ scrollTo ( smpRef . current , "smp" ) ;
293328 } }
294329 >
295330 < span > Cloud Native Performance</ span >
@@ -299,7 +334,7 @@ const Brand = () => {
299334 visibleSection === "MeshMark" ? "selected" : ""
300335 } `}
301336 onClick = { ( ) => {
302- scrollTo ( meshmarkRef . current ) ;
337+ scrollTo ( meshmarkRef . current , "meshmark" ) ;
303338 } }
304339 >
305340 < span > MeshMark</ span >
@@ -309,7 +344,7 @@ const Brand = () => {
309344 visibleSection === "ServiceMeshPatterns" ? "selected" : ""
310345 } `}
311346 onClick = { ( ) => {
312- scrollTo ( servicemeshpatternsRef . current ) ;
347+ scrollTo ( servicemeshpatternsRef . current , "service-mesh-patterns" ) ;
313348 } }
314349 >
315350 < span > Cloud Native Patterns</ span >
@@ -319,7 +354,7 @@ const Brand = () => {
319354 visibleSection === "NightHawk" ? "selected" : ""
320355 } `}
321356 onClick = { ( ) => {
322- scrollTo ( nightHawkRef . current ) ;
357+ scrollTo ( nightHawkRef . current , "nighthawk" ) ;
323358 } }
324359 >
325360 < span > NightHawk </ span >
@@ -329,7 +364,7 @@ const Brand = () => {
329364 visibleSection === "MeshMate" ? "selected" : ""
330365 } `}
331366 onClick = { ( ) => {
332- scrollTo ( meshmateRef . current ) ;
367+ scrollTo ( meshmateRef . current , "meshmate" ) ;
333368 } }
334369 >
335370 < span > MeshMate</ span >
@@ -339,7 +374,7 @@ const Brand = () => {
339374 visibleSection === "MeshMaster" ? "selected" : ""
340375 } `}
341376 onClick = { ( ) => {
342- scrollTo ( meshMasterRef . current ) ;
377+ scrollTo ( meshMasterRef . current , "meshmaster" ) ;
343378 } }
344379 >
345380 < span > MeshMaster </ span >
@@ -349,7 +384,7 @@ const Brand = () => {
349384 visibleSection === "Kanvas" ? "selected" : ""
350385 } `}
351386 onClick = { ( ) => {
352- scrollTo ( kanvasRef . current ) ;
387+ scrollTo ( kanvasRef . current , "kanvas" ) ;
353388 } }
354389 >
355390 < span > Kanvas </ span >
@@ -359,7 +394,7 @@ const Brand = () => {
359394 visibleSection === "Catalog" ? "selected" : ""
360395 } `}
361396 onClick = { ( ) => {
362- scrollTo ( CatalogRef . current ) ;
397+ scrollTo ( CatalogRef . current , "catalog" ) ;
363398 } }
364399 >
365400 < span > Catalog </ span >
@@ -369,7 +404,7 @@ const Brand = () => {
369404 visibleSection === "Five" ? "selected" : ""
370405 } `}
371406 onClick = { ( ) => {
372- scrollTo ( stickfiguresRef . current ) ;
407+ scrollTo ( stickfiguresRef . current , "five" ) ;
373408 } }
374409 >
375410 < span > Five, our mascot </ span >
0 commit comments