<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

Project Manager

Status

Budget

Start Date

End Date

Team Members

Client Email

Project Description

Priority Level

Attachments

Featured

이름

Date

Publication

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

MIXLAB

갤러리 보기

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