Top Nav

[nelsonic]

In preparation for adding auth_plug #104 to allow people to save their data, We need a way of showing people that: a) they are not currently logged in -> b) they can login -> login button! c) when they are logged in, an avatar d) a logout button

So I'm thinking of doing a quick side-quest to add a responsive navigation bar to the top of the "page" (App) as per the "crappy" UI sketch I made a while back:

We currently already have a lot of this interface in place: https://github.com/dwyl/app-mvp-phoenix/issues/89#issuecomment-1188810720

While we could easily get away with adding auth_plug without a nav or logout button. 💭
After all this is a "scrappy" MVP that doesn't need to have the bells and whistles ... 🔔 We want to have this [nice-to-have] feature so that we can start learning from and iterating on it. 📱

Todo

• [x] create a responsive fixed top nav using Tailwind CSS
  • [x] fixed so that it's always available for quick actions.
• [x] it should occupy the least amount of space possible
• [x] create it static over in https://github.com/dwyl/learn-tailwind so that it's generic/reusable
• [x] bring it back to the MVP and add the dynamic elements

[nelsonic]

Logo:

<a href="https://dwyl.com" class="flex items-center">
    <img src="https://dwyl.com/img/favicon-32x32.png" class="mr-3 h-6 sm:h-9" alt="dwyl logo">
</a>

[nelsonic]

Drawing inspiration from: https://flowbite.com/docs/components/navbar/

[nelsonic]

Reading: https://tailwindcss.com/docs/reusing-styles#loops

[nelsonic]

Basic Static Top Nav:

[nelsonic]

Integrated into the App:

Full screen:

Consider this done. ✅