Continue Create Dropdown Options

[trillium]

Enhancement

Continuation of #897

Changes

• Add support for dropdown within headerNavLinks
• Update dropdown styling in MobileNav
  • Iffy on this being the right styling of the menu

Code structure

• Use helper functions to render navs within NavOptions, MobileNav
• Create NavLinks types
  • Defined in data/headerNavLinks.ts, feels like the wrong spot for types

Visuals

With Changes

[vercel]

@spiteless is attempting to deploy a commit to the timlrx's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwind-nextjs-starter-blog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 3:02pm

[timlrx]

Thanks for picking up and continuing this work. There's a build error:

./components/MobileNav.tsx:109:44
Type error: An interface can only extend an object type or intersection of object types with statically known members.
  107 | export default MobileNav
  108 |
> 109 | interface RenderMobileNavLinkProps extends NavItem {
      |                                            ^
  110 |   clickFunc: () => void
  111 |   navLink: NavItem
  112 | }
Error: Command "yarn run build" exited with 1

[timlrx]

Styling wise, I would leave it up to you to decide what works best for mobile :)

[trillium]

Good to know this is moving in the right direction. I'd like to make another attempt at getting the styling better, I'll update this in a few days again.

[abernier]

what about https://ui.shadcn.com/docs/components/navigation-menu ?

[timlrx]

Actually this PR is almost good to go. I wouldn't mind indicating the dropdown menu options with a chevron like the shadcn components and changing the behaviour from onClick to onHover. Other than that @spiteless, let me know when you have some time to polish up the mobile component and we can merge it? Thanks!

[trillium]

Gotcha, will add the Chevron and onHover

Just need to find the time to update the mobile menu styling render