Navbar

[psankhe28]

I would like to redesign navbar.Please assign this issue to me

[Xtremilicious]

Hey, @psankhe28 thanks for your interest in contributing to ProjectLearn.

As a starting step, please share mockup designs of your ideas regarding the Navbar. We can discuss revisions if needed, and then the development of the same can be started.

[psankhe28]

So,I would Like to make a navbar in the left side.Initially only the icons will be displayed and on hovering the circles,we will get to see Home,Blog as a whole word like in the below picture:

The design will be as follows...also i would like to add animation to the image in that pink box and style the get started button.

Please suggest any revision if you want.Thanks!

[Xtremilicious]

Hey, @psankhe28 looks a bit cramped - also have you considered the mobile view?

A navbar redesign like the one below would be ideal. The current navbar elements - Home, blog and Github star count can be centred(you need to keep the GitHub star live count feature as it is) while leaving space for a potential Login button at the right.

Here's the full design idea, including mobile view - a hamburger icon to expand menu elements:

[psankhe28]

The design you have suggested looks great!

If we consider my design,for the mobile view,I think we can have a hamburger icon and a side bar can appear..like the one in below picture

Also,the navbar can be done for mobile view as it is mentioned above by you.Do consider my design too and please let me know.Thanks!

[Xtremilicious]

@psankhe28 mobile view looks good, however - the desktop view in your design looks a bit cramped, it's better to keep the nav elements as a horizontal bar rather than taking up vertical screen space.

The GitHub star count functionality and styling should be intact, as well.

[psankhe28]

Ok fine.I would start working on the design suggested by you

[heet-kumar]

@psankhe28 any updates till now how much work is done.

[psankhe28]

@psankhe28 any updates till now how much work is done.

I have almost completed it.By tomorrow,i will make a pull request.

[psankhe28]

@Xtremilicious Please find the attached screenshot of the navbar and suggest any changes if needed. Thanks!

For desktop:

For mobile:

[Xtremilicious]

Hey @psankhe28. I don't feel this is similar to the mockup that was decided upon, as above?

Also a few questions:

1. How is the UX subjectively better than the original UI that we have in production? For comparison:

The new Navbar looks uneven (dark on light) - not in accordance with the rest of the website's feel.

2. The GitHub star UI looks much better on the original.

I hope that you learned something and appreciate the work that you did, but unless your contributions enhance the user experience, it cannot be pushed to production.

What I can suggest right now - is to follow this design solution and try to incorporate it:

[psankhe28]

Sry for the inconvenience caused. I will redesign it.

[psankhe28]

Please find the attached screenshot of the navbar and suggest any changes if needed. Thanks!

[Xtremilicious]

Hey, @psankhe28 Some elements look misaligned, but let's discuss those over on the PR thread.

Looks good. Please create a PR to the SWOC branch of this project. We can discuss the changes there 👍

[nawed2611]

Hi! If this issue is open, I would like to work on it!