Layout improvement

## Problem

> What's the story exposing the problem the users are facing

The previous top bar disappears as it was useless (it only had the Studio logo and some links to stuff not related to Studio). Instead, it's now holding the name of the service (AsyncAPI file) we're developing and a few buttons to customize the layout. These are just the buttons that used to be on the sidebar, i.e., toggle Navigation, Docs, Diagnostics, etc.

But probably, the biggest change here is the introduction of this new sidebar on the left. It contains a bunch of buttons and also the avatar of the user. This new sidebar is meant to be the navigation for the whole application, meaning it's not just for the code editor as it was before. The purpose of this sidebar is to navigate to other parts of the application like Services, Governance, Settings, and more.

In general, now the layout is accommodated to start growing the application in a friendly and sane way.

## Solution

> Proposed solution with mockups, views ...


Link to Figma: https://www.figma.com/proto/bPMB3lkMTOOMuKk0oGLuNm/Studio?type=design&node-id=144-4141&scaling=contain&page-id=0%3A1&starting-point-node-id=2%3A2

## Rabbit holes

> Potential technical, design ... challenges

1. To incorporate this change, we plan to leverage the new design system (refer to issue #636) as our foundation. Before adding the components into studio, it's crucial to ensure they are first integrated into the design system, in case they are not already included.

## Scope

> Describe a list of tasks or issues that needs to be done ( you don't need to have an exhaustive list of all the tasks in the beginning)

- [ ] SideBar
- [ ] TopBar

## Out of bounds

> What won't be part of the scope

## Success criteria

> How do we know we made a good bet