Refactor in-page nav #7805
Refactor in-page nav #7805
Conversation
lcummings12
added
the
Dev: frontend
| <div class=""> | ||
| {{/* Content */}} | ||
| <div class="content usa-prose"> | ||
| {{- .Content -}} | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
We should remove this div with an empty class. It doesn't do anything.
| <!-- partials/core/usa-in-page-nav.html --> | ||
| <div class="usa-in-page-nav-container"> | ||
| <!-- | ||
| data-root-margin sets the observable "window" for the element, details here https://designsystem.digital.gov/components/in-page-navigation/#using-the-in-page-navigation-component-2 |
There was a problem hiding this comment.
I would add some comments about what this component does like how you did for #7748.
You could also move the long comment on line 4 into it to describe the settings used.
|
@nick-mon1 Added the comments and removed the extraneous div |
| <div class="usa-in-page-nav-container"> | ||
| <div> | ||
| {{/* Content */}} | ||
| <div class="content usa-prose"> | ||
| {{- .Content -}} | ||
| </div> | ||
|
|
||
| {{/* Touchpoints Form */}} | ||
| {{- partial "core/touchpoints-form.html" . -}} | ||
| <div class="content usa-prose"> | ||
| {{- .Content -}} | ||
| </div> | ||
|
|
||
| <aside | ||
| class="dg-sidebar usa-in-page-nav" | ||
| data-title-heading-level="h4" | ||
| data-root-margin="-350px 0px -350px 0px" | ||
| aria-label="Related content" | ||
| > | ||
| <div class="dg-related-items" data-related-items> | ||
| {{/* Related Communities and Services */}} | ||
| {{- partial "core/get_related.html" . -}} | ||
| </div> | ||
| </aside> | ||
| </div> |
There was a problem hiding this comment.
Improvement
It would be ideal to have the component take a setting for displaying the get_related.html partial.
<div class="usa-in-page-nav-container">
<aside
class="dg-sidebar usa-in-page-nav"
data-title-heading-level="h4"
data-root-margin="-350px 0px -350px 0px"
aria-label="Related content"
>
{{ if $has_sidebar }}
<div class="dg-related-items" data-related-items>
{{- partial "core/get_related.html" . -}}
</div>
{{ end }}
</aside>
<div class="content usa-prose">
{{- .Content -}}
</div>
</div>There was a problem hiding this comment.
This would entail more refactoring. We can skip this.
| {{- partial "core/get_related.html" . -}} | ||
| </div> | ||
| </aside> | ||
| </div> | ||
| {{- partial "core/touchpoints-form.html" . -}} |
There was a problem hiding this comment.
Fix
Moved this partial call outside of the in-page nav markup, it was breaking the layout.
There was a problem hiding this comment.
I moved the inline comments to the top section.
Summary
Refactor in-page navigation by the creation of a "usa-in-page-nav" component which replaces redundant instances of in-page-nav.
Preview
Link to Preview
Solution
The code itself required minimal to no changes, I simply found all instances of usa-in-page-nav and replaced them with the component
usa-in-page-nav. The component itself consists of the samecode that was already informally reused throughout pages.