feat(ui): ui-shell header with tool links, mobile side nav, Youreka logo

- header: Carbon ui-shell (cds-header) with the Youreka logo (from
  idid-enterprise-portal), Image Cropper / Fingerprint Agent nav items
  (aria-current on the active tool), the agent status tag on the wizard,
  and the operator chip + Sign out on desktop
- mobile: cds-side-nav (logo above the items, both tools, a divider, then
  Sign out) toggled by the ui-shell menu button; account actions move out
  of the header below 1056px, the nav is hidden at desktop widths
- the header is built once in server.js (appHeader) and injected into the
  landing, both tools and error pages — no per-page duplication
- removed my duplicate menu-button toggle: ui-shell coordinates the menu
  button and side nav itself (the duplicate cancelled it out)
- fixes: 'cds-header' was hidden by a selector-list typo
  (cds-header, cds-side-nav:not(:defined)); the collapsed side nav no
  longer captures taps

Tools banner logo asset added (public/assets/youreka-logo.png).
This commit is contained in:
2026-10-01 03:53:24 +01:00
parent 22735c0709
commit 340d8da19d
9 changed files with 115 additions and 111 deletions
-4
View File
@@ -54,10 +54,6 @@ Vue.config.ignoredElements = [/^cds-/];
},
computed: {
initials: function () {
var n = (this.session && (this.session.firstName || this.session.phone)) || '?';
return n.slice(0, 2).toUpperCase();
},
canReview: function () {
if (this.busy.review) return false;
if (this.accepted) return true;
+2 -17
View File
@@ -12,6 +12,7 @@
<script src="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.css">
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/ui-shell.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/button.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/notification.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/tag.min.js"></script>
@@ -23,23 +24,7 @@
</head>
<body class="app">
<div id="app">
<nav class="nav">
<div class="container">
<a class="brand" href="/">
<span class="brand-mark">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>
</span>
YOUreka <small>Tools</small>
</a>
<div class="nav-right" v-cloak v-if="session">
<span class="user-chip">
<span class="avatar">{{ initials }}</span>
{{ session.firstName || session.phone }}
</span>
<a class="linklike" href="/auth/logout">Sign out</a>
</div>
</div>
</nav>
<!--app-header-->
<main class="container" v-cloak v-if="session">
<div class="page-head">