오프라인 스타일 테스트

src/js/08-chat.js

@@ -59,6 +59,22 @@
     </path>
   `
 
+  // 네트워크 상태 확인 및 버튼 제어
+  function toggleChatButton() {
+    if (!navigator.onLine) {
+      chatButton.style.display = 'none' // 오프라인 상태면 chatButton 숨김
+    } else {
+      chatButton.style.display = 'flex' // 온라인 상태면 chatButton 보이게 함
+    }
+  }
+
+  // 초기 상태 설정
+  toggleChatButton()
+
+  // 네트워크 상태 변경 이벤트 리스너
+  window.addEventListener('online', toggleChatButton)
+  window.addEventListener('offline', toggleChatButton)
+
   chatButton.addEventListener('click', () => {
     chat.classList.toggle('show')
 

src/partials/toc.hbs

 <aside class="toc sidebar" data-title="{{{or page.attributes.toctitle 'Contents'}}}" data-levels="{{{or page.attributes.toclevels 2}}}">
   <div class="toc-menu"></div>
-  {{#if env.SITE_SEARCH_PROVIDER}}
   <div class="chat-btn">
     <svg id="chat-icon" data-slot="icon" fill="#fff" stroke-width="1.5" stroke="#0072ce" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32">
       <path stroke-linecap="round" stroke-linejoin="round" d="M7.188 10a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.438 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.437 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.312M17.5 10c0 3.797-3.353 6.875-7.5 6.875a8.735 8.735 0 0 1-2.292-.303 5.368 5.368 0 0 1-3.639 1.576 5.364 5.364 0 0 1-.428-.059 4.025 4.025 0 0 0 .88-1.818c.081-.409-.12-.806-.422-1.098C3.273 13.484 2.5 11.825 2.5 10c0-3.797 3.353-6.875 7.5-6.875s7.5 3.078 7.5 6.875Z"></path>
     </svg>
   </div>
-  {{/if}}
   <div class="chat">
     <div class="chat-head">
       <i class="chat-logo"></i>