how to create page-layouts in SharePoint online using spfx?

I am just starting to use spfx (a bit late) and I would like to create a page layout. The intention is to create a SPA.
The layout I would like to create is as shown in the image below.

How can I create a page wide layout with a left navigation and the content in the middle?
I would like to remove the areas that I have crossed out completely, so they don’t show at all. Not just the text, but the whole div. Do I use css in Extensions to hide those areas or is there a better, more elegant way to do that?

PS: I saw this document and I tried to implement as far as full page width is concerned, but I was not able to make it full page width.

Any guides will be much appreciated.

enter image description here