Implement header navigation component

ocaml / v3.ocaml.org-rescript

The next implementation of ocaml.org, built on OCaml, ReScript, NextJS, and Tailwind.

https://v3.ocaml.org

75 stars 10 forks source link

Implement header navigation component #125

Open ghost opened 3 years ago

ghost commented 3 years ago

[x] Implement non-interactive menu for mobile and large screens
[x] Implement a minimal interactive menu for large screens
[x] Implement a minimal, interactive menu for mobile screens
[ ] Update to match current large screen and mobile screen Figma designs (could be a few hours or two days, depending on complexity of CSS)
[x] Change large screen menu to use hidden instead of opacity to fix subtle issue with hidden menu capturing mouse events
[ ] Change large screen menu to use z-order to ensure dropdown menus always appear above other content

ghost commented 3 years ago

Implement a simple, interactive menu for large screens

Done in #160

ghost commented 3 years ago

Implement non-interactive menu for mobile and large screens

This was done in #86

ghost commented 3 years ago

Implement a simple, interactive menu for mobile screens

This step will implement the logic to show and hide the mobile hamburger menu. #172 will implement the content that resides inside of the dropdown menu, once this logic is in place.

ghost commented 3 years ago

Tailwind didn't indicate this clearly, but I needed to make use of both z-order and hidden classes to cause proper showing and hiding.

ghost commented 3 years ago

Implement a minimal, interactive menu for mobile screens

Completed in #209

ghost commented 3 years ago

Change large screen menu to use hidden instead of opacity to fix subtle issue with hidden menu capturing mouse events

Done within this PR

ghost commented 3 years ago

Attempt refactoring implementation to make use of headless-ui library (timebox this, create a follow-up issue if it turns out to be complex)

This appears to be partially or fully done in PR #385.