search

cityofaustin / atd-vz-data

The technology that powers the City of Austin's Vision Zero program
https://visionzero.austin.gov/viewer/
11 stars 3 forks source link

[Enhancement] Persist sidebar visibility between sessions #1424

Closed mddilley closed 5 months ago

mddilley commented 5 months ago

Associated issues

https://github.com/cityofaustin/atd-data-tech/issues/16006

This PR adds a local storage a setting for whether the app side bar is open or closed and uses it to update the app to reflect that value. CoreUI controls the side bar with a class added to or removed from the body tag of index.html. This falls outside of the DOM node that the React app is appended to so we can't use React refs here. But, we can use the MutationObserver API and query selectors to reach outside the app and watch the class changes.

Testing

URL to test: https://deploy-preview-1424--atd-vze-staging.netlify.app/

Steps to test:

  1. Go to any view of the app
  2. Check your local storage for a key called isAppSideBarOpen. On the first time this key is initialized, it should have a value of true and the sidebar should be open.
  3. Refresh the page, the local storage value should remain true.
  4. Now click on the hamburger icon on the side bar header to close the side bar. The local storage value should now be false.
  5. Refresh the page or close the app and come back. When the app loads, it should load with the side bar closed.
  6. Try updating the value of isAppSideBarOpen in your browser settings manually to either true or false and refresh. The app will use this value to either hide or show the side bar on load.
  7. Try out different combinations, and your local storage value should always match the status of the side bar.

Ship list

mddilley commented 5 months ago

thanks y'all! Mergin' 🚢