add mobile breadcrumb#4724
Conversation
There was a problem hiding this comment.
Copilot encountered an error: Your billing is not configured or you have Copilot licenses from multiple standalone organizations or enterprises. To use premium requests, select a billing entity via the GitHub site, under Settings > Copilot > Features.
Coverage report
Test suite run success13 tests passing in 1 suite. Report generated by 🧪jest coverage report action from 294c971 |
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net |
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net |
🚀 Lighthouse score comparison for PR slot and production
|
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net |
🚀 Lighthouse score comparison for PR slot and production
|
| className="unstyled inline-flex items-center gap-1 text-xs text-gray-700 no-underline hover:text-sswRed" | ||
| aria-label={`Back to ${mobileParent.label}`} | ||
| > | ||
| <svg |
There was a problem hiding this comment.
Instead of can we use a component from the component library (whatever the chevron is from the other breadcrubm list)
| className="unstyled inline-flex items-center gap-1 text-sm no-underline transition-colors hover:text-white" | ||
| aria-label={`Back to ${mobileParent.label}`} | ||
| > | ||
| <svg |
There was a problem hiding this comment.
same here - no need to use sg
There was a problem hiding this comment.
@copilot same here, no need to use SVG, please use an existing component
| const mobileParent = | ||
| segments.length >= 2 | ||
| ? { | ||
| label: | ||
| global.breadcrumbReplacements.find( | ||
| (value) => value.from === segments[segments.length - 2] | ||
| )?.to || segments[segments.length - 2], | ||
| href: `/${segments[segments.length - 2]}`, | ||
| } | ||
| : { label: global.breadcrumbHomeRoute, href: "/" }; |
There was a problem hiding this comment.
This .find(...)?.to || rawSlug lookup is a bit convoluted, and it's a hand-written second copy of the same slug→label logic that lives in app/components/breadcrumb.tsx (getDisplayName). Consider a small Map instead, e.g. build it once:
const replacementMap = new Map(
global.breadcrumbReplacements.map((r) => [r.from, r.to])
);
const parent = segments[segments.length - 2];
const label = replacementMap.get(parent) ?? parent;Cleaner to read, and better still if the whole mobile back-link were extracted into one shared component so the two breadcrumb files can't drift (the href already differs between them — full path here vs. single segment).
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="12" | ||
| height="12" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| aria-hidden="true" | ||
| > | ||
| <path d="M15 18l-6-6 6-6" /> |
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net |
🚀 Lighthouse score comparison for PR slot and production
|
There was a problem hiding this comment.
Copilot encountered an error: Your billing is not configured or you have Copilot licenses from multiple standalone organizations or enterprises. To use premium requests, select a billing entity via the GitHub site, under Settings > Copilot > Features.
|
🧹 Your staging deployment was removed during weekly cleanup because this PR has been inactive for over 7 days. Push a new commit (or re-run the PR - build and deploy to slot workflow) to spin up a fresh staging environment. |
Making breadcrumbs mobile reactive and rule compliant