<div class="main-nav">
  <a href="/"><img class="logo" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=attachment%3A93e8131a-58b6-46db-8b65-b512abc3c88f%3ALogo.png&blockId=206a1040-1408-809e-a532-f3c916b45397" /></a>
	<a href="/aboutus">ABOUT US</a>
  <a href="/people">PEOPLE</a>
  <a href="/project">PROJECTS</a>
  <a href="/publication_journal">PUBLICATIONS</a>
  <a href="/qna">CONTACT</a>
  <button class="nav-hamburger" aria-label="메뉴 열기">
    <span></span>
    <span></span>
    <span></span>
  </button>
</div>

<aside class="side-nav">
  <div class="side-nav-content">
    <button class="side-nav-close" aria-label="메뉴 닫기">&times;</button>
    <a href="/"><img class="logo" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=attachment%3A93e8131a-58b6-46db-8b65-b512abc3c88f%3ALogo.png&blockId=206a1040-1408-809e-a532-f3c916b45397" /></a>
    <a href="/aboutus">ABOUT US</a>
    <a href="/people">PEOPLE</a>
    <a href="/project">PROJECTS</a>
    <a href="/publication_journal">PUBLICATIONS</a>
    <a href="/qna">CONTACT</a>
  </div>
</aside>

<script>
$(function(){
  $('.notion-topbar > div').prepend($('.main-nav'));

  function openSideNav() {
    $('.side-nav').addClass('active');
    $('.nav-hamburger').addClass('hidden');
  }

  function closeSideNav() {
    $('.side-nav').removeClass('active');
    $('.nav-hamburger').removeClass('hidden');
  }

  $('.nav-hamburger').on('click', openSideNav);
  $('.side-nav-close').on('click', closeSideNav);
  $(document).on('keydown', function(e){
    if (e.key === "Escape") closeSideNav();
  });
  $('.side-nav').on('click', function(e){
    if(e.target === this) closeSideNav();
  });
  $(window).on('resize', function() {
    if ($(window).width() > 719) closeSideNav();
  });

  // Footer 생성
  if ($('.mix-footer').length === 0) {
    var footer = $('<div class="mix-footer"></div>');
    var logo = $('<img class="footer-logo" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=attachment%3A93e8131a-58b6-46db-8b65-b512abc3c88f%3ALogo.png&blockId=206a1040-1408-809e-a532-f3c916b45397" alt="MIXLAB Logo">');
    var intro = $('<p class="footer-intro">우리는 디자인(Design)과 구현(Making)을 통해 인터랙티브 미디어에 의한 사용자 경험을 연구합니다.</p>');
    var copyright = $('<p class="footer-copy">237, Sangidaehak-ro, Siheung-si, Gyeonggi-do, 15073, Republic of Korea<br>Copyright© 2025 MIXLAB. ALL RIGHTS RESERVED</p>');
    footer.append(logo).append(intro).append(copyright);
    $('.oopy-footer').prepend(footer);
  }
});
</script>

www.mixlab.media

컨텐츠

날짜

한국공학대학교 디자인공학부 인터랙티브미디어 연구실 MIXLAB 입니다.