Implement Profile Menu in Navbar on Jargons Editor Dashboard

[babblebey]

We need to enhance the Jargons Editor dashboard by adding a profile menu in the navbar. This profile menu will be a simple user avatar item that, for now, includes just one submenu item: "Logout". The logout functionality should clear the user's access token from the browser cookie (stored under the key "jargons.dev:token") and then redirect the user to the homepage.

Task

1. Create a User Avatar Component: Add a user avatar component in the navbar of the Jargons Editor dashboard.
2. Add Submenu Item: Include a "Logout" submenu item under the user avatar.
3. Implement Logout Functionality: The logout functionality should:
   • Clear the user's access token from the browser cookie (key: "jargons.dev:token").
   • Redirect the user to the homepage (/).

Implementation Steps

1. Create the Profile Menu Component:

   • Add a user avatar icon in the navbar.
   • Create a dropdown menu that appears when the avatar is clicked.
   • Include a "Logout" submenu item within the dropdown.

2. Implement Logout Functionality:

   • Write a function to clear the "jargons.dev:token" cookie.
   • Redirect the user to the homepage after clearing the token.

3. Integrate with Navbar:

   • Ensure the profile menu is integrated into the existing navbar structure on the Jargons Editor dashboard. This can be done by wrapping the new "ProfileMenu" component with our existing Navbar astro component

     <Navbar>
       <ProfileMenu client:load />
     </Navbar>

Acceptance Criteria

• A user avatar icon should be present in the navbar of the Jargons Editor dashboard.
• Clicking the avatar should display a dropdown menu with a "Logout" option.
• Clicking "Logout" should clear the "jargons.dev:token" cookie and redirect the user to the homepage.

Additional Information

• This enhancement will improve the user experience by providing a convenient way to log out from the Jargons Editor dashboard. Future enhancements may include additional profile-related features within the dropdown menu.
• I've got the following idea which follow our current pattern of performing action that involves mutating the cookies... Doing it starting on the server... this would involve...
  • Creating a doLogout action (a function that runs on the server before page load)
  • Remove the "jargons.dev:token" cookie value with the cookies.delete method
  • Create a /logout page, then execute the doLogout action on it server part, then redirect to the homepage.
  • ...this way you can simply use the url to the /logout to start a logout process.
• Need more clarity, kindly ask question 😉