YOUreka/tools-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): icon-only header actions and side-nav separators

Browse Source 
- Help and Sign in/out become icon-only Carbon cds-header-global-action
  items (real links, accessible name in a visually-hidden span); the
  header nav keeps just Home + the tools.
- Side nav gains a separator so Home, the tools, and Help/Sign In/Out
  form three groups.
- Drop the now-unused header-nav-divider rule.
This commit is contained in:
adebisi-fa
2026-10-01 14:53:10 +01:00
parent 4d006e361f
commit 1ddf61b59f
3 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/public/assets/style.css
-3
View File
@@ -68,9 +68,6 @@ cds-side-nav[expanded] { pointer-events: auto; }
.side-nav-brand { display: flex; align-items: center; gap: 0.75rem; padding: 2rem 1rem 1rem; color: var(--cds-text-primary, #161616); font-weight: 600; font-size: 14px; }
.side-nav-brand img { display: block; }
/* separator between the service links and Help in the header nav */
.header-nav-divider { width: 1px; align-self: stretch; margin: 0.7rem 0.25rem; background: var(--cds-border-subtle, #e0e0e0); }
/* ── layout ─────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1136px; margin: 0 auto; padding: 0 1.5rem; }
main.container { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 1.5rem; }
tools/server.js
+12 -8
View File
@@ -134,10 +134,12 @@ const appHeader = (session, active) => {
const sideLink = (href, label, key, icon) =>
`<cds-side-nav-link href="${href}"${key === active ? ' aria-current="page"' : ''}>${icon || ''}${label}</cds-side-nav-link>`;
const name = session ? (session.firstName || session.phone || '') : '';
// Auth is a menu item now, so the header's right side only carries identity.
// Help and the auth action are icon-only global header actions.
const headerAction = (href, label, svg, extra = '') =>
`<cds-header-global-action href="${href}"${extra}>${svg.replace('slot="title-icon"', 'slot="icon"')}<span class="cds--visually-hidden">${label}</span></cds-header-global-action>`;
const headerAuth = session
? '<cds-header-nav-item href="/auth/logout" data-signout>Sign out</cds-header-nav-item>'
: '<cds-header-nav-item href="/auth/login">Sign in</cds-header-nav-item>';
? headerAction('/auth/logout', 'Sign out', SIDE_NAV_ICONS.logout, ' data-signout')
: headerAction('/auth/login', 'Sign in', SIDE_NAV_ICONS.login);
const sideAuth = session
? `<cds-side-nav-link href="/auth/logout" data-signout>${SIDE_NAV_ICONS.logout}Sign out</cds-side-nav-link>`
: `<cds-side-nav-link href="/auth/login">${SIDE_NAV_ICONS.login}Sign in</cds-side-nav-link>`;
@@ -150,13 +152,14 @@ const appHeader = (session, active) => {
<cds-header-nav>
${toolLink('/', 'Home', 'home')}
${session ? `${toolLink('/cropper', 'Image Cropper', 'cropper')}
${toolLink('/fingerprint', 'Fingerprint Agent', 'fingerprint')}
<span class="header-nav-divider" aria-hidden="true"></span>` : ''}
${toolLink('/help', 'Help', 'help')}
${headerAuth}
${toolLink('/fingerprint', 'Fingerprint Agent', 'fingerprint')}` : ''}
</cds-header-nav>
${active === 'fingerprint' ? '<cds-tag id="agent-status" type="red" class="header-agent">Agent offline</cds-tag>' : ''}
${session ? `<div class="header-right"><span class="user-chip"><span class="avatar">${esc(name.trim().slice(0, 2).toUpperCase())}</span>${esc(name)}</span></div>` : ''}
<div class="header-right">
${headerAction('/help', 'Help', SIDE_NAV_ICONS.help)}
${headerAuth}
${session ? `<span class="user-chip"><span class="avatar">${esc(name.trim().slice(0, 2).toUpperCase())}</span>${esc(name)}</span>` : ''}
</div>
</cds-header>
<cds-side-nav aria-label="Tools" id="side-nav">
<div class="side-nav-brand">
@@ -164,6 +167,7 @@ const appHeader = (session, active) => {
</div>
<cds-side-nav-items>
${sideLink('/', 'Home', 'home', SIDE_NAV_ICONS.home)}
<cds-side-nav-divider></cds-side-nav-divider>
${session ? `${sideLink('/cropper', 'Image Cropper', 'cropper', SIDE_NAV_ICONS.crop)}
${sideLink('/fingerprint', 'Fingerprint Agent', 'fingerprint', SIDE_NAV_ICONS.fingerprint)}
<cds-side-nav-divider></cds-side-nav-divider>` : ''}
tools/test/server.test.js
+18 -13
View File
@@ -353,16 +353,20 @@ test('landing header is server-rendered for the session', async () => {
const { base, stop } = await bootApp();
try {
const anon = await (await fetch(`${base}/`)).text();
assert.match(anon, /href="\/auth\/login">Sign in</);
assert.ok(!anon.includes('<!--app-header-->'), 'header marker is replaced');
// signed out: no service links, but Help and Sign in are always there
// signed out: Home only in the header nav; Help and Sign in are icon-only
// global header actions
assert.match(anon, /cds-header-nav-item href="\/" aria-current="page"/);
assert.ok(!anon.includes('cds-header-nav-item href="/cropper"'), 'no cropper in header nav when signed out');
assert.ok(!anon.includes('cds-header-nav-item href="/fingerprint"'), 'no fingerprint in header nav when signed out');
assert.match(anon, /cds-header-nav-item href="\/help"/);
assert.match(anon, /cds-header-global-action href="\/help"><svg slot="icon"/);
assert.match(anon, /cds-header-global-action href="\/auth\/login"><svg slot="icon"/);
// icon-only: the accessible name is a visually-hidden span
assert.match(anon, /<span class="cds--visually-hidden">Help<\/span>/);
assert.match(anon, /<span class="cds--visually-hidden">Sign in<\/span>/);
// side nav groups Home | Help, Sign in with a single divider
assert.match(anon, /cds-side-nav-link href="\/help"/);
// the divider only groups the services, so it is absent when signed out
assert.ok(!anon.includes('cds-side-nav-divider'), 'no side nav divider without services');
assert.ok(!anon.includes('header-nav-divider'), 'no header divider without services');
assert.equal((anon.match(/<cds-side-nav-divider>/g) || []).length, 1, 'one side nav divider when signed out');
// no identity or sign-out when signed out
assert.ok(!anon.includes('user-chip'), 'no user chip when signed out');
assert.ok(!anon.includes('data-signout'), 'no sign-out when signed out');
@@ -378,16 +382,17 @@ test('landing header is server-rendered for the session', async () => {
const authed = await (await fetch(`${base}/`, { headers: { cookie: cookies } })).text();
assert.match(authed, /Ada/);
assert.match(authed, /user-chip/);
assert.match(authed, /href="\/auth\/logout"[^>]*>Sign out</);
// signed in: services live in the header nav and in the mobile side nav
// signed in: services live in the header nav; Help and Sign out are icon-only
assert.match(authed, /cds-header-nav-item href="\/cropper"/);
assert.match(authed, /cds-header-nav-item href="\/fingerprint"/);
assert.match(authed, /cds-header-nav-item href="\/help"/);
assert.match(authed, /cds-header-nav-item href="\/auth\/logout" data-signout/);
assert.ok(!authed.includes('cds-header-nav-item href="/help"'), 'Help is not a text header nav item');
assert.match(authed, /cds-header-global-action href="\/help"><svg slot="icon"/);
assert.match(authed, /cds-header-global-action href="\/auth\/logout" data-signout><svg slot="icon"/);
assert.match(authed, /<span class="cds--visually-hidden">Sign out<\/span>/);
// side nav groups Home | services | Help, Sign out with two dividers
assert.match(authed, /cds-side-nav-link href="\/cropper"/);
assert.match(authed, /cds-side-nav-link href="\/help"/);
assert.match(authed, /cds-side-nav-divider/);
assert.match(authed, /header-nav-divider/);
assert.equal((authed.match(/<cds-side-nav-divider>/g) || []).length, 2, 'two side nav dividers when signed in');
// side nav items carry Carbon icons in the title-icon slot
assert.match(authed, /cds-side-nav-link href="\/cropper"[^>]*><svg slot="title-icon"/);
assert.match(authed, /cds-side-nav-link href="\/fingerprint"[^>]*><svg slot="title-icon"/);
@@ -412,7 +417,7 @@ test('help page is public and documents each service', async () => {
assert.match(html, /cds-accordion-item title="Image Cropper"/);
assert.match(html, /cds-accordion-item title="Fingerprint Agent"/);
assert.match(html, /accordion\.min\.js/);
assert.match(html, /cds-header-nav-item href="\/help" aria-current="page"/);
assert.match(html, /cds-header-global-action href="\/help"/);
assert.match(html, /cds-side-nav-link href="\/help" aria-current="page"/);
} finally {
await stop();