/ Sidebar Menu

Vertical/Horizontal responsive sidebar

Vertical/Horizontal responsive sidebar

RESPONSIVE SIDEBAR/NAVBAR

Vertical/Horizontal responsive sidebar/navbar.

Made with

Html
Css/SCSS
Javascript

Html

<header>
	<section id="desktop-menu" class="desktop-menu">
		<nav class="sidebar flex-column-nowrap" role="navigation">
      <a class="sidebar__logo" href="#" >
        <span class="logo">FB</span>
      </a>
      </div>
			<ul class="sidebar__nav-list flex-column-nowrap">
				<li class="nav-list__item about-me active fake-button flex-column-nowrap">
					<a class="flex-row-wrap">
						<svg height="38.095242" width="40" viewBox="0 0 44.017969 41.921879"><path d="m 21.936719,23.52688 c 6.505156,0 11.781484,-5.27641 11.781484,-11.78148 C 33.718203,5.24032 28.441797,0 21.936719,0 15.431641,0 10.155234,5.27641 10.155234,11.7454 c 0,6.46898 5.276329,11.78148 11.781485,11.78148 z m 0,-20.455 c 4.77039,0 8.673515,3.90305 8.673515,8.67352 0,4.77046 -3.903125,8.67343 -8.673515,8.67343 -4.770391,0 -8.673516,-3.90304 -8.673516,-8.67351 0,-4.77047 3.903047,-8.67344 8.673516,-8.67344 z" id="path2" class="path" style="fill:#c6c6c6;stroke-width:0.8;stroke:#1B1D1D;" /><path d="M 1.5539844,41.92188 H 42.463984 c 0.867344,0 1.553985,-0.68664 1.553985,-1.55398 0,-8.13141 -6.613516,-14.7811 -14.781094,-14.7811 H 14.781094 C 6.6496875,25.5868 0,32.20032 0,40.3679 c 0,0.86734 0.68664062,1.55398 1.5539844,1.55398 z M 14.781094,28.69477 h 14.455781 c 5.926875,0 10.805703,4.40906 11.564688,10.11906 H 3.2164063 C 3.9753125,33.14 8.8542188,28.69477 14.781094,28.69477 Z" id="path4" class="path" style="fill:#c6c6c6;stroke-width:0.8;stroke:#1B1D1D;" /></svg>
						<span class="u-uppercase">About me</span>
					</a>
				</li>
				<li class="nav-list__item skills fake-button flex-column-nowrap">
					<a class="flex-row-wrap">
						<svg viewBox="0 0 32.265313 27.8375" height="34.510746" width="40"><g id="g4547"><path style="fill:#c6c6c6;stroke-width:0.3;stroke:#1B1D1D;" id="path2" class="path" d="M 30.702812,0 H 1.5625 C 0.69945313,0 0,0.69953 0,1.5625 v 18.28125 c 0,0.86297 0.69945313,1.5625 1.5625,1.5625 h 10.898281 v 3.54063 H 8.2199219 c -0.7969532,0 -1.4453125,0.64835 -1.4453125,1.44531 0,0.79695 0.6483593,1.44531 1.4453125,1.44531 H 24.045391 c 0.796953,0 1.445312,-0.64836 1.445312,-1.44531 0,-0.79696 -0.648359,-1.44531 -1.445312,-1.44531 h -4.24086 v -3.54063 h 10.898281 c 0.863047,0 1.5625,-0.69953 1.5625,-1.5625 V 1.5625 C 32.265312,0.69953 31.565859,0 30.702812,0 Z m -0.78125,19.0625 H 2.34375 V 2.34375 h 27.577812 z" /><path style="fill:#c6c6c6;stroke-width:0.3;stroke:#1B1D1D;" id="path4" class="path" d="m 5.6125953,11.58586 4.9284377,2.29187 c 0.127422,0.059 0.263047,0.0889 0.403281,0.0889 0.182656,0 0.360625,-0.0519 0.515391,-0.15031 0.277187,-0.17711 0.442656,-0.47891 0.442656,-0.80742 v -0.0252 c 0,-0.37117 -0.217578,-0.71211 -0.554375,-0.86867 L 8.2655641,10.683 11.348064,9.25065 c 0.336719,-0.15656 0.554297,-0.49758 0.554297,-0.86859 v -0.0249 c 0,-0.32899 -0.165547,-0.63078 -0.442578,-0.80735 -0.153281,-0.098 -0.331797,-0.14968 -0.516094,-0.14968 -0.138906,0 -0.278359,0.0305 -0.403125,0.0885 L 5.6125172,9.78019 C 5.2759547,9.93684 5.0585328,10.27777 5.0585328,10.64871 v 0.0686 c -7.81e-5,0.37047 0.2172656,0.71133 0.5540625,0.86852 z" /><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D;" id="path6" class="path" d="m 13.723594,16.25398 c 0.179765,0.24602 0.468906,0.39289 0.773515,0.39289 h 0.02461 c 0.418125,0 0.784531,-0.26765 0.911875,-0.66531 L 18.680234,5.92219 C 18.773364,5.6318 18.721644,5.31141 18.541875,5.06484 18.362109,4.81883 18.072969,4.67187 17.768359,4.67187 h -0.02453 c -0.418281,0 -0.785,0.26766 -0.912422,0.66532 l -3.247031,10.06023 c -0.09234,0.29063 -0.04031,0.6107 0.139218,0.85656 z" /><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D;" id="path8" class="path" d="m 20.362952,8.38203 c 0,0.37078 0.217343,0.71172 0.554296,0.86891 l 3.082422,1.43203 -3.082422,1.43203 c -0.336796,0.15656 -0.554375,0.4975 -0.554375,0.86867 v 0.0252 c 0,0.32851 0.165391,0.63031 0.442891,0.8075 0.154219,0.0983 0.332344,0.15023 0.515234,0.15023 0.14,0 0.275547,-0.0299 0.403829,-0.0892 l 4.928203,-2.29179 c 0.336484,-0.15696 0.553828,-0.49782 0.553828,-0.86836 v -0.0686 c 0,-0.37093 -0.217422,-0.71187 -0.554141,-0.86851 L 21.724592,7.48842 c -0.124297,-0.0577 -0.263515,-0.0884 -0.4025,-0.0884 -0.184219,0 -0.362812,0.0517 -0.515937,0.14937 -0.277657,0.17688 -0.443203,0.47868 -0.443203,0.80766 z" /></g></svg>
						<span class="u-uppercase">Skills</span>
					</a>
				</li>
				<li class="nav-list__item my-work fake-button flex-column-nowrap">
					<a class="flex-row-wrap">
						<svg viewBox="0 0 40 25" height="25" width="40"><path d="M 20,0 C 11.276641,0 3.7155469,5.0797656 0,12.5 3.7155469,19.920234 11.276641,25 20,25 28.723125,25 36.284297,19.920234 40,12.5 36.284453,5.0797656 28.723125,0 20,0 Z m 9.861328,6.6290625 C 32.211484,8.1280469 34.202891,10.135859 35.69875,12.5 34.202969,14.864141 32.211328,16.871953 29.861328,18.370938 26.908437,20.254453 23.498359,21.25 20,21.25 16.501562,21.25 13.091563,20.254453 10.138672,18.370938 7.7886719,16.871875 5.7972656,14.864062 4.3014063,12.5 5.7971875,10.135781 7.7886719,8.1279688 10.138672,6.6290625 10.291719,6.5314062 10.446328,6.4367969 10.601875,6.3439062 10.212891,7.4114063 10,8.5635156 10,9.765625 c 0,5.522734 4.477187,10 10,10 5.522734,0 10,-4.477266 10,-10 0,-1.2021094 -0.212891,-2.3542188 -0.601797,-3.4217969 0.155313,0.092891 0.310078,0.1875781 0.463125,0.2852344 z M 20,8.515625 c 0,2.071094 -1.678906,3.75 -3.75,3.75 -2.071094,0 -3.75,-1.678906 -3.75,-3.75 0,-2.0710937 1.678906,-3.75 3.75,-3.75 2.071094,0 3.75,1.6789063 3.75,3.75 z" id="path2" class="path" style="fill:#c6c6c6;stroke-width:0.8;stroke:#1B1D1D;" /></svg>
						<span class="u-uppercase">My work</span>
					</a>
				</li>
				<li class="nav-list__item contact fake-button flex-column-nowrap">
					<a class="flex-row-wrap">
						<svg height="27.213362" width="40" viewBox="0 0 18.832891 12.812657"><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D;" id="path2" class="path" d="M 15.515781,2.4900782 9.4171094,7.8642188 3.3171094,2.49 C 3.0742188,2.2760156 2.7039844,2.2995313 2.4900781,2.5422656 2.27625,2.7850782 2.2995313,3.1553125 2.5424219,3.3692969 l 6.4874219,5.7155469 c 0.1107031,0.0975 0.2490625,0.14625 0.3873437,0.14625 0.1382812,0 0.2767188,-0.04875 0.3874219,-0.1463281 L 16.290703,3.3692188 C 16.533438,3.1553125 16.556797,2.785 16.342891,2.5421875 16.128828,2.2996094 15.758672,2.2761719 15.515781,2.4900782 Z" /><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D; " id="path4" d="M 17.075078,2.5e-8 H 1.7578125 C 0.78859375,2.5e-8 0,0.78851565 0,1.7578125 v 9.2970315 c 0,0.969297 0.78859375,1.757812 1.7578125,1.757812 H 17.075078 c 0.969219,0 1.757813,-0.788515 1.757813,-1.757812 V 1.7578125 C 18.832891,0.78859378 18.044297,2.5e-8 17.075078,2.5e-8 Z M 17.661016,11.054844 c 0,0.323047 -0.262813,0.585937 -0.585938,0.585937 H 1.7578125 c -0.323125,0 -0.5859375,-0.26289 -0.5859375,-0.585937 V 1.7578125 c 0,-0.3230468 0.2628125,-0.5859375 0.5859375,-0.5859375 H 17.075078 c 0.323125,0 0.585938,0.2628907 0.585938,0.5859375 z" /></svg>
						<span class="u-uppercase">Contact</span>
					</a>
				</li>
			</ul>
			<ul class="sidebar__extra-content">
				<li class="extra-content__language">
					<svg height="39.999043" width="40.000126" viewBox="0 0 1.1718787 1.1718469"><path d="M 1.1704687,0.546847 C 1.15125,0.254347 0.9175,0.020519 0.625,0.0013 V 0 H 0.5859375 0.546875 V 0.0013 C 0.254375,0.020519 0.02054688,0.254347 0.00132813,0.546847 H 0 v 0.03906 0.03906 H 0.00132813 C 0.02054688,0.917467 0.254375,1.151217 0.546875,1.170436 v 0.00141 H 0.5859375 0.625 v -0.0014 C 0.9175,1.151227 1.15125,0.917478 1.1704687,0.624978 h 0.00141 V 0.58591 0.546847 Z M 0.36679688,0.127706 c -0.0377344,0.05016 -0.0690625,0.113047 -0.091875,0.184766 H 0.15789063 C 0.20882813,0.233022 0.28117188,0.168722 0.36679688,0.127706 Z M 0.11703125,0.390597 H 0.254375 C 0.2439062,0.439967 0.2372656,0.492394 0.2351562,0.546847 H 0.07960937 C 0.08375,0.491847 0.09671875,0.439269 0.11703125,0.390597 Z M 0.07960937,0.624972 h 0.15554688 c 0.002109,0.05445 0.00875,0.106875 0.0192188,0.15625 H 0.11703125 C 0.09671875,0.73255 0.08375,0.679972 0.07960937,0.624972 Z m 0.07828126,0.234375 h 0.11695312 c 0.0228125,0.07172 0.0541406,0.134609 0.0919531,0.184766 C 0.28117188,1.003097 0.20882813,0.938878 0.15789063,0.859347 Z M 0.546875,1.088722 C 0.4665625,1.067238 0.39742188,0.980988 0.35546875,0.859347 H 0.546875 Z m 0,-0.3075 H 0.33351562 C 0.3225,0.73255 0.31554688,0.679972 0.31328125,0.624972 H 0.546875 Z m 0,-0.234375 H 0.31328125 c 0.002266,-0.055 0.009219,-0.107578 0.0202344,-0.15625 H 0.546875 Z m 0,-0.234375 H 0.35546875 C 0.39742188,0.190831 0.4665625,0.104581 0.546875,0.083175 Z m 0.4671094,0 H 0.89710938 C 0.87421878,0.240752 0.84296878,0.177863 0.80507808,0.127706 0.89062498,0.168726 0.96304683,0.233019 1.0139844,0.312472 Z M 0.625,0.083175 c 0.0802344,0.02141 0.14945312,0.107656 0.19140625,0.229297 H 0.625 Z m 0,0.307422 h 0.21328125 c 0.0110938,0.048672 0.0178906,0.10125 0.0203125,0.15625 H 0.625 Z m 0,0.234375 h 0.23359375 c -0.002266,0.055 -0.009219,0.107578 -0.0203125,0.15625 H 0.625 Z m 0,0.46375 V 0.859347 H 0.81640625 C 0.77445312,0.980988 0.70523437,1.067238 0.625,1.088722 Z m 0.18007812,-0.04461 c 0.0377344,-0.05023 0.0691406,-0.113047 0.0920313,-0.184766 H 1.0139844 C 0.9630469,0.938876 0.890625,1.003096 0.80507812,1.044112 Z M 1.0548437,0.781222 H 0.9175 C 0.9279688,0.731852 0.9346094,0.679425 0.9367188,0.624972 h 0.1554687 c -0.00406,0.055 -0.017031,0.107578 -0.037344,0.15625 z M 0.93671875,0.546847 c -0.002109,-0.05445 -0.00875,-0.106875 -0.0192188,-0.15625 H 1.0548436 c 0.020312,0.04867 0.033281,0.10125 0.037422,0.15625 z" id="path2" style="fill:#c6c6c6;stroke-width:0.078125" /></svg><svg height="17.021526" width="9.999999" viewBox="0 0 9.6094522 16.356756"><g transform="matrix(0.03324517,0,0,0.03324517,-3.3736534,0)" id="g6"><path style="fill:#c6c6c6" id="path2" d="M 382.678,226.804 163.73,7.86 C 158.666,2.792 151.906,0 144.698,0 137.49,0 130.73,2.792 125.666,7.86 l -16.124,16.12 c -10.492,10.504 -10.492,27.576 0,38.064 L 293.398,245.9 109.338,429.96 c -5.064,5.068 -7.86,11.824 -7.86,19.028 0,7.212 2.796,13.968 7.86,19.04 l 16.124,16.116 c 5.068,5.068 11.824,7.86 19.032,7.86 7.208,0 13.968,-2.792 19.032,-7.86 L 382.678,265 c 5.076,-5.084 7.864,-11.872 7.848,-19.088 0.016,-7.244 -2.772,-14.028 -7.848,-19.108 z" /></g></svg>
					<span class="u-uppercase">Language</span>
					<ul class="extra-content__language-selector flex-column-nowrap">
						<li class="language-selector__item u-uppercase ca">
							<a href="#">
								<svg viewBox="0 0 20 20.000012" height="20.000011" width="20"><g transform="matrix(1.3333333,0,0,1.3333333,0,-3.9999884)" id="g4506"><path d="M 13.751667,6.36 H 1.2483333 A 7.4641667,7.4641667 0 0 0 0.4325,8.0083333 H 14.566667 A 7.425,7.425 0 0 0 13.751667,6.36 Z M 7.5,3 A 7.4683333,7.4683333 0 0 0 2.7308333,4.7116667 H 12.269167 A 7.4683333,7.4683333 0 0 0 7.5,3 Z" id="path2" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 12.269167,4.7116667 H 2.7308333 A 7.5291667,7.5291667 0 0 0 1.2483333,6.36 H 13.750833 A 7.505,7.505 0 0 0 12.269167,4.7116667 Z" id="path4" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 15,10.5 C 15,10.214167 14.980833,9.9341667 14.95,9.6566667 H 0.05 C 0.01916667,9.9341667 0,10.214167 0,10.5 c 0,0.2725 0.01666667,0.54 0.04416667,0.805 H 14.955 C 14.984167,11.04 15,10.7725 15,10.5 Z" id="path6" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.5675,8.0083333 H 0.4325 A 7.465,7.465 0 0 0 0.05,9.6566667 h 14.9 A 7.465,7.465 0 0 0 14.5675,8.0083333 Z M 13.775,14.601667 H 1.225 A 7.5,7.5 0 0 0 2.6883333,16.25 H 12.311667 A 7.5433333,7.5433333 0 0 0 13.775,14.601667 Z" id="path8" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 2.6883333,16.25 C 3.9908333,17.340833 5.6675,18 7.5,18 c 1.8325,0 3.509167,-0.659167 4.811667,-1.75 z" id="path10" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.955833,11.305 H 0.04416667 C 0.105,11.8775 0.23583333,12.4275 0.41833333,12.953333 H 14.580833 a 7.4766667,7.4766667 0 0 0 0.375,-1.648333 z" id="path12" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 14.580833,12.953333 H 0.41916667 c 0.2025,0.585834 0.4725,1.139167 0.80666663,1.648334 H 13.775833 a 7.4833333,7.4833333 0 0 0 0.805,-1.648334 z" id="path14" style="fill:#ffeb00;stroke-width:0.83333331" /></g></svg>
								<span class="u-uppercase">CAT</span>
							</a>
						</li>
						<li class="language-selector__item u-uppercase es">
							<a href="#">
								<svg height="20" width="20" viewBox="0 0 20 20"><g transform="translate(0,-492)" id="g4527"><path style="fill:#ffda44;stroke-width:0.0390625" d="m 0,502 c 0,1.2232 0.22003906,2.39492 0.62199219,3.47824 L 10,506.34781 19.378008,505.47824 C 19.779961,504.39492 20,503.2232 20,502 c 0,-1.2232 -0.220039,-2.39492 -0.621992,-3.47824 L 10,497.65219 0.62199219,498.52176 C 0.22003906,499.60508 0,500.7768 0,502 Z" id="path2" /><path id="path4" d="M 19.378008,498.52176 C 17.965078,494.71379 14.299648,492 10,492 c -4.2996484,0 -7.9650781,2.71379 -9.37800781,6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /><path id="path6" d="M 0.62199219,505.47824 C 2.0349219,509.28621 5.7003516,512 10,512 c 4.299648,0 7.965078,-2.71379 9.378008,-6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /></g></svg>
								<span class="u-uppercase">ES</span>
							</a>
						</li>
						<li class="language-selector__item u-uppercase eng is-selected">
							<a href="#">
								<svg height="20" width="20" viewBox="0 0 20 20"><circle id="circle2" r="10" cy="10" cx="10" style="fill:#f0f0f0;stroke-width:0.0390625" /><g transform="scale(0.0390625)" id="g20"><path id="path4" d="M 52.92,100.142 C 32.811,126.305 17.648,156.46 8.819,189.219 h 133.178 z" style="fill:#0052b4" /><path id="path6" d="m 503.181,189.219 c -8.829,-32.758 -23.993,-62.913 -44.101,-89.076 l -89.075,89.076 z" style="fill:#0052b4" /><path id="path8" d="m 8.819,322.784 c 8.83,32.758 23.993,62.913 44.101,89.075 l 89.074,-89.075 z" style="fill:#0052b4" /><path id="path10" d="M 411.858,52.921 C 385.695,32.812 355.541,17.649 322.782,8.819 v 133.177 z" style="fill:#0052b4" /><path id="path12" d="m 100.142,459.079 c 26.163,20.109 56.318,35.272 89.076,44.102 V 370.005 Z" style="fill:#0052b4" /><path id="path14" d="m 189.217,8.819 c -32.758,8.83 -62.913,23.993 -89.075,44.101 l 89.075,89.075 z" style="fill:#0052b4" /><path id="path16" d="m 322.783,503.181 c 32.758,-8.83 62.913,-23.993 89.075,-44.101 l -89.075,-89.075 z" style="fill:#0052b4" /><path id="path18" d="m 370.005,322.784 89.075,89.076 c 20.108,-26.162 35.272,-56.318 44.101,-89.076 z" style="fill:#0052b4" /></g><g transform="scale(0.0390625)" id="g32"><path id="path22" d="m 509.833,222.609 h -220.44 -10e-4 V 2.167 C 278.461,0.744 267.317,0 256,0 244.681,0 233.539,0.744 222.609,2.167 v 220.44 0.001 H 2.167 C 0.744,233.539 0,244.683 0,256 c 0,11.319 0.744,22.461 2.167,33.391 h 220.44 0.001 V 509.833 C 233.539,511.256 244.681,512 256,512 c 11.317,0 22.461,-0.743 33.391,-2.167 v -220.44 -10e-4 H 509.833 C 511.256,278.461 512,267.319 512,256 c 0,-11.317 -0.744,-22.461 -2.167,-33.391 z" style="fill:#d80027" /><path id="path24" d="m 322.783,322.784 v 0 L 437.019,437.02 c 5.254,-5.252 10.266,-10.743 15.048,-16.435 l -97.802,-97.802 h -31.482 z" style="fill:#d80027" /><path id="path26" d="m 189.217,322.784 h -0.002 L 74.98,437.019 c 5.252,5.254 10.743,10.266 16.435,15.048 l 97.802,-97.804 z" style="fill:#d80027" /><path id="path28" d="m 189.217,189.219 v -0.002 L 74.981,74.98 C 69.727,80.232 64.715,85.723 59.933,91.415 l 97.803,97.803 h 31.481 z" style="fill:#d80027" /><path id="path30" d="m 322.783,189.219 v 0 L 437.02,74.981 C 431.768,69.727 426.277,64.715 420.585,59.934 l -97.802,97.803 z" style="fill:#d80027" /></g></svg>
								<span class="u-uppercase">ENG</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="extra-content__share fake-button flex-row-wrap"><svg height="40" width="40" viewBox="0 0 4.53125 4.53125"><g transform="scale(0.078125)" id="g4530"><path style="fill:#c6c6c6;stroke-width:2;stroke:#c6c6c6" id="path2" d="M 54.319,37.839 C 54.762,35.918 55,33.96 55,32 55,22.905 50.369,14.623 42.611,9.847 42.138,9.557 41.524,9.704 41.235,10.174 40.945,10.645 41.092,11.26 41.562,11.55 48.724,15.96 53,23.604 53,32 53,33.726 52.8,35.451 52.427,37.147 51.966,37.051 51.489,37 51,37 c -3.86,0 -7,3.141 -7,7 0,3.859 3.14,7 7,7 3.86,0 7,-3.141 7,-7 0,-2.659 -1.491,-4.976 -3.681,-6.161 z M 51,49 c -2.757,0 -5,-2.243 -5,-5 0,-2.757 2.243,-5 5,-5 2.757,0 5,2.243 5,5 0,2.757 -2.243,5 -5,5 z" /><path style="fill:#c6c6c6;stroke-width:2;stroke:#c6c6c6;" id="path4" d="M 38.171,54.182 C 35.256,55.388 32.171,56 29,56 22.615,56 16.473,53.425 11.983,48.908 13.229,47.643 14,45.911 14,44 c 0,-3.859 -3.14,-7 -7,-7 -3.86,0 -7,3.141 -7,7 0,3.859 3.14,7 7,7 1.226,0 2.378,-0.319 3.381,-0.875 C 15.26,55.136 21.994,58 29,58 c 3.435,0 6.778,-0.663 9.936,-1.971 0.51,-0.211 0.753,-0.796 0.542,-1.307 -0.211,-0.509 -0.797,-0.751 -1.307,-0.54 z M 2,44 c 0,-2.757 2.243,-5 5,-5 2.757,0 5,2.243 5,5 0,2.757 -2.243,5 -5,5 -2.757,0 -5,-2.243 -5,-5 z" /><path style="fill:#c6c6c6;stroke-width:2;stroke:#c6c6c6" id="path6" d="m 4,31.213 c 0.024,0.002 0.048,0.003 0.071,0.003 0.521,0 0.959,-0.402 0.997,-0.93 C 5.78,20.197 12.654,11.766 22.288,8.972 23.142,11.874 25.825,14 29,14 32.86,14 36,10.859 36,7 36,3.141 32.86,0 29,0 25.149,0 22.015,3.127 22.001,6.975 11.42,9.922 3.851,19.12 3.073,30.146 3.034,30.696 3.449,31.175 4,31.213 Z M 29,2 c 2.757,0 5,2.243 5,5 0,2.757 -2.243,5 -5,5 -2.757,0 -5,-2.243 -5,-5 0,-2.757 2.243,-5 5,-5 z" /></g></svg>
					<span class="u-uppercase">Share</span>
				</li>
			</ul>
		</nav>
	</section>
	<section id="mobile-menu" class="mobile-menu navbar flex-row-wrap">
		<a class="navbar__logo" href="#">
			<span class="logo">FB</span>
		</a>
		<div class="navbar__mobile-menu">
			<div class="menu">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<nav class="navbar__mobile-menu__nav" role="navigation">
			<ul class="navbar__mobile-menu__list flex-column-nowrap">
				<li class="navbar__mobile-menu__item flex-row-wrap about-me u-uppercase fake-button active">
          <a href="#">About me</a>
        </li>
				<li class="navbar__mobile-menu__item flex-row-wrap skills u-uppercase fake-button">
          <a href="#">Skills</a>
        </li>
				<li class="navbar__mobile-menu__item flex-row-wrap my-work u-uppercase fake-button">
          <a href="#">My work</a>
        </li>
				<li class="navbar__mobile-menu__item flex-row-wrap contact u-uppercase fake-button">
          <a href="#">Contact</a>
        </li>
        <li class="navbar__mobile-menu__item flex-row-wrap language u-uppercase fake-button">
          <a class="flex-row-nowrap">
            <span>Language</span>
            <svg class="arrow-icon" height="17.021526" width="9.999999" viewBox="0 0 9.6094522 16.356756"><g transform="matrix(0.03324517,0,0,0.03324517,-3.3736534,0)" id="g6"><path style="fill:#c6c6c6" id="path2" d="M 382.678,226.804 163.73,7.86 C 158.666,2.792 151.906,0 144.698,0 137.49,0 130.73,2.792 125.666,7.86 l -16.124,16.12 c -10.492,10.504 -10.492,27.576 0,38.064 L 293.398,245.9 109.338,429.96 c -5.064,5.068 -7.86,11.824 -7.86,19.028 0,7.212 2.796,13.968 7.86,19.04 l 16.124,16.116 c 5.068,5.068 11.824,7.86 19.032,7.86 7.208,0 13.968,-2.792 19.032,-7.86 L 382.678,265 c 5.076,-5.084 7.864,-11.872 7.848,-19.088 0.016,-7.244 -2.772,-14.028 -7.848,-19.108 z"></path></g></svg>
          </a>
          <ul class="language__list flex-row-nowrap">
            <li class="language__item ca">
              <a class="flex-row-nowrap" href="#">
                <svg viewBox="0 0 20 20.000012" height="20.000011" width="20"><g transform="matrix(1.3333333,0,0,1.3333333,0,-3.9999884)" id="g4506"><path d="M 13.751667,6.36 H 1.2483333 A 7.4641667,7.4641667 0 0 0 0.4325,8.0083333 H 14.566667 A 7.425,7.425 0 0 0 13.751667,6.36 Z M 7.5,3 A 7.4683333,7.4683333 0 0 0 2.7308333,4.7116667 H 12.269167 A 7.4683333,7.4683333 0 0 0 7.5,3 Z" id="path2" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 12.269167,4.7116667 H 2.7308333 A 7.5291667,7.5291667 0 0 0 1.2483333,6.36 H 13.750833 A 7.505,7.505 0 0 0 12.269167,4.7116667 Z" id="path4" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 15,10.5 C 15,10.214167 14.980833,9.9341667 14.95,9.6566667 H 0.05 C 0.01916667,9.9341667 0,10.214167 0,10.5 c 0,0.2725 0.01666667,0.54 0.04416667,0.805 H 14.955 C 14.984167,11.04 15,10.7725 15,10.5 Z" id="path6" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.5675,8.0083333 H 0.4325 A 7.465,7.465 0 0 0 0.05,9.6566667 h 14.9 A 7.465,7.465 0 0 0 14.5675,8.0083333 Z M 13.775,14.601667 H 1.225 A 7.5,7.5 0 0 0 2.6883333,16.25 H 12.311667 A 7.5433333,7.5433333 0 0 0 13.775,14.601667 Z" id="path8" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 2.6883333,16.25 C 3.9908333,17.340833 5.6675,18 7.5,18 c 1.8325,0 3.509167,-0.659167 4.811667,-1.75 z" id="path10" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.955833,11.305 H 0.04416667 C 0.105,11.8775 0.23583333,12.4275 0.41833333,12.953333 H 14.580833 a 7.4766667,7.4766667 0 0 0 0.375,-1.648333 z" id="path12" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 14.580833,12.953333 H 0.41916667 c 0.2025,0.585834 0.4725,1.139167 0.80666663,1.648334 H 13.775833 a 7.4833333,7.4833333 0 0 0 0.805,-1.648334 z" id="path14" style="fill:#ffeb00;stroke-width:0.83333331" /></g></svg>
                <span>CA</span>
              </a>
            </li>
            <li class="language__item es">
              <a class="flex-row-nowrap" href="#">
								<svg height="20" width="20" viewBox="0 0 20 20"><g transform="translate(0,-492)" id="g4527"><path style="fill:#ffda44;stroke-width:0.0390625" d="m 0,502 c 0,1.2232 0.22003906,2.39492 0.62199219,3.47824 L 10,506.34781 19.378008,505.47824 C 19.779961,504.39492 20,503.2232 20,502 c 0,-1.2232 -0.220039,-2.39492 -0.621992,-3.47824 L 10,497.65219 0.62199219,498.52176 C 0.22003906,499.60508 0,500.7768 0,502 Z" id="path2" /><path id="path4" d="M 19.378008,498.52176 C 17.965078,494.71379 14.299648,492 10,492 c -4.2996484,0 -7.9650781,2.71379 -9.37800781,6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /><path id="path6" d="M 0.62199219,505.47824 C 2.0349219,509.28621 5.7003516,512 10,512 c 4.299648,0 7.965078,-2.71379 9.378008,-6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /></g></svg>
                <span>ES</span>
              </a>
            </li>
            <li class="language__item eng is-selected">
              <a class="flex-row-nowrap" href="#">
                <svg height="20" width="20" viewBox="0 0 20 20"><circle id="circle2" r="10" cy="10" cx="10" style="fill:#f0f0f0;stroke-width:0.0390625" /><g transform="scale(0.0390625)" id="g20"><path id="path4" d="M 52.92,100.142 C 32.811,126.305 17.648,156.46 8.819,189.219 h 133.178 z" style="fill:#0052b4" /><path id="path6" d="m 503.181,189.219 c -8.829,-32.758 -23.993,-62.913 -44.101,-89.076 l -89.075,89.076 z" style="fill:#0052b4" /><path id="path8" d="m 8.819,322.784 c 8.83,32.758 23.993,62.913 44.101,89.075 l 89.074,-89.075 z" style="fill:#0052b4" /><path id="path10" d="M 411.858,52.921 C 385.695,32.812 355.541,17.649 322.782,8.819 v 133.177 z" style="fill:#0052b4" /><path id="path12" d="m 100.142,459.079 c 26.163,20.109 56.318,35.272 89.076,44.102 V 370.005 Z" style="fill:#0052b4" /><path id="path14" d="m 189.217,8.819 c -32.758,8.83 -62.913,23.993 -89.075,44.101 l 89.075,89.075 z" style="fill:#0052b4" /><path id="path16" d="m 322.783,503.181 c 32.758,-8.83 62.913,-23.993 89.075,-44.101 l -89.075,-89.075 z" style="fill:#0052b4" /><path id="path18" d="m 370.005,322.784 89.075,89.076 c 20.108,-26.162 35.272,-56.318 44.101,-89.076 z" style="fill:#0052b4" /></g><g transform="scale(0.0390625)" id="g32"><path id="path22" d="m 509.833,222.609 h -220.44 -10e-4 V 2.167 C 278.461,0.744 267.317,0 256,0 244.681,0 233.539,0.744 222.609,2.167 v 220.44 0.001 H 2.167 C 0.744,233.539 0,244.683 0,256 c 0,11.319 0.744,22.461 2.167,33.391 h 220.44 0.001 V 509.833 C 233.539,511.256 244.681,512 256,512 c 11.317,0 22.461,-0.743 33.391,-2.167 v -220.44 -10e-4 H 509.833 C 511.256,278.461 512,267.319 512,256 c 0,-11.317 -0.744,-22.461 -2.167,-33.391 z" style="fill:#d80027" /><path id="path24" d="m 322.783,322.784 v 0 L 437.019,437.02 c 5.254,-5.252 10.266,-10.743 15.048,-16.435 l -97.802,-97.802 h -31.482 z" style="fill:#d80027" /><path id="path26" d="m 189.217,322.784 h -0.002 L 74.98,437.019 c 5.252,5.254 10.743,10.266 16.435,15.048 l 97.802,-97.804 z" style="fill:#d80027" /><path id="path28" d="m 189.217,189.219 v -0.002 L 74.981,74.98 C 69.727,80.232 64.715,85.723 59.933,91.415 l 97.803,97.803 h 31.481 z" style="fill:#d80027" /><path id="path30" d="m 322.783,189.219 v 0 L 437.02,74.981 C 431.768,69.727 426.277,64.715 420.585,59.934 l -97.802,97.803 z" style="fill:#d80027" /></g></svg>
                <span>ENG</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="navbar__mobile-menu__item flex-row-wrap share u-uppercase fake-button">
          <a>Share</a>
        </li>
			</ul>
		</nav>
	</section>
