test mobile ui -- nav

src/css/header.css

@@ -65,7 +65,9 @@ body {
 .navbar-brand {
   display: flex;
   flex: auto;
-  padding-left: 1rem;
+  padding: 0 2rem;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .navbar-brand .navbar-item {
@@ -142,50 +144,23 @@ body {
   background: url(../img/ico-search-active.svg) no-repeat center;
 }
 
-.navbar-burger {
+.nav-mobile-menu-toggle {
   background: none;
   border: none;
   outline: none;
-  line-height: 1;
   position: relative;
-  width: 3rem;
-  padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-left: auto;
-  min-width: 0;
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+  font-size: 30px;
 }
 
-.navbar-burger span {
-  background-color: var(--navbar-font-color);
-  height: 1.5px;
-  width: 1rem;
-}
-
-.navbar-burger:not(.is-active) span {
-  transition: transform ease-out 0.25s, opacity 0s 0.25s, margin-top ease-out 0.25s 0.25s;
-}
-
-.navbar-burger span + span {
-  margin-top: 0.25rem;
-}
-
-.navbar-burger.is-active span + span {
-  margin-top: -1.5px;
-}
-
-.navbar-burger.is-active span:nth-child(1) {
-  transform: rotate(45deg);
-}
-
-.navbar-burger.is-active span:nth-child(2) {
-  opacity: 0;
-}
-
-.navbar-burger.is-active span:nth-child(3) {
-  transform: rotate(-45deg);
+.nav-mobile-menu-toggle:active {
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .navbar-item,
@@ -267,11 +242,77 @@ body {
   background-color: rgba(0, 114, 206, 0.8);
 }
 
+.navbar-mobile-menu {
+  display: none;
+  list-style: none;
+  position: fixed;
+  width: 100%;
+  top: 75px;
+  left: 0px;
+  right: 0px;
+  background-color: rgb(255, 255, 255);
+  z-index: 100;
+  flex-direction: column;
+  padding: 1rem 1.5rem;
+  color: rgb(0, 114, 206);
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 6px 9px 0px;
+  border-top: 1px solid rgb(0, 114, 206);
+  margin: 0;
+}
+
+.navbar-mobile-menu.show {
+  display: flex;
+}
+
+.mobile-menu-item {
+  cursor: pointer;
+  font-size: 18px;
+  padding: 1rem;
+  font-weight: 600;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+#document-icon {
+  margin-left: 10px;
+}
+
+.mobile-menu-item:active {
+  background-color: #F4F8FC;
+}
+
+.mobile-menu-item svg {
+  font-size: 16px;
+}
+
+.mobile-product-link {
+  display: none;
+  list-style: none;
+  flex-direction: column;
+  padding-left: 0;
+}
+
+.mobile-product-link.show {
+  display: flex;
+}
+
+.product-link {
+  cursor: pointer;
+  font-size: 16px;
+  padding: 10px 2rem;
+}
+
 @media screen and (max-width: 768.5px) {
   .navbar-brand .navbar-item.search {
     padding-left: 0;
     padding-right: 0;
   }
+  .mobile-menu-item > a {
+    width: 100%;
+    justify-content: center;
+  }
 }
 
 @media screen and (min-width: 769px) {
@@ -291,21 +332,12 @@ body {
   }
 
   .navbar-menu {
-    background: var(--navbar-menu-background);
-    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-    max-height: var(--body-min-height);
-    overflow-y: auto;
-    overscroll-behavior: none;
-    padding: 0.5rem 0;
-  }
-
-  .navbar-menu:not(.is-active) {
     display: none;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .navbar-burger {
+  .nav-mobile-menu-toggle {
     display: none;
   }
 

src/js/05-mobile-navbar.js

+/* eslint-disable max-len */
 ;(function () {
   'use strict'
 
-  var navbarBurger = document.querySelector('.navbar-burger')
-  if (!navbarBurger) return
-  navbarBurger.addEventListener('click', toggleNavbarMenu.bind(navbarBurger))
-
-  function toggleNavbarMenu (e) {
-    e.stopPropagation() // trap event
-    document.documentElement.classList.toggle('is-clipped--navbar')
-    navbarBurger.setAttribute('aria-expanded', this.classList.toggle('is-active'))
-    var menu = document.getElementById(this.getAttribute('aria-controls') || this.dataset.target)
-    if (menu.classList.toggle('is-active')) {
-      menu.style.maxHeight = ''
-      var expectedMaxHeight = window.innerHeight - Math.round(menu.getBoundingClientRect().top)
-      var actualMaxHeight = parseInt(window.getComputedStyle(menu).maxHeight, 10)
-      if (actualMaxHeight !== expectedMaxHeight) menu.style.maxHeight = expectedMaxHeight + 'px'
+  let isMenuOpen = false
+  let isDocumentOpen = false
+
+  const MobileMenuToggle = document.querySelector('.nav-mobile-menu-toggle')
+  const documentToggle = document.getElementById('document-toggle')
+  const documentIcon = document.getElementById('document-icon')
+  const menuIconDefault = `
+    <svg stroke="currentColor" fill="#0072ce" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+      <path fill="none" d="M0 0h24v24H0z"></path>
+      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+    </svg>
+  `
+  const menuIconClose = `
+    <svg stroke="currentColor" fill="#0072ce" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+      <path fill="none" d="M0 0h24v24H0V0z"></path>
+      <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
+    </svg>
+  `
+
+  // 메뉴 토글 기능
+  MobileMenuToggle.addEventListener('click', function () {
+    isMenuOpen = !isMenuOpen
+    const menuList = document.querySelector('.navbar-mobile-menu')
+
+    menuList.classList.toggle('show')
+
+    if (isMenuOpen) {
+      MobileMenuToggle.innerHTML = menuIconClose
+    } else {
+      MobileMenuToggle.innerHTML = menuIconDefault
+    }
+  })
+
+  // Document 토글 기능
+  documentToggle.addEventListener('click', function () {
+    isDocumentOpen = !isDocumentOpen
+    const documentList = document.querySelector('.mobile-product-link')
+
+    documentList.classList.toggle('show')
+
+    const pathElement = documentIcon.querySelector('path')
+
+    if (isDocumentOpen) {
+      pathElement.setAttribute('d', 'M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z');
+    } else {
+      pathElement.setAttribute('d', 'M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z');
     }
-  }
+  })
 })()

src/js/10-check-offline.js

@@ -10,9 +10,6 @@
     if (window.location.protocol === 'file:') {
       chatButton.style.display = 'none' // 오프라인 상태면 chatButton 숨김
       menu.style.display = 'none'
-    } else {
-      chatButton.style.display = 'flex' // 온라인 상태면 chatButton 보이게 함
-      menu.style.display = 'flex'
     }
   }
 

src/partials/header-content.hbs

@@ -17,10 +17,11 @@
         </div>
       </div>
       {{/if}}
-      <button class="navbar-burger" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">
-        <span></span>
-        <span></span>
-        <span></span>
+      <button class="nav-mobile-menu-toggle" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">
+        <svg stroke="currentColor" fill="#0072ce" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+          <path fill="none" d="M0 0h24v24H0z"></path>
+          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+        </svg>
       </button>
     </div>
     <div id="topbar-nav" class="navbar-menu">
@@ -47,5 +48,27 @@
         </div>
       </div>
     </div>
+    <ul class="navbar-mobile-menu">
+      <li id="document-toggle" class="mobile-menu-item">Products
+        <svg id="document-icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="ml_10" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+          <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
+        </svg>
+      </li>
+      <ul class="mobile-product-link">
+        <li class="product-link" onclick="window.location.href='https://swlab.bwg.co.kr/web/docs/bxm/swlab-docs-bxm/current/concepts/overview.html'">BXM</li>
+        <li class="product-link secret-nav" onclick="window.location.href='https://swlab.bwg.co.kr/web/docs/bxm/swlab-docs-bxm-s/current/concepts/overview.html'">BXM Internal</li>
+        <li class="product-link" onclick="window.location.href='https://swlab.bwg.co.kr/web/docs/bxcm/swlab-docs-bxcm/current/concepts/overview.html'">BXCM</li>
+        <li class="product-link secret-nav" onclick="window.location.href='https://swlab.bwg.co.kr/web/docs/bxcm/swlab-docs-bxcm-s/current/concepts/overview.html'">BXCM Internal</li>
+        <li class="product-link" onclick="window.location.href='https://swlab.bwg.co.kr/web/docs/bxcp/swlab-docs-bxcp/current/concepts/overview.html'">BXCP</li>
+        <li class="product-link" onclick="window.location.href='https://swlab.bwg.co.kr/web/docs/bxi/swlab-docs-bxi/current/concepts/overview.html'">BXI</li>
+        <li class="product-link secret-nav" onclick="window.location.href='https://swlab.bwg.co.kr/web/docs/swlab-docs/current/ready-to-write/text-editor.html'">Manual Guide</li>
+      </ul>
+      <li class="mobile-menu-item">
+        <a id="download" class="button download" href="#">
+          <i class="download_icon"></i>
+          Download
+        </a>
+      </li>
+    </ul>
   </nav>
 </header>