Seerden / Rack

Exercise tracking
0 stars 0 forks source link

`Header`: implement `nav` element with dropdown hierarchy #15

Open Seerden opened 2 years ago

Seerden commented 2 years ago

Think it's about time to do this so I don't have to manually keep manually typing in URLs.

Implementation

Framer

I've been wanting to dive into Framer Motion for animations for a while now. This one's a good start. Just rebuild the basic 'moving hover highlight' animation to get a feel for the library.

Auth

The nav element will look differently if the user isn't logged in. Most routes should be protected. Add a log-in button if not logged in, and a log-out button if logged in. Maybe the log-out should be behind an expand button so the user doesn't end up accidentally clicking it as often.

Dropdown

Consider the hierarchy of dropdown elements. The top-level could be a clickable link as well, with the dropdown appearing on hover/expand click and revealing less important routes.

|-- home
|-- workouts
|  |-- /new
|-- workout/:id
|  |-- /session

Placement

Since the entire application's intended to be mostly mobile-only, consider experimenting with a bottom-of-screen navigation element, instead of top-of-screen. Don't really need a footer anyway.