Vertical/Horizontal responsive sidebar/navbar with ARIA support

HTML

              
                <header>
	<section id="desktop-menu" class="desktop-menu">
		<nav class="sidebar flex-column-nowrap">
			<a class="sidebar__logo" href="#">
				<abbr class="logo">FB</abbr>
			</a>
			<ul class="sidebar__nav-list flex-column-nowrap" role="menubar" aria-label="Main desktop menu">
				<li class="nav-list__item about-me active fake-button flex-column-nowrap" role="menuitem">
					<a class="flex-row-wrap" href="#" tabindex="0">
						<svg height="38.095242" width="40" viewBox="0 0 44.017969 41.921879" role="img" aria-labelledby="About me"><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" role="menuitem">
					<a class="flex-row-wrap" href="#" tabindex="0">
						<svg viewBox="0 0 32.265313 27.8375" height="34.510746" width="40" role="img" aria-labelledby="Skills"><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" role="menuitem">
					<a class="flex-row-wrap" href="#" tabindex="0">
						<svg viewBox="0 0 40 25" height="25" width="40" role="img" aria-labelledby="My work"><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" role="menuitem">
					<a class="flex-row-wrap" href="#" tabindex="0">
						<svg height="27.213362" width="40" viewBox="0 0 18.832891 12.812657" role="img" aria-labelledby="Contact"><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" role="menu">
				<li class="extra-content__language" role="menuitem">
					<svg height="39.999043" width="40.000126" viewBox="0 0 1.1718787 1.1718469" role="img" aria-labelledby="Language"><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" aria-label="submenu" aria-hidden="true" aria-expanded="false" aria-haspopup="true">
						<li class="language-selector__item u-uppercase ca" role="menuitem">
							<a href="#" tabindex="-1">
								<svg viewBox="0 0 20 20.000012" height="20.000011" width="20" role="img" aria-labelledby="Catalan"><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" role="menuitem">
							<a href="#" tabindex="-1">
								<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="Spanish"><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" role="menuitem">
							<a href="#" tabindex="-1">
								<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="English"><circle id="circle2" r="10" cy="10" cx="10" style="fill:#f0f0f0;stroke-width:0.0390625" role="presentation" /><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" role="menuitem">
					<a href="#" tabindex="0">
						<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>
					</a>
				</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" aria-label="Main mobile menu" aria-hidden="true">
			<ul class="navbar__mobile-menu__list flex-column-nowrap" role="menu">
				<li class="navbar__mobile-menu__item flex-row-wrap about-me u-uppercase fake-button active" role="menuitem">
					<a href="#" tabindex="-1">About me</a>
				</li>
				<li class="navbar__mobile-menu__item flex-row-wrap skills u-uppercase fake-button" role="menuitem">
					<a href="#" tabindex="-1">Skills</a>
				</li>
				<li class="navbar__mobile-menu__item flex-row-wrap my-work u-uppercase fake-button" role="menuitem">
					<a href="#" tabindex="-1">My work</a>
				</li>
				<li class="navbar__mobile-menu__item flex-row-wrap contact u-uppercase fake-button" role="menuitem">
					<a href="#" tabindex="-1">Contact</a>
				</li>
				<li class="navbar__mobile-menu__item flex-row-wrap language u-uppercase fake-button" role="menuitem" aria-haspopup="true" aria-expanded="false">
					<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" role="submenu" aria-hidden="true" aria-expanded="false">
						<li class="language__item ca" role="menuitem">
							<a class="flex-row-nowrap" href="#" tabindex="-2">
								<svg viewBox="0 0 20 20.000012" height="20.000011" width="20" role="img" aria-labelledby="Catalan"><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" role="menuitem">
							<a class="flex-row-nowrap" href="#" tabindex="-2">
								<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="Spanish"><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" role="menuitem">
							<a class="flex-row-nowrap" href="#" tabindex="-2">
								<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="English"><circle id="circle2" r="10" cy="10" cx="10" style="fill:#f0f0f0;stroke-width:0.0390625" role="presentation" /><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" role="menuitem">
					<a href="#" tabindex="-1">Share</a>
				</li>
			</ul>
		</nav>
	</section>
</header>

CSS

              
                // Variables
$c-main: hsla(0, 100%, 100%, .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%, .26);
$bg-main: hsla(210, 3%, 15%, 1);
$media550: 550px;
$media768: 768px;

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

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

