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

Question

У меня есть такой вот стартовый макет 4, и я использую koala-app в качестве сжатия scss / sass для папки dist

Blockquote
BS4 ---------------------------------------------------------------- папка
index.html ------------------------------------------------------- Файл
assets ------------------------------------------------------------ Папка
scss -------------------------------------------------------------- Папка
_variable.scss ------------------------------------------------Файл
_global.scss --------------------------------------------------- Файл
main.scss ------------------------------------------------------ Файл
js ------------------------------------------------------------------- Flder
main.js ---------------------------------------------------------- Файл
dist ----------------------------------------------------------------- Папка
Вендор ------------------------------------------------------------ Папка
Botstrap4.3.1 --------------------------------------------------- Папка
koala-config.json

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

, и я надеваю свой код структуры, похожий на этот, мой образец BS4 https://i.stack.imgur.com/XYzc9.jpg и хочу получить лучший стиль из этого (2) https://bootsnipp.com/snippets/PbDb5, но на BS3, мой образец BS3 https://i.stack.imgur.com/icgi2.jpg. Я пробую другое решение из этого (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>

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