<div id="oopy-sidenav" class="bg-gray-100 overflow-auto rounded-l-lg fixed">
	<div id="oopy-sidenav-content" class="flex">
			<div class="flex flex-col">
            <div class="px-2 bold"> = </div>
      </div>
			
		
		  <div id="oopy-sidenav-root"></div>
	</div>

</div>
<script>
function getHeadersData ( items ){
	const headersClassNames = [
		"notion-header-block",
		"notion-sub_header-block",
		"notion-sub_sub_header-block"
	];
	const headersLevel = {
		"notion-header-block":1,
		"notion-sub_header-block":2,
		"notion-sub_sub_header-block":3
	};
	const headers = [];
	items.forEach(function(item){
		item.className.split(" ").forEach(function(name){
			if (headersClassNames.includes(name)) {
				const data = {
	        "level":headersLevel[name],
	        "text":item.innerText,
	        "block_id": item.attributes["data-block-id"].value
	      }
				headers.push(data);
			}
		})
	}); 
	return headers
}

function getContents(){
	const app = document.getElementsByClassName("notion-page-content");
	const contents = app[0].childNodes
	return contents
}

function createHeader (data) {
	const el = document.createElement("a");
	const defaultClass = "oopy-side-link "
	const textNode = document.createTextNode(data.text);
	el.className = defaultClass + "pl-" + data.level*2;
	el.href = "#" + data.block_id;
	el.appendChild(textNode)
	return el
}

function createSideRootEL () {
	const sideNavEL = document.createElement("div");
	const sideRootClass = "overflow-auto py-3"; // root 클래스 확장시 활용
	sideNavEL.className = sideRootClass;
	sideNavEL.id = "oopy-sidenav-root";
	return sideNavEL
}

function createSideNavEL (headers){
	const root = createSideRootEL();
	headers.forEach(function(data){
		const el = createHeader(data);
		root.appendChild(el);
	}); 
	return root	
}

function replaceSideNav(el){
	const parent = document.getElementById("oopy-sidenav-content");
	const target = document.getElementById("oopy-sidenav-root");
	parent.replaceChild(el,target);
}

function hideSideNav (){
	document.getElementById("oopy-sidenav").className = "hidden"
}



function ready() {
  console.log('DOM이 준비되었습니다!');
	const contents = getContents();
  // console.log(contents);
	const headers = getHeadersData(contents);
  // console.log(headers);

	if (headers.length > 0){
		const	side = createSideNavEL(headers);
		replaceSideNav(side);
	} else {
		hideSideNav();
	}
	
}

if (__OOPY__.yaml && __OOPY__.yaml["side-toc"] == false) {
	hideSideNav();
} else {
	ready();
}
</script>

oopy 커스텀 html에 vue 적용해보기