Bootstrap 4 Angular 7 Отзывчивый макет Святого Грааля

Я пытаюсь реализовать макет Holy-Grail из начальной загрузки и jquery в Angular с той же функциональностью. Я получил исходный код начальной загрузки и jquery от этот вопрос.

Вот рабочий jdFiddle

Вот код jquery, который я пытаюсь перевести на typecript (и успешно достиг той же реализации)

$(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");
    });
});

При попытке реализовать функциональность я получаю несоответствия.

Вот моя текущая реализация на stackblitz

Я пытаюсь воспроизвести функциональность здесь точно так же, как в Angular. Проблемы, которые у меня возникают:

  1. Полоса прокрутки в моей реализации прокручивает всю страницу, а не прокручивает только основной средний контент, поэтому не имеет липкого заголовка и липкого левого бокового меню, как в исходной реализации.

По сути, я спрашиваю, как сделать так, чтобы это выглядел точно так же, как это, с небольшим акцентом на прокрутку и липкие элементы?

-------ОБНОВИТЬ------

Теперь все, чего я пытаюсь добиться, это:

  1. Липкий заголовок
  2. Липкая левая боковая навигация с собственной полосой прокрутки.

468
1

Ответ:

Наконец-то у меня есть отзывчивый макет Holy-Grail, сделанный в angular с угловым материалом и css.

Вот рабочий код в stackblitz

Функции:

  1. Отзывчивый макет с адаптивным боковым меню.
  2. Липкий заголовок и липкий нижний колонтитул
  3. Липкая левая навигационная панель

Если у вас есть какие-либо улучшения, обязательно поделитесь ими здесь, чтобы они могли принести пользу всем нам. Ваше здоровье.