search

bsoc-bitbyte / GetIt

Streamlined college e-commerce: Simplifying merch buying and selling for students.
https://getit.iiitdmj.ac.in/
17 stars 51 forks source link

[Feature Request]: modify navbar #207

Closed AkashPaloju closed 1 week ago

AkashPaloju commented 2 weeks ago

Is your feature request related to a problem? Please describe.

As part of the Admin dashboard project, we require a profile dropdown to offer dashboard navigation options in the navbar for admins and so forth in the future

Describe the solution you'd like

Add the profile dropdown and update the navbar according to the design in Figma. Show the "Sign in" button if the user is not logged in, and if the user is logged in, display the profile button and the dropdown when clicked on it. The dropdown should close when the user clicks on the profile button or on any other area (excluding the dropdown) on the page (like we see on the other websites).

https://www.figma.com/design/5Hs4DlvyJJWjQB9K7Fh0CY/Getit?node-id=787-2965&t=Pzow0VuWVGSotgy1-0

Describe alternatives you've considered

No response

Developer notes

Please detail how you manage the conditional presentation of the "Signin" button and the "profile" button, as well as explain the implementation of the UI of the dropdown.

blazethunderstorm commented 2 weeks ago

@AkashPaloju i want to work on this issue ,in this i will redirect user to sign and cart using nuxt link and for dropdown i will use onclick function, for the login and user profile(data would be fetched from backend) i will check if user is authorized or not

i would use tailwind.css for ui and would make changes in navnew.vue

yashpatil641 commented 2 weeks ago

I would like to work on this issue i will use v-if conditions for checking if the user is authenticated or not and show sign-in button or profile icon accordingly. when user clicks on profile icon a card will show up with usre info which i will fetch from backend and make sure that when a user clicks anywhere on the screen the condition for v-show of profile component is set to false excluding the dropdown. I will be making changes in the navnew.vue file.

AkashPaloju commented 2 weeks ago

Assigning @yashpatil641 as their explanation is more detailed for the question in the issue description and is also not currently assigned to any other issues in other bsoc repos.

Thanks!