Style the versions dropdown for mobile
What does this MR do and why?
- Adds a generic method for collapsible sections (similar to the Bootstrap utility we use on the Nanoc site). We don't want to include all of Bootstrap just for this feature.
- Refactors "Version History" components to use the new expand/collapse method.
- Adds a mobile version of the Versions dropdown, which also uses expand/collapse.
Closes #27 (closed)
Screenshots, screen recordings, or links to review app
Closed | Open |
---|---|
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md. -
Check out this branch, and run make setup
(this MR adds a new dependency you'll need to fetch, andmake setup
will take care of this) -
Verify "Version History" is still expandable: http://localhost:1313/shortcodes/#version-history -
Resize your browser window below 992px width. Verify you can open and close the navbar menu, just like the current site. Verify you can use the Versions drop down and click all the links. -
Resize your browser back to a wider/desktop width. The navbar should now show the menu items on the right side, without the toggle.
Note: Our expand/collapse method does not have the animation/transition like the Bootstrap one does (ours is more of an open/close versus a slide in/out). We can consider adding this in a follow-up if we decide it's important later on. For now, I think it's OK to keep it more simple.
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Closes #27 (closed)
Edited by Hiru Fernando