kyuno/batchCooking
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 4 Packages Wiki Activity Actions

fix(layout): barre de navigation mobile en icônes seules (#105) #118

Merged
kyuno merged 1 commit from fix/mobile-bottom-nav-icons-only into main 2026-09-08 05:22:00 +02:00
Conversation 0 Commits 1 Files changed 2 +29 -10
2 changed files with 29 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e702e21296 - Show all commits

16
apps/web/cypress/e2e/layout.cy.ts
View file

@ -186,7 +186,7 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
cy.intercept("GET", /\/planning\?/, { statusCode: 200, body: null });
});
it("renders the bottom nav instead of the sidebar, with every route tab legible and a working Plus tab", () => {
it("renders the bottom nav instead of the sidebar, icon-only, with a working Plus tab", () => {
cy.setViewport("phone");
cy.visit("/");
@ -202,11 +202,15 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
expect(getComputedStyle($nav[0]).position).to.equal("fixed");
});
// Every route tab keeps its icon *and* label legible — this bar never
// falls back to icon-only or horizontal scroll, unlike the old
// squashed sidebar treatment it replaces (only 4 short tabs, always
// fits).
cy.contains(".app-bottom-nav a", "Planning").find("span.label").should("be.visible");
// Issue #105 — icon-only bar: each tab's `span.label` stays in the DOM
// (accessible name for the link) but is visually hidden, only the icon
// shows. Same treatment as the desktop collapsed rail (sidebar.cy.ts).
cy.contains(".app-bottom-nav a", "Planning")
.should("have.attr", "href", "/")
.within(() => {
cy.get("span.label").should("exist").and("not.be.visible");
cy.get("svg").should("be.visible");
});
cy.contains(".app-bottom-nav a", "Recettes").should("have.attr", "href", "/recettes");
cy.contains(".app-bottom-nav a", "Liste de courses").should(
"have.attr",

23
apps/web/src/layouts/AppLayout.scss
View file

@ -415,13 +415,28 @@
cursor: pointer;
svg {
width: 1.375rem;
height: 1.375rem;
width: 1.5rem;
height: 1.5rem;
}
// Icon-only bar (issue #105): the visible label is dropped. "Liste de
// courses" (16 chars) wrapped to two lines in a ~90px tab while the
// others stayed on one, so its icon+label block was taller and its
// icon sat visibly higher than the rest. Kept in the DOM, visually
// hidden the accessibility-safe way, so a screen reader still announces
// each tab by name and the `<NavLink>`/button keeps its accessible
// label (no `aria-label` to duplicate the i18n string).
.label {
font-size: var(--font-size-xs);
font-weight: 600;
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
// Applied by NavLink itself (see AppLayout.tsx's `className` prop) for