</header>

Css

// Variables
$c-main: hsla(0, 100%, 100%, 0.75);
$c-secondary: hsla(200, 5%, 11%, 1);
$c-secondary-complementary: hsla(0, 0%, 13%, 1);
$c-third: hsla(180, 4%, 36%, 1);
$c-malabars: hsla(178, 40%, 49%, 1);
$c-shadow-main: hsla(240, 3%, 19%, 1);
$c-shadow-secondary: hsla(0, 0%, 0%, 0.26);
$bg-main: hsla(210, 3%, 15%, 1);

// Fonts
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

// General
* {
  box-sizing: border-box;
}

body {
  font-size: 12px;
  font-family: 'Josefin Sans', 'Roboto', sans-serif;
  background-color: $bg-main;
  color: $c-main;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

li {
  width: 100%;
}

svg {
  max-width: 30px;
  width: 100%;
  transition: all 0.3s ease;
}

.u-uppercase {
  text-transform: uppercase;
}

.fake-button {
  &:active {
    transform: scale(0.95);
  }
}

.flex-column-nowrap {
  display: flex;
  flex-flow: column nowrap;
}

.flex-row-wrap {
  display: flex;
  flex-flow: row wrap;
}

.flex-row-nowrap {
  display: flex;
  flex-flow: row nowrap;
}

.sidebar__logo,
.navbar__logo {
  position: relative;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  z-index: 10;
  .logo {
    top: 50%;
    left: 50%;
    color: $c-main;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: -4px;
    text-shadow: 0 0.2rem 0.4rem $c-shadow-main, 0 0.2rem 0.4rem $c-shadow-main;
    transform: translate(-50%, 100%);
  }
  &:before,
  &:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 2rem;
    padding: 1rem;
    border: 5px solid $c-malabars;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: 10s infinite alternate ease-in-out spin;
  }
  &:before {
    border-color: $c-malabars $c-malabars transparent transparent;
    z-index: -1;
  }
  &:after {
    border-color: transparent transparent $c-malabars $c-malabars;
    z-index: 1;
    border-shadow: 4px 2px 1px $c-shadow-main;
    box-shadow: 4px 2x 1px $c-shadow-main;
  }
  @media screen and (max-width: 768px) {
    margin: 0 0 0 1.5rem;
  }
  @media screen and (max-width: 550px) {
    margin: 0 0 0 2.5rem;
  }
}

