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

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 }); 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.setViewport("phone");
cy.visit("/"); 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"); expect(getComputedStyle($nav[0]).position).to.equal("fixed");
}); });
// Every route tab keeps its icon *and* label legible — this bar never // Issue #105 — icon-only bar: each tab's `span.label` stays in the DOM
// falls back to icon-only or horizontal scroll, unlike the old // (accessible name for the link) but is visually hidden, only the icon
// squashed sidebar treatment it replaces (only 4 short tabs, always // shows. Same treatment as the desktop collapsed rail (sidebar.cy.ts).
// fits). cy.contains(".app-bottom-nav a", "Planning")
cy.contains(".app-bottom-nav a", "Planning").find("span.label").should("be.visible"); .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", "Recettes").should("have.attr", "href", "/recettes");
cy.contains(".app-bottom-nav a", "Liste de courses").should( cy.contains(".app-bottom-nav a", "Liste de courses").should(
"have.attr", "have.attr",

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

@ -415,13 +415,28 @@
cursor: pointer; cursor: pointer;
svg { svg {
width: 1.375rem; width: 1.5rem;
height: 1.375rem; 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 { .label {
font-size: var(--font-size-xs); position: absolute;
font-weight: 600; 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 // Applied by NavLink itself (see AppLayout.tsx's `className` prop) for