How to make a similar sidebar using flexbox?

Question

css

Hello. There is an image of a rather plain sidebar.

sidebar

I want to make it with flexbox. The middle part (the link) and the bottom part had no problems, but the top part (the one with the gradient) had problems. Namely:

• What is the best/correct way to position the hamburger menu? This is an svg icon, and it should be in the same place where it is located in the navbar, respectively.
  
• Another question arises from the previous question: relative to what should the heading be positioned?
  
• Is it okay to use padding to, for example, set the spacing between the welcome block and the user information?
  

In general, the problem is that I do not quite have the competence to do it correctly in every sense. I would like to hear instructions in general on how to do this, so that later you would not be ashamed and a similar approach could be used for other tasks.
Thanks in advance.
PS
Angular is listed here because the project is based on it and I used the flex-layout module. But I think it doesn't matter, since it is based on the flexbox itself.

Answer 1

Do you want someone to do it for you?)