UI: Redesign mobile navigation to match Angular.io aesthetic

[Biswas-Samrat]

Improve mobile usability by making the Side Navbar narrower, as the official Angular website

This is DSOMM

This is Angular

[Biswas-Samrat]

@wurstbrot Assign this Issue to me

[vbakke]

Thank you, @Biswas-Samrat. Please read the earlier #353 issue as well, when it comes to improving the side bar. : )

Also, I just want to repeat the comment about signing your commits. See https://github.com/settings/keys and create a GPG key and set up siging.

[vbakke]

@theAnuragMishra and @Biswas-Samrat, please coordinate issue #441 and #451. They seem to address the same issue. : )

[theAnuragMishra]

Okayy. @Biswas-Samrat you may work on it. My idea is pretty simple, move the cross to the position where hamburger exists before clicking. This gives a nice ux when someone immediately wants to close the menu. Also remove the hamburger when the menu is open. You may ask if something's needed :)

[Biswas-Samrat]

Hi @theAnuragMishra! I’ve put together PR #433 to adjust the close button position.

I also had a thought about the hamburger icon: I'm wondering if keeping it visible while the sidebar is open might actually be better for accessibility, as it gives users multiple ways to close the menu. What do you think?

I'm also excited to work on a mobile-specific redesign for the sidebar to boost the UX. Let me know your opinion.

[vbakke]

@theAnuragMishra and @Biswas-Samrat: I see Biswas-Samrat is engage in lots of other PRs at the moment. So if you would like to give this a go Anurag Mishra, I'm more than happy to receive any pull requests from you as well.

But you will both be playing with UI at the same time, so you should probably coordinate the efforts in any case, to avoid conflicts and unintentional extra work.

No matter who has a go at this, please take the comments in #353 into consideration.