// Specifics
.desktop-menu {
  display: flex;
  position: relative;
  .sidebar {
    justify-content: space-between;
    align-content: center;
    position: fixed;
    max-width: 75px;
    width: 100%;
    height: 100vh;
    text-align: center;
    z-index: 10;
    background-color: $c-secondary;
    box-shadow: 0 2px 5px $c-shadow-secondary;
    @media screen and (max-width: 768px) {
      max-width: 100vw;
      width: 100%;
      max-height: 75px;
      height: 100%;
      flex-flow: row nowrap;
      align-items: center;
    }
  }
  .sidebar__nav-list {
    .nav-list__item {
      margin-bottom: 2rem;
      opacity: 0.5;
      cursor: pointer;
      transition: all 0.3s ease;
      @media screen and (max-width: 768px) {
        height: 100%;
        margin: 0;
      }
      a {
        justify-content: center;
        align-items: center;
        position: relative;
        transition: transform 0.15s ease;
        @media screen and (max-width: 768px) {
          height: 100%;
        }
        svg {
          @media screen and (max-width: 768px) {
            align-self: flex-end;
            margin-top: 0.5rem;
          }
        }
        span {
          display: block;
          padding-top: 0.25rem;
          flex-basis: 100%;
          transform: translateX(-200px);
          transition: all 0.15s ease;
          @media screen and (max-width: 768px) {
            transform: translateY(-200px);
            align-self: flex-end;
            padding-bottom: 0.5rem;
          }
        }
      }
      &:last-child {
        margin-bottom: 0;
        @media screen and (max-width: 768px) {
          margin-right: 0;
        }
      }
      &.active, &:hover {
        opacity: 1;
        span {
          transform: translateX(0);
          color: $c-malabars;
          font-weight: bold;
        }
        svg {
          transform: scale(1.1);
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: dash 12s ease alternate;
        }
      }
    }
    @media screen and (max-width: 768px) {
      flex-flow: row nowrap;
      align-items: center;
      max-width: 45%;
      height: 100%;
      width: 100%;
    }
    @media screen and (max-width: 550px) {
      display: none;
    }
  }

  @media screen and (max-width: 550px) {
    display: none;
  }

  .sidebar__extra-content {
    display: flex;
    flex-flow: column nowrap;
    span {
      display: block;
      width: 100%;
      text-align: center;
      color: $c-malabars;
      font-weight: bold;
      transition: all 0.15s ease;
      transform: translateX(-200px);
      @media screen and (max-width: 768px) {
        align-self: flex-end;
        padding-bottom: 0.5rem;
        transform: translateY(-200px);
      }
    }
    .extra-content__language {
      position: relative;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: all 0.15s ease;
      svg {
        @media screen and (max-width: 768px) {
          align-self: flex-end;
          margin-top: 0.5rem;
        }
      }
      .extra-content__language-selector {
        position: absolute;
        top: 0;
        right: -200px;
        left: 75px;
        width: 130px;
        padding-left: 1.5rem;
        visibility: hidden;
        z-index: 1;
        transition: visibility 0ms ease-out 600ms;
        .language-selector__item {
          margin-bottom: 0;
          padding: 0.5rem 0;
          border-bottom: 1px solid $c-main;
          background-color: $c-secondary;
          opacity: 0;
          transform: translateX(-200px);
          a {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
          }
          span {
            width: 25px;
            height: 6px; // Set to center vertically the span (because scale modifies it)
            align-self: center;
            color: $c-main;
            transform: scale(1);
          }
          svg {
            @media screen and (max-width: 768px) {
              margin: 0;
            }
          }
          &:nth-of-type(1) {
            border-top: 1px solid $c-main;
          }
          @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
              transition: transform 0.15s ease #{-($i - 3 - 1)*0.1}s, opacity 100ms ease-out #{-($i - 3 - 1)*0.1}s;
            }
          }
          &.is-selected {
            background-color: $c-third;
            font-weight: bold;
            a span {
              color: $c-malabars;
            }
          }
          &:hover {
            background-color: $c-third;
          }
          @media screen and (max-width: 768px) {
            transform: translateX(200px);
          }
        }
        @media screen and (max-width: 768px) {
          left: -17px;
          top: 83px
        }
      }
      svg:nth-of-type(2) {
        position: absolute;
        top: 50%;
        right: 2rem;
        width: 1.1rem;
        opacity: 0;
        transform: translateY(-85%);
        transition: all 0.15s ease;
        @media screen and (max-width: 768px) {
          transform: translateY(-130%) rotate(90deg);
        }
      }
      &:hover {
        transform: translateX(-1rem);
        span {
          transform: translateX(1rem);
        }
        svg:nth-of-type(2) {
          opacity: 1;
          right: -0.5rem;
        }
      }
      &.is-open {
        transform: translateX(-1rem);
        .extra-content__language-selector {
          visibility: visible;
          transition: visibility 0ms ease-out 0ms;
          @for $i from 1 through 3 {
            li:nth-of-type(#{$i}) {
              opacity: 1;
              transform: none;
              transition: transform 0.15s ease #{$i*0.1}s, opacity 0.1s ease-out #{$i*0.1}s;
            }
          }
        }
        span {
          transform: scale(0.95) translateX(1rem);
        }
        svg {
          transform: scale(0.95);
          &:nth-of-type(2) {
            right: -0.5rem;
            opacity: 1;
            transform: translateY(-85%) scale(0.90) rotate(180deg);
            @media screen and (max-width: 768px) {
              transform: translateY(-130%) scale(0.90) rotate(-90deg);
            }
          }
        }
      }
      @media screen and (max-width: 768px) {
        margin-bottom: 0;
      }
    }
    .extra-content__share {
      justify-content: center;
      margin-bottom: 0.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      svg {
        @media screen and (max-width: 768px) {
          align-self: flex-end;
          margin-top: 0.5rem;
        }
      }
      span {
        @media screen and (max-width: 768px) {
          align-self: flex-end;
          padding-bottom: 0.5rem;
        }
      }
      &:hover span {
        transform: translateX(0);
      }
      @media screen and (max-width: 768px) {
        margin-bottom: 0;
      }
    }
    @media screen and (max-width: 768px) {
      flex-flow: row nowrap;
      height: 100%;
    }
    @media screen and (max-width: 550px) {
      display: none;
    }
  }
}

