74 update navbar design

[riadhmouamnia]

Update Navbar Design

fixes #74

Description: In this PR, I've taken the opportunity to refine our Navbar design and make critical improvements to enhance the user experience. Here's a breakdown of the key changes:

1. Cleaner Top Navbar: I've optimized the top Navbar to create a cleaner and more visually appealing layout. Unnecessary lines and elements have been removed, resulting in a simplified and user-friendly design.

2. User Avatar Integration: Now, when users are logged in, their profile avatar will be displayed in the Navbar. This not only personalizes the experience but also provides a quick reference to the user's account status.

3. Mobile Menu Enhancement: The mobile menu has undergone a significant improvement. It's now a full-screen menu that provides a more immersive and user-friendly experience on mobile devices. Additionally, clickable links have been added to ensure easy navigation.

These updates aim to create a more seamless and enjoyable user experience for our website's visitors. Feedback and suggestions on these refinements are always welcome and appreciated.

Screenshots:

@riadhmouamnia

Related Issue

• Resolve #74

[riadhmouamnia]

The navbar looks stunning—great work! I've noticed a few areas where we could enhance the user experience further: on the sign-in page, the navbar is overlapping the title, and on the products page, the buttons seem to be obscured. Also, when selecting language preferences and then the profile avatar, the menus appear to collide. Could we make some adjustments to address these points?

Area1:

Area2:

Area3:

Thank you for pointing out this issues I will see what I can do to tackle this!

[riadhmouamnia]

Hey @liliumorion I've checked the navbar and adjusted some design:

• [x] As for Area 1: the problem is from the sign-in page we will adjust that later after pushing the new design of the sign-in page to make sure it aligns with the navbar.

• [x] For Area 2: the menus will collide only for a second if you try to open both menus at the same time, when you open a user menu and click somewhere else it will close automatically, however, the menu will not close if you click on the avatar again which is problem comes with daisyUI, so I updated it using the headlessUI menu to make sure is accessible and give better user experience now you can both close and open the menu by clicking on the avatar and you can close it if you click somewhere else.

Screenshots:

• [x] For Area 3: I have added some opaque (opacity of 0.4) white blurry background so it will look almost transparent on a light background and lighter on a darker background to make the text pop up a little.

Screenshots:

you can pull the new changes and test it a bit and let me know what you think!

[liliumorion]

Everything looks perfect, you may now merge this PR, thank you so much for your dedication.