body {
  font-size: 12px; // 1rem=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 {
  width: 100%;
  max-width: 30px;
  transition: all .3s ease;
}

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

.fake-button {
  &::active {
    transform: scale(.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;
}

// Specific
.sidebar__logo,
.navbar__logo {
  position: relative;
  margin-top: .5rem;
  padding-top: .4rem;
  z-index: 10;
  .logo {
    top: 50%;
    left: 50%;
    color: $c-main;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: -4px;
    text-shadow: 0 .2rem .4rem $c-shadow-main, 0 .2rem .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;
    box-shadow: 4px 2px 1px $c-shadow-main;
  }
  @media screen and (max-width: $media768) {
    margin: 0 0 0 1.5rem;
  }
  @media screen and (max-width: $media550) {
    margin: 0 0 0 2.5rem;
  }
}

.desktop-menu {
  display: flex;
  position: relative;
  .sidebar {
    position: fixed;
    width: 100%;
    max-width: 75px;
    height: 100vh;
    justify-content: space-between;
    align-content: center;
    text-align: center;
    z-index: 10;
    background-color: $c-secondary;
    box-shadow: 0 2px 5px $c-shadow-secondary;
    @media screen and (max-width: $media768) {
      width: 100%;
      max-width: 100vw;
      height: 100%;
      max-height: 75px;
      flex-flow: row nowrap;
      align-items: center;
    }
  }
  .sidebar__nav-list {
    .nav-list__item {
      margin-bottom: 2rem;
      opacity: .5;
      cursor: pointer;
      transition: all .3s ease;
      a {
        position: relative;
        justify-content: center;
        align-items: center;
        transition: transform .15s ease;
        @media screen and (max-width: $media768) {
          height: 100%;
        }
        svg {
          @media screen and (max-width: $media768) {
            align-self: flex-end;
            margin-top: .5rem;
          }
        }
        span {
          display: block;
          flex-basis: 100%;
          padding-top: .25rem;
          transform: translateX(-200px);
          transition: all .15s ease;
          @media screen and (max-width: $media768) {
            transform: translateY(-200px);
            align-self: flex-end;
            padding-bottom: .5rem;
          }
        }
      }
      &:last-child {
        margin-bottom: 0;
        @media screen and (max-width: $media768) {
          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: $media768) {
        height: 100%;
        margin: 0;
      }
    }
    @media screen and (max-width: $media768) {
      flex-flow: row nowrap;
      align-items: center;
      width: 100%;
      max-width: 45%;
      height: 100%;
    }
    @media screen and (max-width: $media550) {
      display: none;
    }
  }
  @media screen and (max-width: $media550) {
    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 .15s ease;
      transform: translateX(-200px);
      @media screen and (max-width: $media768) {
        align-self: flex-end;
        padding-bottom: .5rem;
        transform: translateY(-200px);
      }
    }
    .extra-content__language {
      display: flex;
      position: relative;
      flex-flow: row wrap;
      justify-content: center;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: all .15s ease;
      svg {
        @media screen and (max-width: $media768) {
          align-self: flex-end;
          margin-top: .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: .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: $media768) {
              margin: 0;
            }
          }
          &:nth-of-type(1) {
            border-top: 1px solid $c-main;
          }
          @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
              transition: transform .15s ease #{-($i - 3 - 1) * .1}s, opacity 100ms ease-out #{-($i - 3 - 1) * .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: $media768) {
            transform: translateX(200px);
          }
        }
        @media screen and (max-width: $media768) {
          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 .15s ease;
        @media screen and (max-width: $media768) {
          transform: translateY(-130%) rotate(90deg);
        }
      }
      &:hover {
        transform: translateX(-1rem);
        span {
          transform: translateX(1rem);
        }
        svg:nth-of-type(2) {
          opacity: 1;
          right: -.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 .15s ease #{$i * .1}s, opacity .1s ease-out #{$i * .1}s;
            }
          }
        }
        span {
          transform: scale(.95) translateX(1rem);
        }
        svg {
          transform: scale(.95);
          &:nth-of-type(2) {
            right: -.5rem;
            opacity: 1;
            transform: translateY(-85%) scale(.90) rotate(180deg);
            @media screen and (max-width: $media768) {
              transform: translateY(-130%) scale(.90) rotate(-90deg);
            }
          }
        }
      }
      @media screen and (max-width: $media768) {
        margin-bottom: 0;
      }
    }
    .extra-content__share {
      justify-content: center;
      margin-bottom: .5rem;
      cursor: pointer;
      transition: all .3s ease;
      svg {
        @media screen and (max-width: $media768) {
          align-self: flex-end;
          margin-top: .5rem;
        }
      }
      span {
        @media screen and (max-width: $media768) {
          align-self: flex-end;
          padding-bottom: .5rem;
        }
      }
      &:hover span {
        transform: translateX(0);
      }
      @media screen and (max-width: $media768) {
        margin-bottom: 0;
      }
    }
    @media screen and (max-width: $media768) {
      flex-flow: row nowrap;
      height: 100%;
    }
    @media screen and (max-width: $media550) {
      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 .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 .5s ease;
      span {
        display: inline-block;
        position: absolute;
        height: 3px;
        width: 50px;
        background: $c-main;
        border-radius: 2px;
        transition: all .5s ease;
        &:nth-of-type(1) {
          transition: width .15s .15s, top .15s, right .15s, transform .15s;
        }
        &:nth-of-type(2) {
          top: 10px;
          transition: transform .15s;
        }
        &:nth-of-type(3) {
          top: 20px;
          right: 0;
          transition: width .15s .15s, top .15s, right .15s, transform .15s;
        }
      }
    }
    @media screen and (max-width: $media550) {
      display: block;
    }
  }
  .navbar__mobile-menu__nav {
    display: block;
    position: absolute;
    left: 100%;
    top: 64px;
    height: calc(100vh - 65px);
    min-height: calc(100vh - 65px);
    width: 100vw;
    background: $c-secondary;
    overflow-x: hidden;
    transition: all .3s ease #{.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 .3s ease;
        width: 75%;
        margin: 0 auto;
        border-bottom: 1px solid $c-main;
        transform: translateX($media550);
        @for $i from 1 through 6 {
          &:nth-child(#{$i}) {
            transition: transform .15s ease #{-($i - 3 - 1) * .1}s;
          }
        }
        &.active {
          color: $c-malabars;
          border-bottom-color: $c-malabars;
        }
        &:active a {
          transition: all .3s ease;
          transform: scale(.95);
        }
      }
    }
  }
  &.is-open {
    box-shadow: unset;
    .menu {
      span {
        &:nth-of-type(1) {
          top: 2%;
          left: 7%;
          width: 50%;
          transform: rotate(45deg);
          transition: width .15s, top .15s .15s, left .15s .15s, transform .15s .15s;
        }
        &:nth-of-type(2) {
          transform: rotate(-45deg);
          transition: transform .15s .15s;
        }
        &:nth-of-type(3) {
          width: 50%;
          right: 7%;
          top: 47%;
          transform: rotate(45deg);
          transition: width .15s, top .15s .15s, right .15s .15s, transform .15s .15s;
        }
      }
    }
    .navbar__mobile-menu__nav {
      left: 0;
      z-index: -10;
      transition: all .3s ease;
      .navbar__mobile-menu__item {
        transform: translateX(0);
        @for $i from 1 through 6 {
          &:nth-child(#{$i}) {
            transition: transform .15s ease #{$i * .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 {
          width: 100%;
          max-width: 75%;
          height: 0;
          align-items: center;
          justify-content: space-between;
          font-size: 1rem;
          visibility: hidden;
          opacity: 0;
          transition: all .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: $media550) {
    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);
  }
}

JS

              
                $(document).ready(function () {
    // DOM variables
    let languageDesktopButton = $('.extra-content__language'),
        hamburguerMenu = $('.menu'),
        languageMobileButton = $('.language'),
        languageSelector = '.extra-content__language-selector';

    languageDesktopButton.on('click', function () {
        $(this).toggleClass('is-open');

        toggleARIA($(this).find(languageSelector), 'aria-expanded');
        toggleARIA($(this).find(languageSelector), 'aria-hidden');
    });
    hamburguerMenu.on("click", function () {
        $(this).parent().parent().toggleClass('is-open');

        toggleARIA($(this).parent().parent(), 'aria-hidden');
    });

    languageMobileButton.on('click', function () {
        $(this).toggleClass('is-open');

        toggleARIA($(this), 'aria-expanded');
    });
});

// Toggle ARIA attributes
function toggleARIA(selector, ARIA) {
    selector.attr(ARIA, function (i, attr) {
        return attr == 'true' ? 'false' : 'true';
    });
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions