queue

settings-site/public/js/app.js

@@ -153,19 +153,6 @@ function setupSectionToggles() {
       header.closest('.section').classList.toggle('collapsed');
     });
   });
-  // Sidebar navigation
-  document.querySelectorAll('.sidebar a').forEach(link => {
-    link.addEventListener('click', (e) => {
-      e.preventDefault();
-      const target = document.getElementById(link.getAttribute('href').slice(1));
-      if (target) {
-        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        target.classList.remove('collapsed');
-      }
-      document.querySelectorAll('.sidebar a').forEach(l => l.classList.remove('active'));
-      link.classList.add('active');
-    });
-  });
 }
 
 function markChanged(key, value) {
@@ -435,4 +422,54 @@ function toHumanLabel(key) {
     .join(' ');
 }
 
-document.addEventListener('DOMContentLoaded', init);
+const ROUTES = {
+  '/': 's-core',
+  '/channels': 's-channels',
+  '/categories': 's-categories',
+  '/gmail': 's-gmail',
+  '/behavior': 's-behavior',
+  '/threads': 's-threads',
+  '/pins': 's-pins',
+  '/notifications': 's-notifications',
+  '/logging': 's-logging',
+  '/automation': 's-automation',
+  '/appearance': 's-appearance',
+  '/staff': 's-staff',
+  '/advanced': 's-advanced'
+};
+
+function navigate(path, updateHistory = true) {
+  const sectionId = ROUTES[path] || ROUTES['/'];
+  const normalizedPath = ROUTES[path] ? path : '/';
+  if (updateHistory) history.pushState({}, '', normalizedPath);
+
+  document.querySelectorAll('.section').forEach(section => {
+    section.classList.toggle('hidden', section.id !== sectionId);
+  });
+
+  document.querySelectorAll('.sidebar a').forEach(link => {
+    link.classList.toggle('active', link.getAttribute('href') === normalizedPath);
+  });
+}
+
+function setupSidebarRouting() {
+  const sidebar = document.querySelector('.sidebar');
+  if (!sidebar) return;
+
+  sidebar.addEventListener('click', e => {
+    const a = e.target.closest('a');
+    if (!a) return;
+    e.preventDefault();
+    navigate(a.getAttribute('href'));
+  });
+
+  window.addEventListener('popstate', () => {
+    navigate(location.pathname, false);
+  });
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+  setupSidebarRouting();
+  await init();
+  navigate(location.pathname, false);
+});