[SAM2.0]Components

default

HTML 구조

<aside class="app-sidebar">
  <div class="sidebar">
    <div class="sidebar__header">
      <div class="app-brand">
        <span class="app-brand__logo" title="SOOP"></span>
        <span class="app-brand__text">Ads Center</span>
      </div>
      <button type="button" class="sidebar__fold-button js-sidebar-toggle" aria-expanded="true" aria-label="사이드바 접기">
        <span class="visually-hidden">사이드바 접기</span>
      </button>
    </div>

    <nav class="sidebar__nav" aria-label="메인 메뉴">
      <ul class="nav">
        <!-- 단일메뉴 -->
        <li class="nav__item nav__item--single nav__item--dashboard">
          <a href="#" class="nav__link">
            <span class="nav__icon"></span>
            <span class="nav__text">대시보드</span>
          </a>
        </li>

        <!-- 서브메뉴가 있는 메뉴 -->
        <li class="nav__item nav__item--campaign is-open">
          <button type="button" class="nav__link" aria-expanded="true" aria-controls="submenu-campaign">
            <span class="nav__icon"></span>
            <span class="nav__text">캠페인</span>
          </button>
          <ul class="nav__submenu" id="submenu-campaign">
            <li class="nav__subitem"><a href="#" class="nav__sublink">캠페인 관리</a></li>
            <li class="nav__subitem"><a href="#" class="nav__sublink">타겟 관리</a></li>
          </ul>
        </li>
        <!-- ... 기타 메뉴 항목들 ... -->
      </ul>
    </nav>
  </div>
</aside>

현재 페이지 표시

HTML 구조

<aside class="app-sidebar">
  <div class="sidebar">
    <div class="sidebar__header">
      <div class="app-brand">
        <span class="app-brand__logo" title="SOOP"></span>
        <span class="app-brand__text">Ads Center</span>
      </div>
      <button type="button" class="sidebar__fold-button js-sidebar-toggle" aria-expanded="true" aria-label="사이드바 접기">
        <span class="visually-hidden">사이드바 접기</span>
      </button>
    </div>

    <nav class="sidebar__nav" aria-label="메인 메뉴">
      <ul class="nav">
        <!-- 단일메뉴 -->
        <li class="nav__item nav__item--single nav__item--dashboard">
          <a href="#" class="nav__link">
            <span class="nav__icon"></span>
            <span class="nav__text">대시보드</span>
          </a>
        </li>

        <!-- 서브메뉴가 있는 메뉴 (현재 페이지: .is-current, aria-current="page") -->
        <li class="nav__item nav__item--campaign is-open is-current">
          <button type="button" class="nav__link" aria-expanded="true" aria-controls="submenu-campaign">
            <span class="nav__icon"></span>
            <span class="nav__text">캠페인</span>
          </button>
          <ul class="nav__submenu" id="submenu-campaign">
            <li class="nav__subitem"><a href="#" class="nav__sublink" aria-current="page">캠페인 관리</a></li>
            <li class="nav__subitem"><a href="#" class="nav__sublink">타겟 관리</a></li>
          </ul>
        </li>
        <!-- ... 기타 메뉴 항목들 ... -->
      </ul>
    </nav>
  </div>
</aside>

Components - sidebar