.mobile-menu {
  display: none;
  position: relative;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px $c-shadow-secondary;
  background-color: $c-secondary;
  transition: all 0.3s ease;
  .navbar__mobile-menu {
    display: none;
    position: relative;
    height: 100%;
    .menu {
      position: relative;
      width: 50px;
      height: 40px;
      margin: 1.55rem 1.55rem 0 1.55rem;
      text-align: left;
      cursor: pointer;
      transition: all 0.5s ease;
      span {
        background: $c-main;
        position: absolute;
        display: inline-block;
        height: 3px;
        width: 50px;
        border-radius: 2px;
        transition: all 0.5s ease;
        &:nth-of-type(1) {
          transition: width 0.15s 0.15s, top 0.15s, right 0.15s, transform 0.15s;
        }
        &:nth-of-type(2) {
          top: 10px;
          transition: transform 0.15s;
        }
        &:nth-of-type(3) {
          top: 20px;
          right: 0;
          transition: width 0.15s 0.15s, top 0.15s, right 0.15s, transform 0.15s;
        }
      }
    }
    @media screen and (max-width: 550px) {
      display: block;
    }
  }
  .navbar__mobile-menu__nav {
    position: absolute;
    display: block;
    left: 100%;
    top: 64px;
    width: 100%;
    min-height: calc(100vh - 65px);
    height: calc(100vh - 65px);
    width: 100vw;
    background: $c-secondary;
    overflow-x: hidden;
    transition: all 0.3s ease #{0.10*5}s;
    .navbar__mobile-menu__list {
      margin-top: 1rem;
      font-size: 1.5rem;
      justify-content: center;
      .navbar__mobile-menu__item {
        padding: 1rem 0;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 75%;
        margin: 0 auto;
        border-bottom: 1px solid $c-main;
        transform: translateX(550px);
        @for $i from 1 through 6 {
          &:nth-child(#{$i}) {
            transition: transform 0.15s ease #{-($i - 3 - 1)*0.1}s;
          }
        }
        &.active {
          color: $c-malabars;
          border-bottom-color: $c-malabars;
        }
        &:active a {
          transition: all 0.3s ease;
          transform: scale(0.95);
        }
      }
    }
  }
  &.is-open {
    box-shadow: unset;
    .menu {
      span {
        &:nth-of-type(1) {
          top: 2%;
          left: 7%;
          width: 50%;
          transform: rotate(45deg);
          transition: width 0.15s, top 0.15s 0.15s, left 0.15s 0.15s, transform 0.15s 0.15s;
        }
        &:nth-of-type(2) {
          transform: rotate(-45deg);
          transition: transform 0.15s 0.15s;
        }
        &:nth-of-type(3) {
          width: 50%;
          right: 7%;
          top: 47%;
          transform: rotate(45deg);
          transition: width 0.15s, top 0.15s 0.15s, right 0.15s 0.15s, transform 0.15s 0.15s;
        }
      }
    }
    .navbar__mobile-menu__nav {
      left: 0;
      z-index: -10;
      transition: all 0.3s ease;
      .navbar__mobile-menu__item {
        transform: translateX(0);
        @for $i from 1 through 6 {
          &:nth-child(#{$i}) {
            transition: transform 0.15s ease #{$i*0.1}s;
          }
        }
      }
      .language {
        position: relative;
        margin-top: 2rem;
        a {
          width: 100%;
          justify-content: center;
        }
        .arrow-icon {
          position: absolute;
          transform: rotate(90deg);
          right: 1rem;
        }
        .language__list {
          visibility: hidden;
          justify-content: space-between;
          max-width: 75%;
          width: 100%;
          align-items: center;
          height: 0;
          opacity: 0;
          font-size: 1rem;
          transition: all 0.3s ease;
          .language__item {
            a {
              align-items: center;
            }
            &.is-selected span{
              color: $c-malabars;
            }
          }
        }
        &.is-open {
          .arrow-icon {
            transform: rotate(-90deg);
          }
          .language__list {
            display: flex;
            height: 30px; 
            visibility: visible;
            opacity: 1;
            padding-top: 1rem;
          }
        } 
      }
    }
  }
  @media screen and (max-width: 550px) {
    display: flex;
  }
}

// SVG stroke animation
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

// Logo spin animation
@keyframes spin {
  from {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}

Javascript

$(document).ready(function () {
    // Variables
    let languageDesktopButton = $(".extra-content__language"),
        document = $(document),
        hamburguerMenu = $(".menu"),
        languageMobileButton = $(".language");
        
    languageDesktopButton.on("click", function (e) {
        $(this).toggleClass("is-open");
    });
    hamburguerMenu.on("click", function (e) {
        $(this).parent().parent().toggleClass("is-open");
    });
  
    languageMobileButton.on("click", function (e) {
      $(this).toggleClass("is-open");
    });
});

Author

Ferran Buireu

Demo

See the Pen Vertical/Horizontal responsive sidebar/navbar by Ferran Buireu (@fbuireu) on CodePen.