[Front-End] Implement UI for User Login Component

[chadstewart]

Currently, the User Login Component is completely static with a static image and no drop down menu.

This needs at least a drop down menu implemented with a user login link when the user is logged in and a user logout link when there is no logged in user.

This does not need to implement login functionality as yet but the UI needs to be functional and potentially testable with a dummy user.

• [Front-End] Implement User Avatar #19
• [Front-End] Implement Dropdown Menu #20

[bdougie]

We have dropdowns in the UI for hot and the flagship app. They are necessary for the goal but shared since we will want to update those to whatever we do here. We historically hide things that don't need to be in the header nav, i.e. "open an issue on github" link.

app.opensauced.pizza

hot.opensauced.pizza

The dropdown includes the following, but keep in mind they were added to the list with no plan or thought.

• version number
• logout
• link to open an issue
• link to github profile (we shouldn't do this, we should eventually make the open sauced profile a thing).
• link to docs

[pixelsbyeryc]

We can use some of the code from https://ariakit.org/examples/menu.

They already have the functionality + accessibility.

[pixelsbyeryc]

@chadstewart @bdougie

I don't think I have the expertise to implement this... I don't know what the best way to create interactions with React, eg: click event to open a menu.

I'd love it if either of you could jump on a call with me and walk me through how you would implement this component. Not urgent.

[bdougie]

No worries and no need to try and deep dive on that. We can potentially punt on this since this experience for #59 will need to take this in consideration or vice versa.

Overall

• Supabase auth will store the user in local storage using a JWT.
• Dropdown can leverage headlessui or ariakit
• This component can use a combo of the useSupabaseAuth hook and react state

But definitely let @chadstewart or myself pick this up.

[github-actions]

🎉 This issue has been resolved in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