<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

생년월일

전화번호

이메일

성별

학년

수업 선택

프로필 사진

학생 상태

장학금 수혜 여부

주소

Email

전공

날짜

학위

이름

취업처

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

MIXLAB

갤러리 보기

한지민