Как расширить загрузочные вертикальные вкладки до 3 столбцов (вкладки, содержимое вкладок, основной текст)?

Question

Я пытаюсь создать 3-х колоночный макет сайта для онлайн-уроков.

Я пытаюсь использовать идею Вертикальные вкладки начальной загрузки

На широких экранах я хочу, чтобы студенты увидели меню навигации по вертикальным вкладкам, столбец содержимого вкладок, затемобласть основного сайта.

Примерно так:

Они могут свернуть столбец содержимого вкладок, щелкнув вертикальную панель свертывания. Если щелкнуть вкладку, она появится снова.

Затем на узких экранах вот так:

Но на узком экране я хочу ихиметь возможность щелкнуть верхний левый значок, чтобы снова появился столбец содержимого вкладок и вкладок, который затем перенесет их туда, куда они захотят, и вернется к обычному узкому виду.

Таким образом, они увидят что-то подобное:

И затем после нажатия в области навигации по содержимому вкладки они вернутся в обычный узкий вид.

Я создал jfiddle:https://jsfiddle.net/krgcs0a1/

Похоже, мне нужно вставить для него некоторый код, так что вот CSS, но, конечно, в jfiddle все есть:

.mysite {

}

.course {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    right: 0;
    bottom: 0;
}

.navtabs {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index:600;
}

.course .tabscontent {
    position: absolute;
    top: 0;
    left: 100px;
    bottom: 0;
    width: calc(35% - 62px);
    min-width: 300px;
    overflow: hidden;
    overflow-y: scroll;
    z-index: 200;
    border: 1px solid #ddd;
    border-width: 0 1px 0 0;
    background: #fff;
    box-shadow: 6px 0 10px rgba(0,0,0,.05);
}

@media (max-width: 800px) {
    .course .tabscontent {
        display:none;
    }

    .course.active .tabspanel-divider {
        display: none
    }
}

.course.active .tabspanel-divider {
    left: calc(35% - 1px);
}

.course .tabspanel-divider {
    position: absolute;
    left: -100px;
    top: 0;
    bottom: 0;
    font-size: 14px;
    z-index: 100;
    vertical-align: middle;
    cursor: pointer;
    background-color: #ced0d1;
    background-size: contain;
    width: 10px;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: left .6s;
    transition: left .6s;
    color: #fff;
}

.main {
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    bottom: 0;
    z-index: 0;

}

Я сделал несколько важных измененийк примеру начальной загрузки, так как я не хотел использовать стандартные столбцы flex из примера, поскольку вместо этого я хочу иметь определенный фиксированный аспект для определенных вещей (например, ширины навигационных столбцов). Так что в этом и заключается основная идея широкого экрана, но я просто не уверен, поддерживает ли начальная загрузка из коробки дополнительную функциональность, которая мне нужна, или мне нужно кодировать ее с помощью jquery / javascript.

Например:

1. Обратите внимание на узком экране, как исчезает содержимое вкладок, но левое поле основного содержимого не отрегулировано так, чтобы оно совпадало с вертикальными вкладками.
2. Поскольку ширина начинает становиться слишком узкойтекст основного содержимого начинает смешиваться с областью содержимого вкладок.
3. При выборе вкладки он становится синим и отображается в области содержимого вкладки, но выбор следующей вкладки не приводит к сбросу цвета предыдущей выбранной вкладки и после того, как яПри выборе всех вкладок при нажатии вкладок они не отображаются в столбце содержимого вкладок.

Я не настолько опытен в разработке, хотя могу справиться с большинством задач. Я - гитарист, намеревающийся создать свой сайт уроков, как я себе представляю, но только что достиг некоторого блока и мне любопытно, можно ли сделать то, что я пытаюсь сделать, с помощью начальной загрузки из коробки, и если нет, то какого рода дополнительные CSS, html и js мне нужно подумать?

Спасибо,

Брайан