Skip to content

add mobile breadcrumb#4724

Open
micsblank wants to merge 4 commits into
mainfrom
micaela-UI-breadcrumbs-fix
Open

add mobile breadcrumb#4724
micsblank wants to merge 4 commits into
mainfrom
micaela-UI-breadcrumbs-fix

Conversation

@micsblank

Copy link
Copy Markdown
Member

Making breadcrumbs mobile reactive and rule compliant

Copilot AI review requested due to automatic review settings June 3, 2026 04:57

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

Coverage report

St.
Category Percentage Covered / Total
🔴 Statements 0.19% 72/37870
🔴 Branches 5.61% 24/428
🔴 Functions 0.74% 3/407
🔴 Lines 0.19% 72/37870

Test suite run success

13 tests passing in 1 suite.

Report generated by 🧪jest coverage report action from 294c971

@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

Deployed changes to https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net

@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

🚀 Lighthouse score comparison for PR slot and production

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/ 48 (⬇️14) 88 56 (⬇️3) 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/articles 69 (⬇️2) 93 56 (⬇️3) 57 (⬇️35) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/about-us 66 (⬆️13) 96 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/clients 68 (⬇️4) 91 56 (⬇️3) 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/contact-us 66 (⬇️1) 87 59 (⬆️3) 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting 53 87 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting/net-upgrade 52 (⬆️22) 86 56 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting/web-applications 50 (⬆️24) 90 59 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/employment 49 (⬇️16) 91 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/events/angular-superpowers-tour 46 (⬇️26) 92 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/events/ai-workshop 80 (⬆️13) 87 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/netug/sydney 56 89 56 (⬇️3) 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/training/internship-fullstack 63 (⬆️3) 87 59 61 (⬇️31) 0.00 MB 0.00 MB

@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

Deployed changes to https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net

@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

🚀 Lighthouse score comparison for PR slot and production

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/ 60 (⬇️2) 88 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/articles 64 (⬇️7) 93 59 57 (⬇️35) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/about-us 51 (⬇️2) 96 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/clients 61 (⬇️11) 91 56 (⬇️3) 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/contact-us 63 (⬇️4) 87 59 (⬆️3) 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting 50 (⬇️3) 87 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting/net-upgrade 45 (⬆️15) 86 56 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting/web-applications 32 (⬆️6) 90 56 (⬇️3) 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/employment 55 (⬇️10) 91 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/events/angular-superpowers-tour 44 (⬇️28) 92 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/events/ai-workshop 62 (⬇️5) 87 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/netug/sydney 56 89 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/training/internship-fullstack 56 (⬇️4) 87 59 61 (⬇️31) 0.00 MB 0.00 MB

@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

Deployed changes to https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net

@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

🚀 Lighthouse score comparison for PR slot and production

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/ 32 (⬇️30) 92 (⬆️4) 56 (⬇️3) 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/articles 61 (⬇️10) 93 59 57 (⬇️35) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/about-us 50 (⬇️3) 96 56 (⬇️3) 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/clients 75 (⬆️3) 91 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/contact-us 59 (⬇️8) 87 59 (⬆️3) 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting 47 (⬇️6) 87 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting/net-upgrade 34 (⬆️4) 86 56 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting/web-applications 30 (⬆️4) 90 59 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/employment 53 (⬇️12) 91 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/events/angular-superpowers-tour 44 (⬇️28) 92 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/events/ai-workshop 60 (⬇️7) 87 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/netug/sydney 53 (⬇️3) 89 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/training/internship-fullstack 59 (⬇️1) 87 56 (⬇️3) 61 (⬇️31) 0.00 MB 0.00 MB

@micsblank micsblank requested a review from isaaclombardssw June 4, 2026 22:45
@joshbermanssw joshbermanssw added the no-issue This label is used to bypass the PR-Lint check. Should be used for non-coding changes label Jun 4, 2026
Comment thread app/components/breadcrumb.tsx Outdated
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

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of can we use a component from the component library (whatever the chevron is from the other breadcrubm list)

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

className="unstyled inline-flex items-center gap-1 text-sm no-underline transition-colors hover:text-white"
aria-label={`Back to ${mobileParent.label}`}
>
<svg

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here - no need to use sg

@micsblank micsblank Jun 4, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot same here, no need to use SVG, please use an existing component

Comment on lines +108 to +117
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: "/" };

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

@isaaclombardssw isaaclombardssw left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please refactor out this svg (or use a real icon component), otherwise it's okay

Comment on lines +146 to +158
<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" />

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extract this out

@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

Deployed changes to https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net

@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

🚀 Lighthouse score comparison for PR slot and production

🌐 URL ⚡ Performance ♿ Accessibility ✅ Best Practices 🔍 SEO 📦 Bundle Size 🗑️ Unused Bundle
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/ 73 (⬆️11) 88 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/articles 92 (⬆️21) 93 59 57 (⬇️35) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/about-us 67 (⬆️14) 96 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/clients 93 (⬆️21) 91 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/company/contact-us 72 (⬆️5) 87 59 (⬆️3) 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting 54 (⬆️1) 87 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting/net-upgrade 71 (⬆️41) 91 (⬆️5) 56 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/consulting/web-applications 69 (⬆️43) 95 (⬆️5) 59 54 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/employment 79 (⬆️14) 91 59 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/events/angular-superpowers-tour 69 (⬇️3) 92 56 69 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/events/ai-workshop 90 (⬆️23) 87 56 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/netug/sydney 82 (⬆️26) 89 59 61 (⬇️31) 0.00 MB 0.00 MB
https://app-sswwebsite-9eb3-pr-4724.azurewebsites.net/training/internship-fullstack 81 (⬆️21) 87 59 61 (⬇️31) 0.00 MB 0.00 MB

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@github-actions

Copy link
Copy Markdown
Contributor

🧹 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

no-issue This label is used to bypass the PR-Lint check. Should be used for non-coding changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants