Bootstrap 4 Angular 7 Responsive Holy Grail Layout

Question

I am trying to implement a Holy-Grail layout from bootstrap and jquery into Angular with the same functionality. I got the initial bootstrap and jquery code from this question.

Here is the working jdFiddle

Here is the jquery code I am trying to translate to typecript(and have successfully achieved the same implementation)

$(function() {
    $(".menu-toggle").on("click", function(e) {
        if($(this).hasClass("nav")) {
            $("nav").addClass("open");
        }
        else {
            $("aside").addClass("open");
        }
        e.stopPropagation();
    });

    $("body:not(nav)").on("click", function(e) {
        $("nav, aside").removeClass("open");
    });
});

On trying to implement the functionality I get mismatches.

Here is my current implementation on stackblitz

I am trying to replicate the functionality seen here exactly the way it is into Angular. The issues I am having are:

1. The scroll bar in my implementation scrolls the whole page as opposed to scrolling the main middle content only thus not having a sticky header and a sticky left side-menu as in the original implementation.

Basically what I am asking is how can I make this look exactly like this with a bit of emphasis on the scrolling and the sticky elements?

-------UPDATE------

Now all I am trying to achieve is:

1. A sticky header
2. A sticky left side-nav with its own scrollbar.

Answer 1

I finally have a responsive Holy-Grail layout made in angular with angular material and css.

Here is the working code in stackblitz

Features:

1. Responsive layout with a responsive sidenav.
2. Sticky header and sticky footer
3. Sticky Left navbar

If you have any improvements be sure to kindly share them here so that it can benefit us all. Cheers.