Title: Better Hamburger Menu

[VijaySamant4368]

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

Currently the expanded Hamburger menu does not go well with the rest of the webpage

Describe the solution you'd like.

Improving of the hamburger's style.

Describe alternatives you've considered.

None

Add any other context or screenshots about the feature request here.

The current style:

Record

• [X] I agree to follow this project's Code of Conduct
• [X] I have checked the existing issues
• [X] I'm a GSSOC'24 contributor
• [X] I want to work on this issue
• [X] I have attached the Screenshort regarding my issue

[VijaySamant4368]

@Agarwalvidu @ayush-that please check

[deepeshmlgupta]

@VijaySamant4368 can please share your sample design

[Agarwalvidu]

Go ahead!

[VijaySamant4368]

@Agarwalvidu @deepeshmlgupta how does this look? https://github.com/user-attachments/assets/03bb0478-9b9e-4418-81ff-9f5d87f950e9

I have yet to do some minor details, but this is the main part. I would like to know your opinion before going forward.

[VijaySamant4368]

https://github.com/user-attachments/assets/00ee7bce-dfeb-4b72-a2bd-4ed8dc9d704d

[VijaySamant4368]

@Agarwalvidu @deepeshmlgupta should I change the design? Or should I proceed with this?

[Agarwalvidu]

How it will look like in mobile view?

[Agarwalvidu]

And only with icons one will get confused what page is about what.

[VijaySamant4368]

@Agarwalvidu To be honest, I had different ideas for showing only Emojis in as the links. My idea for nav-bar with full links display are limited. Here is a general one:

https://github.com/user-attachments/assets/8f28aa30-8ba6-46c9-85ba-f43a1aa18f3e

[Agarwalvidu]

I think this is same as previous one🥲

[Agarwalvidu]

Try this one https://codepen.io/zakandaiev/pen/RwwBvrJ

[VijaySamant4368]

I think this is same as previous one🥲 Oh I just noticed it. I am really sorry for the disappointment, I am currently just out of ideas.

[VijaySamant4368]

Try this one https://codepen.io/zakandaiev/pen/RwwBvrJ

On it.

[VijaySamant4368]

@Agarwalvidu please have a look at this:

https://github.com/user-attachments/assets/14d20644-456c-4d06-80e8-4611be082190

The colors and the items in the nav-bar can be changed without much hassle.

[Agarwalvidu]

This looks nice to me. Please go ahead with this one. One suggestion you can add a box around the nav items and make it more creative

[VijaySamant4368]

All right, I will!!!

[VijaySamant4368]

@Agarwalvidu I think that adding a box around the nav-items inside the hamburger-menu, will make it feel very much different than the original menu. I have this in my mind:

https://github.com/user-attachments/assets/fbe43f50-10ff-4c8b-aaca-e5b830f6293f

[VijaySamant4368]

It gives a similar feel as the original nav-bar.

[Agarwalvidu]

It looks nice to me just decrease the height it must not take the full height of the sreen

[VijaySamant4368]

@Agarwalvidu these are the screenshots for different height:

70%:

90%:

100%:

I believe it is better looking at 100%, can you please provide your opinion? Thanks.

[VijaySamant4368]

I took screenshot for comparatively wider width for better visualization.

[Agarwalvidu]

Yes 100% one is looking good! Finally raise the PR.

[Agarwalvidu]

Make sure it will not cover the whole width, as it is looking good in this width!

[VijaySamant4368]

For less wider screen: 70%:

90%:

100%:

[VijaySamant4368]

Make sure it will not cover the whole width, as it is looking good in this width!

Al right!

[Agarwalvidu]

Whichever suits you best, I am liking the 70% most!

[VijaySamant4368]

Ok, I will make it 70% then.

[VijaySamant4368]

I am sorry but there seems to be a problem for height of 70%. For screens with less width, 70% will be quite compact, and a lot of things would have to be adjusted. SO I think we should avoid unnecessary extra fragility to the responsive nature.

[Agarwalvidu]

Okay!