<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="/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

발행일

발행여부

이름

React 프로젝트 생성

기본 프로젝트 생성 방법