<nav id="notion-nav-menu">
  <a href="javascript:;" class="btn-side-toggle">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveaspectRatio="xMidYMid meet" viewbox="0 0 1024 1024"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z" fill="currentColor"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42z"/></svg>
  </a>
</nav>

<nav>
	<div class="side-navigator">
			<div class="side-conainer">
					<a class="side-navigator-tab" href="/">
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 12 12" class="iconify" data-icon="fluent:home-12-filled">
									<g fill="none">
											<path d="M6.307 1.105a.5.5 0 0 0-.614 0l-4.114 3.2A1.5 1.5 0 0 0 1 5.49V10a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7h2v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5.49a1.5 1.5 0 0 0-.58-1.185l-4.113-3.2z" fill="currentColor"></path>
									</g>
							</svg>
							<div class="text-name">Home</div>
					</a>
	
					<a class="side-navigator-tab" href="/react">
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 15 15" class="iconify" data-icon="teenyicons:react-outline">
									<g fill="none">
											<path d="M14.5 7.584c0 1.657-3.134 3-7 3s-7-1.343-7-3s3.134-3 7-3s7 1.343 7 3z"
													stroke="currentColor"></path>
											<path d="M4.166 13.739c1.457.79 4.13-1.327 5.972-4.726c1.841-3.4 2.153-6.795.696-7.584c-1.457-.79-4.13 1.327-5.972 4.726c-1.841 3.4-2.153 6.795-.696 7.584z" stroke="currentColor"></path>
											<path d="M10.834 13.739c-1.457.79-4.13-1.327-5.972-4.726c-1.841-3.4-2.153-6.795-.696-7.584c1.457-.79 4.13 1.327 5.972 4.726c1.841 3.4 2.153 6.795.696 7.584z" stroke="currentColor"></path>
											<path d="M6.5 7.584a1 1 0 1 0 2 0a1 1 0 0 0-2 0z" stroke="currentColor"></path>
									</g>
							</svg>
							<div class="text-name">React</div>
					</a>
	
					<a class="side-navigator-tab" href="/nodejs">
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="0.88em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 24" class="iconify" data-icon="fontisto:nodejs">
									<path d="M10.639 24h-.003c-.339 0-.656-.091-.928-.251l.009.005l-2.937-1.737c-.438-.246-.224-.332-.08-.383a5.817 5.817 0 0 0 1.352-.618l-.024.014a.225.225 0 0 1 .219.018l-.001-.001l2.256 1.339a.288.288 0 0 0 .274-.001l-.002.001l8.794-5.077a.28.28 0 0 0 .134-.238V6.922a.282.282 0 0 0-.136-.239l-.001-.001l-8.791-5.072a.277.277 0 0 0-.272.001l.001-.001l-8.789 5.073a.281.281 0 0 0-.139.24v10.149c0 .101.055.188.137.234l.001.001l2.41 1.392c1.307.654 2.107-.116 2.107-.889V7.788c0-.14.114-.254.254-.254H7.603c.14 0 .254.113.254.254V17.81c0 1.745-.95 2.746-2.604 2.746l-.066.001a3.745 3.745 0 0 1-1.976-.56l-2.29-1.318a1.858 1.858 0 0 1-.922-1.605V6.923C0 6.243.367 5.65.913 5.328l.009-.005L9.717.241a1.923 1.923 0 0 1 1.858.005l-.01-.005l8.794 5.082c.555.327.921.92.923 1.6v10.15a1.86 1.86 0 0 1-.915 1.6l-.009.005l-8.792 5.078a1.823 1.823 0 0 1-.922.246h-.007z" fill="currentColor"></path>
									<path d="M13.356 17.009c-3.848 0-4.655-1.766-4.655-3.249v-.001c0-.14.113-.253.253-.253h1.14c.127 0 .232.093.252.214v.001c.171 1.158.683 1.742 3.01 1.742c1.853 0 2.64-.419 2.64-1.402c0-.567-.223-.987-3.102-1.269c-2.406-.24-3.894-.77-3.894-2.695c0-1.774 1.496-2.833 4-2.833c2.818 0 4.212.978 4.388 3.076l.001.022a.254.254 0 0 1-.254.254h-1.133a.253.253 0 0 1-.246-.198v-.002c-.274-1.218-.94-1.607-2.746-1.607c-2.023 0-2.258.705-2.258 1.232c0 .64.278.826 3.009 1.187c2.702.358 3.986.863 3.986 2.762c-.004 1.919-1.601 3.017-4.388 3.017z" fill="currentColor"></path>
							</svg>
							<div class="text-name">Node.js</div>
					</a>
	
					<a class="side-navigator-tab" href="/development">
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" class="iconify"
									data-icon="fluent:window-dev-tools-16-filled">
									<g fill="none">
											<path d="M4.75 2A2.75 2.75 0 0 0 2 4.75v6a2.75 2.75 0 0 0 2.75 2.75h4.027c-.049-.377.021-.773.226-1.128L9.218 12H4.75c-.69 0-1.25-.56-1.25-1.25V5H12v1.194c.472-.187.99-.25 1.5-.174V4.75A2.75 2.75 0 0 0 10.75 2h-6z" fill="currentColor"></path>
											<path d="M10.271 9.686a2.9 2.9 0 0 1 .228-2.144L9.104 6.146a.5.5 0 1 0-.707.708L10.043 8.5l-1.646 1.646a.5.5 0 0 0 .707.708l1.167-1.168z" fill="currentColor"></path>
											<path d="M7.103 6.146a.5.5 0 0 1 0 .708L5.457 8.5l1.646 1.646a.5.5 0 0 1-.707.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .707 0z" fill="currentColor"></path>
											<path d="M13.423 7.021l-.9 1.56a.637.637 0 1 0 1.103.636l.9-1.559a1.91 1.91 0 0 1-1.624 3.144l-1.654 2.865a.796.796 0 1 1-1.379-.795l1.651-2.86a1.91 1.91 0 0 1 1.903-2.99z" fill="currentColor"></path>
									</g>
							</svg>
							<div class="text-name">Development</div>
					</a>
	
					<a class="side-navigator-tab" href="/server">
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" class="iconify" data-icon="bi:server">
									<g fill="currentColor">
											<path d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4c0 1.473-2.985 2.667-6.667 2.667S1.333 5.473 1.333 4V2.667z">
											</path>
											<path d="M1.333 6.334v3C1.333 10.805 4.318 12 8 12s6.667-1.194 6.667-2.667V6.334a6.51 6.51 0 0 1-1.458.79C11.81 7.684 9.967 8 8 8c-1.966 0-3.809-.317-5.208-.876a6.508 6.508 0 0 1-1.458-.79z">
											</path>
											<path d="M14.667 11.668a6.51 6.51 0 0 1-1.458.789c-1.4.56-3.242.876-5.21.876c-1.966 0-3.809-.316-5.208-.876a6.51 6.51 0 0 1-1.458-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667v-1.665z">
											</path>
									</g>
							</svg>
							<div class="text-name">Server</div>
					</a>
			</div>
	</div>
</nav>

<section class="back-script">
  <div class="bg-back"></div>
  <script type="text/javascript">
    var pathFolder = location.pathname.split("/");
    var notionNavMenu = document.querySelector("#notion-nav-menu");
    var btnSideToggle = document.querySelector(".btn-side-toggle");
    var sideNavigator = document.querySelector(".side-navigator");
    var backScript = document.querySelector(".back-script");
    var bgBack = document.querySelector(".bg-back");
    var selectedNav = document.querySelector(".side-navigator a[href='/" + pathFolder[1] + "']");

    btnSideToggle.addEventListener("click", function() {
      notionNavMenu.classList.toggle("open");
      sideNavigator.classList.toggle("open");
      backScript.classList.toggle("open");
    });
    
    bgBack.addEventListener("click", function() {
      btnSideToggle.click();
    });
    
    if(selectedNav !== undefined) {
      selectedNav.classList.add("tab-on");
    }
  </script>
</section>

www.vericras.com

생성일

카테고리