1/** 2 * ZeWork Shared Header Component 3 * Quản lý táºp trung Header cho toà n bá» website 4 */ 5 6document.addEventListener('DOMContentLoaded', () => { 7 renderHeader(); 8}); 9 10function renderHeader() { 11 const headerPlaceholder = document.getElementById('header-placeholder'); 12 if (!headerPlaceholder) return; 13 14 // 1. Xác Äá»nh prefix ÄÆ°á»ng dẫn (../) 15 // 1. Xác Äá»nh prefix ÄÆ°á»ng dẫn (../) 16 const subdirs = ['/zework-mobile', '/bang-gia', '/tinh-nang-zework', '/bai-viet', '/lien-he-zework', '/bao-mat', '/dieu-khoan', '/ve-zework', '/tong-dai-zalo', '/zework-sign', '/dang-bai-zalo']; 17 const isSubdir = subdirs.some(dir => window.location.pathname.includes(dir)); 18 const prefix = isSubdir ? '../' : ''; 19 20 // 2. Xác Äá»nh trang hiá»n tại Äá» active menu 21 const pathname = window.location.pathname; 22 let activeItem = ''; 23 if (pathname.includes("/zework-sign")) activeItem = 'zeworksign'; 24 else if (pathname.includes("/tong-dai-zalo")) activeItem = 'tongdai'; 25 else if (pathname.includes("/dang-bai-zalo")) activeItem = 'dangbai'; 26 else if (pathname.includes("/zework-mobile")) activeItem = 'didong'; 27 else if (pathname.includes("/bang-gia")) activeItem = 'banggia'; 28 else if (pathname.includes("/tinh-nang")) activeItem = 'tinhnang'; 29 else if (pathname.includes("/bai-viet")) activeItem = 'baiviet'; 30 else if (pathname.includes("/lien-he")) activeItem = 'lienhe'; 31 else if (pathname === "/" || pathname.endsWith("index.html")) activeItem = 'trangchu'; 32 33 const headerHTML = ` 34 <header> 35 <div class="content-header"> 36 <a href="${prefix}index.html"> 37 <div class="logo"> 38 <img src="${prefix}img/logoZework.svg" alt="Zework" class="logo-img" width="40" height="40"> 39 <span class="logo-wordmark">ZEWORK</span> 40 </div> 41 </a> 42 <div class="menu"> 43 <ul class="ul-menu"> 44 <li class="menu-item-has-children"> 45 <a href="${prefix}zework-sign/" class="${activeItem === 'zeworksign' ? 'active-menu' : ''}"> 46 Phần má»m <i class="fas fa-chevron-down dropdown-chevron"></i> 47 </a> 48 <div class="submenu-dropdown"> 49 <a href="${prefix}zework-sign/#download-mac" class="submenu-item"> 50 <div class="submenu-icon mac"><i class="fab fa-apple"></i></div> 51 <div class="submenu-info"> 52 <div class="submenu-title">ZeworkSign for Mac <span class="submenu-badge">Má»i</span></div> 53 <div class="submenu-desc">Ký sá» chuyên biá»t macOS (Apple Silicon & Intel)</div> 54 </div> 55 </a> 56 <a href="${prefix}zework-sign/#download-windows" class="submenu-item"> 57 <div class="submenu-icon win"><i class="fab fa-windows"></i></div> 58 <div class="submenu-info"> 59 <div class="submenu-title">ZeworkSign for Windows</div> 60 <div class="submenu-desc">TÆ°Æ¡ng thÃch 100% Thuế, MISA, DVC & VietInvoice</div> 61 </div> 62 </a> 63 <a href="${prefix}zework-sign/#usb-ky-so-tu-xa" class="submenu-item"> 64 <div class="submenu-icon hub"><i class="fas fa-network-wired"></i></div> 65 <div class="submenu-info"> 66 <div class="submenu-title">Zework Hub - Chia sẻ Token <span class="submenu-badge">Miá» n phÃ</span></div> 67 <div class="submenu-desc">Cắm 1 USB Token cho cả công ty cùng ký online</div> 68 </div> 69 </a> 70 </div> 71 </li> 72 <li><a href="${prefix}tinh-nang-zework/" class="${activeItem === 'tinhnang' ? 'active-menu' : ''}">TÃnh nÄng</a></li> 73 <li><a href="${prefix}bang-gia/" class="${activeItem === 'banggia' ? 'active-menu' : ''}">Bảng giá</a></li> 74 <li><a href="${prefix}zework-mobile/" class="${activeItem === 'didong' ? 'active-menu' : ''}">Äá»ng bá» Mobile</a></li> 75 <li><a href="${prefix}tong-dai-zalo/" class="${activeItem === 'tongdai' ? 'active-menu' : ''}">Tá»ng Äà i Zalo</a></li> 76 <li><a href="${prefix}dang-bai-zalo/" class="${activeItem === 'dangbai' ? 'active-menu' : ''}">ÄÄng bà i Zalo <span class="submenu-badge menu-badge-new">Má»i</span></a></li>
77 <!-- Tạm ẩn mục Bà i viết khá»i menu (29/09/2026); trang /bai-viet/ vẫn truy cáºp Äược bằng ÄÆ°á»ng dẫn --> 78 <li><a href="${prefix}lien-he-zework/" class="${activeItem === 'lienhe' ? 'active-menu' : ''}">Liên há»</a></li> 79 <li class="menu-item-has-children"> 80 <a href="https://docs.zework.com/" target="_blank" class="${activeItem === 'tailieu' ? 'active-menu' : ''}"> 81 Tà i liá»u <i class="fas fa-chevron-down dropdown-chevron"></i> 82 </a> 83 <div class="submenu-dropdown"> 84 <a href="https://docs.zework.com/" target="_blank" class="submenu-item"> 85 <div class="submenu-icon"><i class="fas fa-book"></i></div> 86 <div class="submenu-info"> 87 <div class="submenu-title">Tà i liá»u sá» dụng</div> 88 <div class="submenu-desc">HÆ°á»ng dẫn dùng Zework: kết ná»i Zalo, há»i thoại, dashboardâ¦</div> 89 </div> 90 </a> 91 <a href="https://docs.zework.com/s/860c8c41-9f7e-4329-9189-588731690794/doc/1-xac-thuc-quan-ly-khoa-api-bDftcLdAve" target="_blank" class="submenu-item"> 92 <div class="submenu-icon hub"><i class="fas fa-code"></i></div> 93 <div class="submenu-info"> 94 <div class="submenu-title">Tà i liá»u tÃch hợp API <span class="submenu-badge">Dev</span></div> 95 <div class="submenu-desc">Xác thá»±c, quản lý khoá API & tÃch hợp Open API Zalo</div> 96 </div> 97 </a> 98 </div> 99 </li> 100 </ul> 101 </div> 102 <div class="btn-header"> 103 <button class="btn-header-login" onclick="window.open('https://app.zework.com/login','_blank')">ÄÄng nháºp</button> 104 <button class="btn-header-signup" onclick="window.open('https://app.zework.com/register','_blank')">ÄÄng ký</button> 105 <button class="menu-mobile"><i class="fas fa-bars"></i></button> 106 <button class="close-menu" style="display:none;"><i class="fas fa-times"></i></button> 107 </div> 108 </div> 109 </header> 110 111 <div class="mobile-menu-popup" id="mobileMenu"> 112 <ul class="ul-menu"> 113 <li><a href="${prefix}">Trang chủ</a></li> 114 <li><a href="${prefix}zework-sign/" style="color: #0066db; font-weight: 700;">ð Phần má»m Ký sá» ZeworkSign <span class="submenu-badge">Má»i</span></a></li> 115 <li><a href="${prefix}tinh-nang-zework/">TÃnh nÄng</a></li> 116 <li><a href="${prefix}bang-gia/">Bảng giá</a></li> 117 <li><a href="${prefix}zework-mobile/">Äá»ng bá» Mobile</a></li> 118 <li><a href="${prefix}tong-dai-zalo/">Tá»ng Äà i Zalo</a></li> 119 <li><a href="${prefix}dang-bai-zalo/">ð ÄÄng bà i Zalo <span class="submenu-badge">Má»i</span></a></li> 120 <li><a href="${prefix}lien-he-zework/">Liên há»</a></li> 121 <li><a href="https://docs.zework.com/" target="_blank">ð Tà i liá»u sá» dụng</a></li> 122 <li><a href="https://docs.zework.com/s/860c8c41-9f7e-4329-9189-588731690794/doc/1-xac-thuc-quan-ly-khoa-api-bDftcLdAve" target="_blank">ð» Tà i liá»u tÃch hợp API</a></li> 123 </ul> 124 <div class="mobile-auth"> 125 <button class="btn-signup" onclick="window.open('https://app.zework.com/register','_blank')">ÄÄng ký</button> 126 <button class="btn-login" onclick="window.open('https://app.zework.com/login','_blank')">ÄÄng nháºp</button> 127 </div> 128 </div> 129 `; 130 131 headerPlaceholder.innerHTML = headerHTML; 132 133 // Sau khi render xong, cần khá»i tạo lại các sá»± kiá»n menu di Äá»ng 134 initHeaderEvents(); 135} 136 137function initHeaderEvents() { 138 const btnMenu = document.querySelector('.menu-mobile'); 139 const btnClose = document.querySelector('.close-menu'); 140 const popupMenu = document.querySelector('.mobile-menu-popup'); 141 142 if (btnMenu && btnClose && popupMenu) { 143 btnMenu.addEventListener('click', () => { 144 popupMenu.classList.add('show'); 145 btnMenu.style.display = "none"; 146 btnClose.style.display = "block"; 147 document.body.style.overflow = 'hidden'; 148 }); 149 150 btnClose.addEventListener('click', () => { 151 popupMenu.classList.remove('show'); 152 btnMenu.style.display = "block"; 153 btnClose.style.display = "none"; 154 document.body.style.overflow = ''; 155 }); 156 157 // Tá»± Äá»ng Äóng menu khi click và o link hoặc button 158 const mobileInteractives = popupMenu.querySelectorAll('a, button');
159 mobileInteractives.forEach(item => { 160 item.addEventListener('click', () => { 161 popupMenu.classList.remove('show'); 162 btnMenu.style.display = "block"; 163 btnClose.style.display = "none"; 164 document.body.style.overflow = ''; 165 }); 166 }); 167 } 168}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.