Design System: Standardize Sticky Side Nav

[Aveline-art]

Dependency

• Design System: Audit Sticky Side Nav element #2173
• after homepage launch
• after TWE has a sticky nav page on their Design System https://hackforla.github.io/internship-website-design-system/

Overview

As a developer, it is important to standardize our elements for all teams in the website project. For this issue, the element to standardize is the sticky side nav on the about page.

Action Items

• This issue was written and worked on a long time ago. Before you start in on any of the action items, read the comments, and go find any issues that have to do with changing the coding on the https://hackforla.org/about page. Not all issues that are closed will have the p-feature: about us label. Please make a list of related issues and add them in a comment.
• Figure out how this issue should change, and run any significant changes by the Merge team, by leaving a comment about your plan. Then, put the issue in the Questions/In Review column on the project board and adding the ready for dev lead label to have a Tech Lead review your plan.
• Edit the code such that the sticky side nav can stand alone, in the same way that Bootstrap or Solid components can stand alone and is up to current protocol and standards
  • This code needs to belong in various areas of our architecture based on it's language type.
  • HTML: _includes/elements
  • SCSS: _scss/elements
  • JS: assets/js/elements
• Suggestion: Create a new folder in _includes called "sticky-side-nav"
  • Using the current sticky side nav as a reference, create a new .md file named "about-side-nav-elements.md"
    • This .md file will hold a markdown list of elements that can be used dynamically, so it should have the following elements
      • element: - the name of the element in the list (e.g. Letter from the ED)
      • anchor: - the anchor for this element (e.g. #letter)
  • Create a reusable "include" html in the _includes folder named "sticky-side-nav.html" for the sticky side nav that can be called within other pages that will have a sticky side nav
    • This should be able to loop through a given .md file (using Liquid) to render the sticky side nav with the page's appropriate elements
  • Make appropriate changes/additions to JS and SCSS files as needed to ensure it does not break any functionality or style on any other page
  • Refactor the about.html to use the new html file you created instead of the current code that renders the side nav
• Make sure this bug does not happen for this component.
  • This is a bug resulting from using the scroll click on a mouse to traverse the page.
• Implement accessibility recommendations from Writeup #2173

Resources/Instructions

• Figma design of about page - sticky sidebar nav should adhere to to this design to satisfy WCAG criteria
• about page
• Bootstrap
• Solid
• Writeup from #2173

[luiderek]

Got curious about what was behind the sticky-bug.
As far as quick and dirty solutions goes, inside assets/js/about.js:

• changing the event listener of scrollHandler from "wheel" to "scroll"
• replacing the STICKYNAVTOP from a fixed constant to the BoundingClientRect.y of the nav element + 30
  

Seems to do the trick in making the existing sidebar behave better. Not familiar enough with Jekyll's templating or accessibility to really chime in more beyond this.

[luiderek]

Update, (It's been 3 days, but I think I've had decent progress.)
https://github.com/luiderek/hfla-website/tree/standardize-sticky-sidenav-2174

1. Progress

Addressed the strange scrollhandler behavior by changing it's listener to scroll from wheel.

Moved / renamed about.js to elements/sticky-nav.js.

Moved some CSS properties from components/_about.scss to elements/_sticky-nav.scss. Logic isn't fully decoupled. The about page kinda has it's own monster 900+ line scss file that seems inconsistent with the other pages.

Created a new file _data/navigation/about-page.yml, and iterated through that to load the page sections / navbar anchor links. It's not really an elegant plug-and-play component, but I wasn't sure how much liberties to take in refactoring the existing code, and it'd be moderately easier to replicate and extend to other pages if needed.

Reworked some of the HTML structure and CSS grid rules to better center the content, rather than have everything a fixed distance from the left.

2. Blockers

Unclear on direction on how to better generalize the sticky-nav. I think there's a lot of hard-coded legacy code and I'm not sure of what an example of a "properly structured" page would be that a sticky-nav could be slipped into. The only things I can see would maybe be the join-us page, or alyssabenipayo's past work in the guides-pages.

3. Availability - 1pm-11pm PDT, weekdays/weekends.
4. ETA - Depends. Right now unclear where to take things.

[jdingeman]

Gonna rewrite the issue to open the scope. To make this component reusable, it would be a good idea to have a folder of files that can be used to make the component reusable, i.e. make a folder of sticky-nav-elements which contains markdown files with lists of the elements and their attributes. That way, the component can ideally just run through that markdown file and work the exact same way as it is currently hard coded.

[ExperimentsInHonesty]

@jdingeman I just read through this issue. I agree that the about page is a monster. Each section of the about page should be an include. Then the cards could have an anchor and an include to render the content. Then either the sticky nav menu reads the anchors or its defined in a file the sticky nav for the about page uses.

[ExperimentsInHonesty]

The next step on this issue is to find all the files associated with the about page, and define what each portion does so that anyone who needs to understand this issue, doesn't have to read all the code from scratch.

• issues that have the label: p-feature: About Us
• wiki pages that have the word about in them