About us: Recalculate navigation links

[drubgrubby]

Overview

When the page is loaded in mobile view the link locations are calculated based on the location of the closed accordion. If the page is then expanded to desktop the navigation links do not highlight correctly when scrolling.

As you can see on the below image, the highlighted link is "Partners" but the displayed section is "Platform"

Action Items

Create an event listener that recalculates the link locations on resize or orientation change.

Resources/Instructions

https://www.hackforla.org/about-us

[qiqicodes]

Progress: Fixed basic issue, aligning the highlighted link in the sticky navigation bar to the content with corresponding id after resize or orientation change . Currently adding a feature that remembers the selected highlighted link in desktop mode and transfer to the corresponding location in mobile mode, and vice versa.

Blockers: Need to figure out how to write the eventListener for the feature desired. Also need to figure out how to make it cross-browser compatible. And want to check in with the team if there are other suggestions.

Availability: Open.

ETA: Desire to merge by 2/21/21 (It may take longer considering the complexity).

Current Chrome Output:
(Images are captured after resizing from mobile view to desktop view on responsive mode. Each capture shows the corresponding content along with the change in highlighter link.)

Hack for LA Platform

Sustainability

Accomplishments

Metrics

Partners

Make a Donation

Sponsors

News

[jbubar]

@drubgrubby @akibrhast The bug I found in this pr #1073 was just when you refresh the page after having clicked on a menu item
for example '/about-us#donations'
If you click on a menu item and then refresh the page does not calibrate correctly, does not have to do with mobile view..
Seems like @qiqicodes is already on that, but I though I would make a comment anyways. 😄

[drubgrubby]

@qiqicodes - I merged the fix for the accordion bug this past week. It shouldn't impact any of the work that you're doing on this, but just to be safe I recommend updating the branch you're working on to make it current to make sure there are no conflicts. Let me know if you have questions about how to do that. (You may have done it already).

[qiqicodes]

Thank you @jbubar @drubgrubby for looping me in the pr #1073. The helpful information regarding the variable used for tracking the state between mobile and desktop is much appreciated. I am currently working on the feature at the moment.

And in regards to the conflict, there is no conflict.

[pawan92]

@qiqicodes Can you please add the labels for status?

[qiqicodes]

@pawan92 I'm working on the label at the moment

[qiqicodes]

Progress: Fixed basic issue, highlighted link in the sticky navigation bar aligns to the content with corresponding id after resize or orientation change. I can create a pr to merge the my code to the gh-pages.

Still working the feature that remembers the selected highlighted link in desktop mode and transfer to the corresponding location in mobile mode, and vice versa.

Blockers: Should I move new feature under another issue?

Needed to figure out what is causing the browser to behave the way it is. Need to figure out how to write the eventListener for the feature desired.

Availability: Open on M/Tu/Th/F evening & Saturday morning & late night.

ETA: Desire to merge the new feature by 2/27/21 (It may take longer considering the complexity).