Bootstrap 4 раскрывающееся меню гамбургер отзывчивый

Question

У меня есть такая структура начальной загрузки 4 и использование коала-приложения в качестве scss/sass компрессии в папке dist

Blockquote
BS4 ------------------------------------------------- --------------- Папка
index.html ------------------------------------------------------- Файл
активы ------------------------------------------------- ----------- Папка
scss ------------------------------------------------- ------------- Папка
_variable.scss ------------------------------------------------ Файл
_global.scss --------------------------------------------------- Файл
main.scss ----------------------------------------------- ------- Файл
js ------------------------------------------------- ------------------ Flder
main.js ----------------------------------------------- ------------ Файл
dist ------------------------------------------------- ---------------- Папка
продавец ------------------------------------------------- ----------- Папка
botstrap4.3.1 --------------------------------------------------- папка
Коала-config.json

у меня уже есть стиль гамбургер из этого (1) https://codepen.io/rss/pen/vIDKH/

и я надеваю свой код структуры, похожий на этот, мой пример BS4 и хочу получить лучший стиль из этого (2) https://bootsnipp.com/snippets/PbDb5 но это на BS3, мой образец BS3 . Я пытаюсь другое решение из этого (3) https://github.com/mladenplavsic/bootstrap-navbar-sidebar это тоже BS3. Я поместил код структуры как это в моем index.html BS4

$(".toggle-icon").click(function() {
   $('#nav-container').toggleClass("pushed");
    });

  body{
 background:#222;
 padding: 100px;
 font-size: 10px; /*increase me to scale toogle-icon*/
}

#nav-container{
 position: absolute;
 top: 25px;
 left: 0px;
 margin:1em;
}

/*toggle-icon*/
.toggle-icon {
 display: block;
 position: relative;
 width: 100%;
 margin: -2.2em auto 0 0.2em;
 -webkit-transition: margin 600ms;
 -moz-transition: margin 600ms;
 transition: margin 600ms;
 cursor: pointer;
}

.toggle-icon .bar {
 display: block;
 width: 3.8em;
 height: 0.2em;
 margin: 0.9em;
 border-right: 2.8em solid #fff;
 border-left: 0.6em solid #d6d6d6;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow;
 -moz-transition-property: -moz-transform, margin, border-right-color, box-shadow;
 transition-property: transform, margin, border-right-color, box-shadow;
 -webkit-transition-duration: 600ms;
 -moz-transition-duration: 600ms;
 transition-duration: 600ms;
}
 .toggle-icon .bar:nth-of-type(1) {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
 }
 .toggle-icon .bar:nth-of-type(2) {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
 }

/*pushed*/
.pushed .toggle-icon {
 margin: -3.2em 0 0 0.7em;
}

 .pushed .bar:nth-of-type(1) {
  opacity: 0;
 }

 .pushed .bar:nth-of-type(2) {
  margin-left: 1.4em;
  -webkit-transform: rotate(-137deg) translateY(-1.5em);
  -moz-transform: rotate(-137deg) translateY(-1.5em);
  -ms-transform: rotate(-137deg) translateY(-1.5em);
  -o-transform: rotate(-137deg) translateY(-1.5em);
  transform: rotate(-137deg) translateY(-1.5em);
 }

 .pushed .bar:nth-of-type(3) {
  margin-left: 0.5em;
  -webkit-transform: rotate(-42deg);
  -moz-transform: rotate(-42deg);
  -ms-transform: rotate(-42deg);
  -o-transform: rotate(-42deg);
  transform: rotate(-42deg);
 }


.pushed .toggle-icon:hover .bar:nth-of-type(2) {
 border-right-color: #e9b8b9;
 box-shadow: 0.4em 0 0.6em 0.1em rgba(205,40,44,0.75);
}
.pushed .toggle-icon:hover .bar:nth-of-type(3) {
 border-right-color: #ddf1da;
 box-shadow: 0.4em 0 0.6em 0.1em rgba(83,228,68,0.65);
}

.site-header {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   width: 125px;
   height: 100vh;
   padding: 0 15px;
   box-shadow: 6px 0 12px rgba(0,0,0,.05);
   background: rgb(8, 4, 4);
  }

<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>
<body>
<header class="site-header">
    <!-- menu -->
    <div id="nav-container">
       <div class="toggle-icon">
         <span class="bar"></span>
         <span class="bar"></span>
         <span class="bar"></span>
       </div><!-- /toggle-icon -->
        </div><!-- /nav-container -->
              <!-- i need help from here to having dropwdown like my sample (2) -->
    <!-- End Menu -->
        <!-- Logo -->
    
    <!-- End Logo -->
   </header>
</body>
</html>

Мой вопрос заключается в том, как создать боковую панель, используя humburger (1), чтобы взять лучший макет из (2) и сделать его отзывчивым по отношению к числу (3) с помощью начальной загрузки 4.