Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update RSC Dashboard Navigation #186

Merged
merged 14 commits into from
Apr 26, 2024
Merged

Update RSC Dashboard Navigation #186

merged 14 commits into from
Apr 26, 2024

Conversation

hawkishpolicy
Copy link
Collaborator

@hawkishpolicy hawkishpolicy commented Apr 19, 2024

Refactored navigation components in desktop and mobile views

🗣 Description

  • Installed Hash-Link module to allow auto scrolling to linked anchor tags.
  • Added Hash-Link anchor tags to Side Nav, Accordion Nav, and FAB Nav Menu.
  • Accordion Nav is now a separate component.
  • Moved Accordion Nav to top of Detail view.
  • Built Floating Action Button (FAB) nav menu for quick navigation once the user is deep in the document triggered by scroll.
  • Built Floating Action Button (FAB) scroll to top button triggered by scroll.

💭 Motivation and context

Provides improved navigation of site for desktop and mobile users

closes #170

🧪 Testing

📷 Screenshots (if appropriate)

Uncomment this section if a screenshot is needed.
Screenshot 2024-04-24 at 4 18 36 PM
Screenshot 2024-04-24 at 4 18 49 PM
Screenshot 2024-04-24 at 4 19 06 PM

Screenshot 2024-04-24 at 4 20 19 PM Screenshot 2024-04-24 at 4 20 31 PM Screenshot 2024-04-24 at 4 20 46 PM Screenshot 2024-04-24 at 4 21 00 PM

✅ Pre-approval checklist

  • This PR has an informative and human-readable title.
  • Changes are limited to a single goal - eschew scope creep!
  • All relevant type-of-change labels have been added.
  • I have read the CONTRIBUTING document.
  • These code changes follow cisagov code standards.
  • All new and existing tests pass.

✅ Pre-merge checklist

  • Revert dependencies to default branches.
  • Finalize version.

✅ Post-merge checklist

  • Create a release.

Added new DefaultSideNav component to dashboard.
Added mapped categories to side nav with links to each category.
Installed hash-link package to handle scrolling to anchor tags.
- Made SideNav sticky.
- Added ScrollTop component to handle scrolling to top of Detail page.
- Added scroll to top button to Detail component.
- Made Header fixed.
- Added RSCAccordionNav.tsx to handle category navigation in the mobile view
- Added anchor tags to the RSCDetail.tsx to handle the navigation to the different sections of the page
- Removed side nav in mobile.
- Relocated basic nav options to drop down menu in the mobile view.
- Added scroll to top button in the mobile view.
- Made side nav sticky in the desktop view.
- Cleaned up code. Removed unused imports and variables.
Cleaned up code.
Removed unnecessary imports and divs.
- Header and side nav are positioned relative and now scroll with the page.
- Added a FAB to trigger a pop up nav menu to allow users to move quickly between sections once side nav is out of view.
- Cleaned up code.
- Refactored component to autoclose after selection.
- Built new hash link to navigate to anchor tags.
@hawkishpolicy hawkishpolicy self-assigned this Apr 19, 2024
@hawkishpolicy hawkishpolicy linked an issue Apr 19, 2024 that may be closed by this pull request
2 tasks
@schmelz21 schmelz21 self-requested a review April 23, 2024 15:53
@ameliav ameliav self-requested a review April 24, 2024 14:31
Copy link
Contributor

@ameliav ameliav left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

- removed JSX fragment from FloatingNav.tsx
- added a new div to wrap the JSX in FloatingNav.tsx
- removed unnecessary console.log from RSCDetail.tsx
@hawkishpolicy hawkishpolicy marked this pull request as ready for review April 24, 2024 20:35
@schmelz21 schmelz21 merged commit 932a3c4 into develop Apr 26, 2024
14 of 15 checks passed
@schmelz21 schmelz21 deleted the RSC-Nav branch April 26, 2024 15:51
@chrtorres chrtorres mentioned this pull request Apr 29, 2024
12 tasks
cisagovbot pushed a commit that referenced this pull request Sep 25, 2024
Switch the `pre-commit` hook used to run `prettier`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Floating nav bar for RSC Dashboard
3 participants