Design System: Standardize Sticky Side Nav

### Dependency

- #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](https://www.hackforla.org/about/).

### 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 ](https://getbootstrap.com/docs/5.0/components/navbar/) or [Solid ](https://solid.buzzfeed.com/cards.html)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](https://github.com/hackforla/website/tree/gh-pages/_includes/elements)
- [ ] SCSS: [_scss/elements](https://github.com/hackforla/website/tree/gh-pages/_sass/elements)
- [ ] JS: [assets/js/elements](https://github.com/hackforla/website/tree/gh-pages/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](https://github.com/hackforla/website/blob/gh-pages/pages/about.html) to use the new html file you created instead of the current code that renders the side nav
- [ ] Make sure [this bug ](https://user-images.githubusercontent.com/62368440/130673649-c5ea9300-8106-4c60-8365-f9cc1811f1f4.png)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](https://github.com/hackforla/website/issues/2173#issuecomment-1279768721)

### Resources/Instructions
- [Figma design of about page](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=24351%3A284522) - sticky sidebar nav should adhere to to this design to satisfy WCAG criteria
- [about page](https://www.hackforla.org/about/)
- [Bootstrap ](https://getbootstrap.com/docs/5.0/components/navbar/)
- [Solid ](https://solid.buzzfeed.com/cards.html)
- [Writeup from #2173](https://github.com/hackforla/website/issues/2173#issuecomment-1279768721)