ENH - Add new sidebar design

[steff456]

Fixes #283.

Description

This pull request:

• Implements the new sidebar design

After (Logout)

After (Login)

Pull request checklist

• [x] Did you test this change locally?
• [x] Did you update the documentation (if required)?
• [x] Did you add/update relevant tests for this change (if required)?

Additional information

There's some differences between the given design and the changes of this PR because the implementation may require a complete re-write of whole components, @smeragoel please let me know if there's another way to handle each situation or if the change is required as the figma design you shared with me.

1. The horizontal gray lines don't have the same width

Current state

This happens because all the margins for the sidebar are defined in the most outer box,

So the line in of the bottom will always look shorter than the top line

2. The active environment green background only highlights the text, without the circle icon

Current state

Design

3. Do we want to use a personalized icon, or the mui icon that accompanies the Shared Environment title?

Current state

Design

[smeragoel]

1. For the width of the horizontal lines, I'd prefer if they are the same width because it looks a little wonky if they are not. If it requires significant changes to the code, we can also remove the bottom line to resolve this quickly.
2. That's completely fine, in fact, this is what I originally intended to do!
3. How hard will it be to use a personalised icon, not just here but in other places as well? I am aiming to use the iconset we have defined in the design system. That will also require changes across other places we have used icons eventually.

[steff456]

Great! Then I will do the changes accordingly,

1. I'll remove the bottom line
2. I'll leave it as it is
3. We can use personalized icons everywhere, but I will need you to send me the svg to create custom ones. Can you please send me this one?

[smeragoel]

Here's the SVG:

You can also export it directly from Figma if you need it in a different size: Group Icon (Here's some documentation on the export tool in Figma, in case you need it!)

[steff456]

@smeragoel this PR is ready for another review! I fixed the items discussed in our conversation and also fixed the typography that was off in the read the docs! link. Please let me know if there's anything else that needs to be addressed or if this PR is ready to merge!