Chú ý: Sau khi lưu trang, có thể bạn sẽ phải xóa bộ nhớ đệm của trình duyệt để xem các thay đổi.
- Firefox / Safari: Nhấn giữ phím Shift trong khi nhấn Tải lại (Reload), hoặc nhấn tổ hợp Ctrl-F5 hay Ctrl-R (⌘R trên Mac).
- Google Chrome: Nhấn tổ hợp Ctrl-Shift-R (⇧⌘R trên Mac).
- Edge: Nhấn giữ phím Ctrl trong khi nhấn Làm tươi (Refresh), hoặc nhấn tổ hợp Ctrl-F5.
(function() {
'use strict';
// ─── Main Sidebar Toggle Button ──────────────────────────────
const bodyContainer = document.querySelector('.citizen-body-container');
const pageSidebar = document.querySelector('.citizen-page-sidebar');
if (bodyContainer && pageSidebar) {
const sidebarToggle = document.createElement('button');
sidebarToggle.classList.add('citizen-sidebar-toggle');
sidebarToggle.textContent = '»';
sidebarToggle.setAttribute('title', 'Ẩn/Hiện thanh bên');
bodyContainer.appendChild(sidebarToggle);
const html = document.documentElement;
const isSidebarClosed = localStorage.getItem('citizensidebar') === 'closed';
if (isSidebarClosed) {
pageSidebar.classList.add('citizen-sidebar-closed');
html.classList.add('citizen-sidebar-closed');
} else {
pageSidebar.classList.add('citizen-sidebar-open');
html.classList.add('citizen-sidebar-open');
}
sidebarToggle.addEventListener('click', function() {
const isNowClosed = pageSidebar.classList.contains('citizen-sidebar-open');
localStorage.setItem('citizensidebar', isNowClosed ? 'closed' : 'open');
pageSidebar.classList.toggle('citizen-sidebar-open');
pageSidebar.classList.toggle('citizen-sidebar-closed');
html.classList.toggle('citizen-sidebar-open');
html.classList.toggle('citizen-sidebar-closed');
sidebarToggle.textContent = isNowClosed ? '«' : '»';
});
}
// ─── SVG Icon for Submenu Toggle Button ─────────────────────────
const chevronIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/>
</svg>`;
// ─── Process Submenu Items ───────────────────────────────────────
// Get all submenu items (elements with an id starting with "n-sub-")
const subItems = Array.from(document.querySelectorAll('[id^="n-sub-"]'));
if (subItems.length === 0) return; // No subitems to process
// Group submenu items by their parent. The first sibling that does NOT have an id starting with "n-sub-" is the parent.
const parentMap = new Map();
const processedSubItems = new Set();
subItems.forEach(subItem => {
if (processedSubItems.has(subItem)) return;
let prev = subItem.previousElementSibling;
while (prev && prev.id && prev.id.startsWith('n-sub-')) {
prev = prev.previousElementSibling;
}
if (prev) {
if (!parentMap.has(prev)) {
parentMap.set(prev, []);
}
parentMap.get(prev).push(subItem);
processedSubItems.add(subItem);
}
});
// Process each parent that has submenu items.
// Instead of rebuilding the parent's innerHTML (which could lose styling),
// we preserve the original anchor (for proper alignment) and append a toggle button.
parentMap.forEach((items, parent) => {
const parentLink = parent.querySelector('a');
if (parentLink) {
// Ensure the parent's link gets the text styling.
parentLink.classList.add('menu-parent-text');
// Add a class to the parent for flex styling.
parent.classList.add('menu-parent');
// Create and append the submenu toggle button.
const toggleBtn = document.createElement('button');
toggleBtn.className = 'submenu-toggle';
toggleBtn.innerHTML = chevronIcon;
toggleBtn.title = 'Mở rộng/Thu gọn';
parent.appendChild(toggleBtn);
// Create a container for the submenu items.
const submenuContainer = document.createElement('div');
submenuContainer.className = 'submenu-items';
// Process submenu items: clean up the text and clone the elements.
items.forEach(item => {
const itemLink = item.querySelector('a');
if (itemLink) {
const span = itemLink.querySelector('span');
if (span && span.textContent.startsWith('sub ')) {
span.textContent = span.textContent.replace(/^sub\s+/, '');
} else if (itemLink.textContent.startsWith('sub ')) {
itemLink.textContent = itemLink.textContent.replace(/^sub\s+/, '');
}
}
const clonedItem = item.cloneNode(true);
submenuContainer.appendChild(clonedItem);
// Hide the original submenu item.
item.style.display = 'none';
});
// Insert the submenu container after the parent element.
parent.after(submenuContainer);
// Toggle functionality for expanding/collapsing the submenu.
const handleToggle = function(e) {
e.preventDefault();
e.stopPropagation();
parent.classList.toggle('expanded');
// Save state to localStorage if parent has an id.
const parentId = parent.id || '';
if (parentId) {
localStorage.setItem(
`submenu-${parentId}`,
parent.classList.contains('expanded') ? 'expanded' : 'collapsed'
);
}
};
// Bind the event to both the parent and its toggle button.
parent.addEventListener('click', handleToggle);
toggleBtn.addEventListener('click', handleToggle);
// Restore the saved state from localStorage if available.
const parentId = parent.id || '';
if (parentId && localStorage.getItem(`submenu-${parentId}`) === 'expanded') {
parent.classList.add('expanded');
}
}
});
})();