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.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh

Any guides will be much appreciated.

enter image description here