<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);
  }
  
  // ===== PEOPLE 하위메뉴: 데스크톱(hover) / 모바일(click) =====
const MS_URL = "/people/ms"; // M.S. Students 페이지 경로로 바꿔도 됨

function patchMenus(){
  /* --- 상단 네비(데스크톱) 드롭다운 --- */
  const $peopleTop = $('.main-nav > a[href="/people"]');
  if ($peopleTop.length && !$peopleTop.parent().hasClass('has-sub')){
    $peopleTop.wrap('<div class="has-sub"></div>').addClass('top-link');
    const $sub = $(`
      <div class="sub" role="menu" aria-label="People submenu">
        <a role="menuitem" href="/people">Lab Members</a>
        <a role="menuitem" href="/ms-student-current">Master’s Research</a>
      </div>
    `);
    $peopleTop.after($sub);
  }

  /* --- 사이드 메뉴(드로어) 서브메뉴 --- */
  const $c = $('.side-nav-content');
  const $orig = $c.find('> a[href="/people"]').first();
  if ($orig.length && !$c.find('.side-has-sub').length){
    const $wrap = $(`
      <div class="side-has-sub">
        <button class="side-toggle" aria-expanded="false">PEOPLE</button>
        <div class="side-sub">
          <a href="/people">Lab Members</a>
          <a href="/ms-student-current">Master’s Research</a>
        </div>
      </div>
    `);
    $orig.replaceWith($wrap);

    const supportsHover = window.matchMedia('(hover: hover) and (pointer: fine)').matches;

    if (supportsHover){
      // 데스크톱 포인터: 호버로 열기
      $wrap.addClass('hover-mode');
    } else {
      // 터치: 클릭 토글
      const $btn = $wrap.find('.side-toggle');
      const $sub = $wrap.find('.side-sub').hide();
      $c.off('click.sideToggle').on('click.sideToggle', '.side-toggle', function(){
        const open = $btn.attr('aria-expanded') === 'true';
        $btn.attr('aria-expanded', String(!open));
        open ? $sub.slideUp(160) : $sub.slideDown(160);
      });
    }
  }
}

patchMenus();
// 드로어 열고 닫을 때도 재적용 (중복 생성 방지 if-check 포함)
$('.nav-hamburger, .side-nav-close').on('click', patchMenus);

  
});
  


</script>

www.mixlab.media

Date

이름

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

생성형 AI 활용 페르소나 제작 도구