Пересобрать верхний UI-бар

shine-UI/js/components/header.js

@@ -1,14 +1,20 @@
-export function renderHeader({ title, leftAction, leftLabel = '', rightActions = [] }) {
+export function renderHeader({ title = '', centerNode = null, leftAction, leftLabel = '', rightActions = [] }) {
   const wrap = document.createElement('header');
-  wrap.className = 'page-header';
+  wrap.className = 'page-header app-topbar-shell';
 
   const left = document.createElement('div');
   left.className = 'header-left';
   if (leftAction) {
     const btn = document.createElement('button');
     btn.type = 'button';
-    btn.className = 'icon-btn';
-    btn.textContent = leftAction.label;
+    const rawLabel = String(leftAction.label || '').trim();
+    const isBackAction = rawLabel === '←' || rawLabel === '<' || rawLabel === '‹';
+    btn.className = `icon-btn${isBackAction ? ' header-back-btn' : ''}`;
+    btn.textContent = isBackAction ? '←' : rawLabel;
+    if (isBackAction) {
+      btn.setAttribute('aria-label', leftAction.ariaLabel || 'Назад');
+      btn.title = leftAction.title || 'Назад';
+    }
     btn.addEventListener('click', leftAction.onClick);
     left.append(btn);
   }
@@ -19,9 +25,16 @@ export function renderHeader({ title, leftAction, leftLabel = '', rightActions =
     left.append(label);
   }
 
-  const h1 = document.createElement('h1');
-  h1.className = 'page-title';
-  h1.textContent = title;
+  const center = document.createElement('div');
+  center.className = 'header-center';
+  if (centerNode instanceof Node) {
+    center.append(centerNode);
+  } else {
+    const h1 = document.createElement('h1');
+    h1.className = 'page-title';
+    h1.textContent = title;
+    center.append(h1);
+  }
 
   const right = document.createElement('div');
   right.className = 'header-actions';
@@ -40,6 +53,6 @@ export function renderHeader({ title, leftAction, leftLabel = '', rightActions =
     right.append(btn);
   });
 
-  wrap.append(left, h1, right);
+  wrap.append(left, center, right);
   return wrap;
 }