Add permanent responsive role navigation and breadcrumbs

2026-07-10 10:55:51 +05:30
parent b7c772f6e1
commit 0e00141ded
11 changed files with 364 additions and 148 deletions
@@ -0,0 +1,98 @@
+(function () {
+  'use strict';
+
+  function textOf(el) {
+    return (el.textContent || '').replace(/\s+/g, ' ').trim();
+  }
+
+  function prepareMobileNavigation() {
+    var desktop = document.querySelector('nav[aria-label="Primary navigation"]');
+    var drawer = document.getElementById('af-mobile-nav');
+    var target = drawer && drawer.querySelector('[data-af-mobile-links]');
+    var open = document.querySelector('[data-af-mobile-open]');
+    if (!desktop || !drawer || !target || !open) return;
+
+    var clone = desktop.cloneNode(true);
+    clone.className = 'block';
+    clone.removeAttribute('aria-label');
+    clone.querySelectorAll('.af-nav-menu').forEach(function (menu) {
+      menu.classList.remove('af-nav-menu');
+      menu.classList.add('ml-3', 'mt-1', 'space-y-1', 'border-l', 'border-slate-200', 'pl-3');
+    });
+    clone.querySelectorAll('.af-nav-dropdown').forEach(function (item) {
+      item.classList.add('rounded-xl', 'border', 'border-slate-200', 'p-1');
+    });
+    clone.querySelectorAll('.af-nav-link, .af-nav-summary').forEach(function (item) {
+      item.classList.add('block', 'w-full');
+    });
+    target.appendChild(clone);
+
+    function show() {
+      drawer.classList.remove('hidden');
+      drawer.setAttribute('aria-hidden', 'false');
+      document.documentElement.classList.add('overflow-hidden');
+    }
+    function hide() {
+      drawer.classList.add('hidden');
+      drawer.setAttribute('aria-hidden', 'true');
+      document.documentElement.classList.remove('overflow-hidden');
+    }
+    open.addEventListener('click', show);
+    drawer.querySelectorAll('[data-af-mobile-close]').forEach(function (button) { button.addEventListener('click', hide); });
+    drawer.querySelectorAll('a').forEach(function (link) { link.addEventListener('click', hide); });
+    document.addEventListener('keydown', function (event) { if (event.key === 'Escape') hide(); });
+  }
+
+  function normalizeBackAction() {
+    var slot = document.getElementById('af-shared-back-slot');
+    var main = document.querySelector('main');
+    if (!slot || !main) return;
+
+    var candidates = Array.prototype.slice.call(main.querySelectorAll('a, button'));
+    var existing = candidates.find(function (el) {
+      if (el.closest('#af-page-context')) return false;
+      var text = textOf(el).toLowerCase();
+      return text === 'back' || text.indexOf('back to ') === 0 || text.indexOf('← back') === 0;
+    });
+
+    if (existing) {
+      existing.className = 'inline-flex items-center rounded-xl border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm transition hover:border-brand-300 hover:text-brand-700';
+      if (textOf(existing).indexOf('←') !== 0) existing.textContent = '← ' + textOf(existing);
+      slot.appendChild(existing);
+      return;
+    }
+
+    var path = window.location.pathname.replace(/\/$/, '');
+    var segments = path.split('/').filter(Boolean);
+    var isRoot = segments.length <= 1 || /\/(dashboard|workspaces)$/.test(path);
+    if (isRoot) return;
+
+    var referrerIsLocal = false;
+    try { referrerIsLocal = !!document.referrer && new URL(document.referrer).origin === window.location.origin; } catch (e) {}
+    if (!referrerIsLocal && window.history.length <= 1) return;
+
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'inline-flex items-center rounded-xl border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm transition hover:border-brand-300 hover:text-brand-700';
+    button.textContent = '← Back';
+    button.addEventListener('click', function () {
+      if (referrerIsLocal || window.history.length > 1) window.history.back();
+      else window.location.href = '/workspaces';
+    });
+    slot.appendChild(button);
+  }
+
+  function closeDesktopDropdowns() {
+    document.addEventListener('click', function (event) {
+      document.querySelectorAll('[data-af-nav-dropdown][open]').forEach(function (item) {
+        if (!item.contains(event.target)) item.removeAttribute('open');
+      });
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    prepareMobileNavigation();
+    normalizeBackAction();
+    closeDesktopDropdowns();
+  });
+})();