TECH-143-add-a-pop-up-menu-navbar

[andre4352323]

Jira Issue Reference

• Jira Issue: TECH-143

Type of Change

• Bug Fix
• Feature
• Update / Improvement
• Documentation only
• Other:

Description

src/components/navbar-button.tsx

• What changed: Added hover dropdown on desktop and two-level tap on mobile showing page subsections
• Why it changed: Allow users to jump directly to a page section from the navbar

src/components/navbar.tsx

• What changed: Added expandedHref state and closeNav helper to control mobile subsection expansion
• Why it changed: Required to support one-at-a-time subsection expansion and reset on close

src/data/nav-sections.ts (new file)

• What changed: New file mapping each route to its page sections and anchor IDs
• Why it changed: Single source of truth for dropdown content, decoupled from routes.ts

src/app/page.tsx, src/app/resources/page.tsx, etc `

• What changed: Added id attributes to each section wrapper div
• Why it changed: Required for scroll-to-section when a dropdown item is clicked

(Optional) Before and After Images

Before:
After:

Testing

Ensure you've tested the following, if applicable. Select all that apply.

• Mobile/Desktop View
• Accessibility
• Functionality
• Edge cases
• Not tested
• Other testing:

---

Note: Ensure you put [skip ci] in the commit message AND code review title if these are changes that shouldn't run the CI, such as documentation changes

[FopefoluwaIkufisile]

Hey Andre,

Everything looks clean and simple!. I noticed that on the mobile nav menu i can no longer navigate to , for example, "events" page

I have to navigate to a section in events page. If this is the intended behaviour no worries

Asides from that LGTM !

[ACM02]

Took a look at the preview deployment, I really like what I'm seeing! Haven't gotten the chance to look at the code in depth yet, but I do have one nitpick for you that can be addressed before I get to code review.

[ACM02]

nit: When playing around with the interface in preview, I found when moving my mouse around it felt a little odd that I could get a large number of these to show up at once (see screenshot). Based on this code it seems intentional, was there a particular reason the hide delay was added? If there is I'm open to keeping it, I just thought it was a bit odd.

If we do end up keeping the hide delay though I would prefer having the most recently opened menu always be on top, instead of having it be the rightmost menu.

[ACM02]

Hey Andre,

Everything looks clean and simple!. I noticed that on the mobile nav menu i can no longer navigate to , for example, "events" page

I have to navigate to a section in events page. If this is the intended behaviour no worries

Asides from that LGTM !

Looking at the mobile view I noticed this too and I'm questioning if having the dropdown on mobile is the right option. Looked at this article for ideas, and I think we could improve on this by having a button that opens the dropdown separate from the link to the page. Something that has functionality like this:

But with our styling of course.

[andre4352323]

On it, I will look into it, thanks fope and aidan

[ACM02]

Nice work Andre, just a few thoughts and improvements that I think can be made before we ship this.

Desktop view

I like the way it looks, especially with the underline on hover, but I think the delay on opening the menu on hover feels too long. In my opinion it's worth just removing it all together, try that and see how it feels.

While it looks good I've found I can't actually click on any of the subsection buttons. As soon as I move my mouse off of the text and down to the menu it goes away because there's a bit of a gap between the bottom of the text and the top of the menu. The user should be able to move their mouse from the page navigation button to the subsection navigation buttons without them disappearing.

Mobile View

What you did here works and is pretty solid, just one minor nit pick.

Having the caret appear on the subsections as well makes it look like those can also be expanded (like on the "Who We Are" button), but since they cannot, I think it should be removed.