feat(52-mobile-main-menu): hamburger + slide-in overlay sidebar na mobile

Zastapienie niedzialajacej nawigacji horyzontalnej pelnoekranowym overlay sidebar z hamburgerem, backdrop i animacja CSS transform. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 23:15:52 +02:00
parent cbc2058b83
commit 1c87489824
8 changed files with 3710 additions and 40 deletions
--- a/.paul/PROJECT.md
+++ b/.paul/PROJECT.md
@@ -60,10 +60,11 @@ Sprzedawca moĹĽe obsĹ‚ugiwaÄ‡ zamĂłwienia ze wszystkich kanaĹ‚Ăłw
 - [x] Automatyzacja: tab Historia z filtrowaniem/paginacja + retencja 30 dni + akcja update_order_status - Phase 49
 - [x] Allegro: automatyczne przekazywanie numeru przesylki do checkout form po utworzeniu paczki (tylko source=allegro) - Phase 50
 - [x] Email HTML Layout: header/footer HTML per skrzynka pocztowa, dual-mode edytor (Quill + HTML source), kompozycja header+body+footer, podglad — Phase 51
+- [x] Mobile Main Menu: hamburger, slide-in overlay sidebar, backdrop na mobile <=768px — Phase 52

 ### Active (In Progress)

- [ ] Brak aktywnych faz
+- [ ] Wersja mobilna — modul po module (v3.0)

 ### Planned (Next)

--- a/.paul/ROADMAP.md
+++ b/.paul/ROADMAP.md
@@ -6,9 +6,17 @@ orderPRO to narzedzie do wielokanalowego zarzadzania sprzedaza. Projekt przechod

 ## Current Milestone

-No active milestone - Ready to define next scope
+### v3.0 Mobile Responsive — In progress

-Next action: uruchom /paul:milestone (lub /paul:plan) dla kolejnego celu biznesowego.
+Wersja mobilna aplikacji, modul po module. Cel: pelna uzywalnosc orderPRO na telefonach i tabletach.
+
+| Phase | Name | Plans | Status |
+|-------|------|-------|--------|
+| 52 | Mobile Main Menu | 1/1 | Complete |
+| TBD | Mobile Orders List | - | Not started |
+| TBD | Mobile Order Details | - | Not started |
+| TBD | Mobile Settings | - | Not started |
+| ... | Kolejne moduly wg potrzeb | - | Not started |

 ## Completed Milestones

--- a/.paul/STATE.md
+++ b/.paul/STATE.md
@@ -5,19 +5,19 @@
 See: .paul/PROJECT.md (updated 2026-03-28)

 **Core value:** Sprzedawca moze obslugiwac zamowienia ze wszystkich kanalow sprzedazy i nadawac przesylki bez przelaczania sie miedzy platformami.
-**Current focus:** Milestone v2.3 completed; ready for next PLAN / next milestone
+**Current focus:** Milestone v3.0 Mobile Responsive — Phase 52 (Mobile Main Menu) planning

 ## Current Position

-Milestone: v2.3 Email HTML Layout - Complete
-Phase: 1 of 1 (51 - Email HTML Layout) — Complete
-Plan: 51-01 complete
-Status: Loop complete - ready for next PLAN
-Last activity: 2026-03-28 — UNIFY closed for 51-01, SUMMARY created
+Milestone: v3.0 Mobile Responsive — In progress
+Phase: 1 of N (52 - Mobile Main Menu) — Complete
+Plan: 52-01 complete
+Status: Loop complete — phase 52 done, ready for next PLAN
+Last activity: 2026-03-29 — UNIFY closed for 52-01

 Progress:
- Milestone: [##########] 100%
- Phase 51: [##########] 100%
+- Milestone: [#░░░░░░░░░] ~10%
+- Phase 52: [##########] 100%

 ## Loop Position

@@ -29,24 +29,21 @@ PLAN ──▶ APPLY ──▶ UNIFY

 ## Session Continuity

-Last session: 2026-03-28
-Stopped at: Phase 51 complete, milestone v2.3 complete
-Next action: Uruchom /paul:milestone (lub /paul:plan) dla kolejnego celu
-Resume file: .paul/phases/51-email-html-layout/51-01-SUMMARY.md
+Last session: 2026-03-29
+Stopped at: Phase 52 complete
+Next action: /paul:plan dla kolejnego modulu mobilnego (np. lista zamowien)
+Resume file: .paul/phases/52-mobile-main-menu/52-01-SUMMARY.md

 ## Accumulated Context

 ### Decisions
 | Date | Decision | Impact |
 |------|----------|--------|
-| 2026-03-28 | Header/footer HTML na poziomie skrzynki (nie szablonu) | Spojny branding bez duplikacji w kazdym szablonie |
-| 2026-03-28 | Quill.js z ograniczonym toolbar (email-safe) zamiast MJML/dedykowanego buildera | Prostota; brak build pipeline w projekcie |
-| 2026-03-28 | Zmienne resolver dziala tez w header/footer | Mozliwosc uzycia {{firma.nazwa}} w naglowku |
-| 2026-03-28 | Tryb HTML source omija Quill — surowy HTML zachowany | Wklejanie gotowych szablonow email bez sanityzacji |
-| 2026-03-28 | Auto-detekcja rich HTML przy ladowaniu edytora | Edytor startuje w source mode jesli HTML zawiera div+style/table |
+| 2026-03-29 | Mobile menu jako slide-in overlay (nie horizontal scroll) | Pelna nawigacja na mobile bez kompromisow |
+| 2026-03-29 | Hamburger w topbarze, sidebar fixed z transform slide | Plynna animacja CSS, zero zaleznosci JS |

 ## Git State

-Last commit: 572643a
+Last commit: cbc2058
 Branch: main
 Feature branches merged: none
--- a/.paul/phases/52-mobile-main-menu/52-01-PLAN.md
+++ b/.paul/phases/52-mobile-main-menu/52-01-PLAN.md
@@ -0,0 +1,209 @@
+---
+phase: 52-mobile-main-menu
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - resources/views/layouts/app.php
+  - resources/scss/app.scss
+  - public/assets/css/app.css
+autonomous: false
+---
+
+<objective>
+## Goal
+Zamiana obecnego sidebara na pelnoekranowe menu mobilne z hamburgerem, overlay i plynnym otwieraniem/zamykaniem na urzadzeniach <= 768px.
+
+## Purpose
+Obecne menu na mobile jest nieuzywalne — sidebar staje sie horyzontalnym paskiem z overflow-x, ktory nie miesci wszystkich linkow i wymaga przewijania. Uzytkownicy mobilni nie moga sprawnie nawigowac po aplikacji.
+
+## Output
+- Hamburger button w topbarze (widoczny tylko na mobile)
+- Sidebar jako fullscreen overlay z animacja slide-in z lewej
+- Zamykanie przez X, tap na overlay lub nawigacje do linku
+- Zachowanie pelnej struktury menu (grupy, sublinki)
+</objective>
+
+<context>
+## Project Context
+@.paul/PROJECT.md
+@.paul/ROADMAP.md
+@.paul/STATE.md
+
+## Source Files
+@resources/views/layouts/app.php
+@resources/scss/app.scss
+</context>
+
+<acceptance_criteria>
+
+## AC-1: Hamburger widoczny na mobile
+```gherkin
+Given urzadzenie z szerokosc viewportu <= 768px
+When strona sie laduje
+Then w topbarze widoczny jest przycisk hamburger (3 kreski)
+And sidebar jest domyslnie ukryty
+```
+
+## AC-2: Otwarcie menu
+```gherkin
+Given menu mobilne jest zamkniete
+When uzytkownik klika hamburger
+Then sidebar wysuwa sie z lewej strony jako fullscreen overlay
+And tlo jest przyciemnione (backdrop)
+And body nie scrolluje sie pod overlayem
+```
+
+## AC-3: Zamkniecie menu
+```gherkin
+Given menu mobilne jest otwarte
+When uzytkownik klika X lub backdrop lub link w menu
+Then menu zamyka sie z animacja
+And body odzyskuje scroll
+```
+
+## AC-4: Desktop bez zmian
+```gherkin
+Given urzadzenie z szerokosc viewportu > 768px
+When strona sie laduje
+Then sidebar wyglada i dziala identycznie jak dotychczas
+And hamburger nie jest widoczny
+```
+
+</acceptance_criteria>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Hamburger button + mobile JS w app.php</name>
+  <files>resources/views/layouts/app.php</files>
+  <action>
+    1. Dodaj przycisk hamburger w topbarze (przed div z nazwa uzytkownika):
+       - Klasa: `.topbar__hamburger`
+       - SVG 3 kreski (24x24), display: none na desktop
+       - aria-label="Otworz menu"
+
+    2. Dodaj backdrop div po sidebar: `<div class="sidebar-backdrop" id="js-sidebar-backdrop"></div>`
+
+    3. W bloku `<script>` na dole dodaj logike mobile menu:
+       - Klik hamburger -> sidebar.classList.add('is-mobile-open'), backdrop show, body overflow hidden
+       - Klik backdrop -> zamknij
+       - Klik X (collapse-btn na mobile pelni role X) -> zamknij
+       - Klik na sidebar__link / sidebar__sublink -> zamknij (nawigacja)
+       - Funkcja closeMobileMenu() wydzielona
+       - Detekcja mobile: window.matchMedia('(max-width: 768px)')
+
+    Unikaj: addEventListener na kazdym renderze (uzyj jednorazowego IIFE)
+  </action>
+  <verify>Otworz strone na urzadzeniu/emulatorze mobilnym, hamburger widoczny, klik otwiera sidebar overlay, klik backdrop/link zamyka</verify>
+  <done>AC-1, AC-2, AC-3 satisfied</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Mobile menu SCSS — overlay, animacje, hamburger</name>
+  <files>resources/scss/app.scss</files>
+  <action>
+    1. Zastap obecny blok `@media (max-width: 768px)` nowa wersja:
+
+    Hamburger (`.topbar__hamburger`):
+    - display: none na desktop
+    - display: flex na mobile (w media query)
+    - 36x36px, transparent bg, border none, kolor ikony currentColor
+
+    Sidebar na mobile:
+    - position: fixed, top: 0, left: 0, bottom: 0
+    - width: 280px (nie 100%)
+    - transform: translateX(-100%) domyslnie
+    - transition: transform 0.25s ease
+    - z-index: 1000
+    - &.is-mobile-open { transform: translateX(0) }
+    - Zachowaj obecny ciemny styl (#111a28)
+    - overflow-y: auto (scroll dla dlugiego menu)
+
+    Backdrop (`.sidebar-backdrop`):
+    - display: none domyslnie
+    - Na mobile: position: fixed, inset: 0, background rgba(0,0,0,0.5)
+    - z-index: 999
+    - &.is-visible { display: block }
+    - transition: opacity 0.25s
+
+    Sidebar__nav na mobile:
+    - Powrot do display: grid (pionowo), nie flex horizontal
+    - Usun overflow-x: auto
+
+    Sidebar__collapse-btn na mobile:
+    - Wyswietl jako przycisk X (zamknij) zamiast ukrywania
+    - Obrot ikony 180deg (strzalka w prawo = zamknij)
+
+    2. Zachowaj wszystkie pozostale regusy z obecnego media query (settings-grid, page-head, orders-stats itd.)
+
+    Unikaj: !important (usun obecne !important z .sidebar width)
+  </action>
+  <verify>Resize okna przegladarki do <= 768px — sidebar ukryty, hamburger widoczny, slide-in dziala, desktop bez zmian</verify>
+  <done>AC-1, AC-2, AC-3, AC-4 satisfied</done>
+</task>
+
+<task type="auto">
+  <name>Task 3: Build CSS</name>
+  <files>public/assets/css/app.css</files>
+  <action>
+    Skompiluj SCSS do CSS. Jezeli brak SASS compiler w srodowisku, skopiuj wynikowy CSS odpowiadajacy zmianom SCSS do pliku wynikowego.
+  </action>
+  <verify>Porownaj app.css z app.scss — zmiany media query obecne w wynikowym CSS</verify>
+  <done>Plik CSS aktualny z SCSS</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Menu mobilne z hamburgerem, overlay sidebar, animacja slide-in</what-built>
+  <how-to-verify>
+    1. Otworz aplikacje w przegladarce
+    2. Wlacz DevTools > Device Toolbar (Ctrl+Shift+M) > wybierz iPhone 14 lub 375px
+    3. Sprawdz: hamburger widoczny w topbarze, sidebar ukryty
+    4. Kliknij hamburger — sidebar wysuwa sie z lewej z backdrop
+    5. Kliknij backdrop — menu sie zamyka
+    6. Otworz ponownie, kliknij link "Zamowienia" — nawigacja + menu sie zamyka
+    7. Przelacz na desktop (> 768px) — sidebar normalny, bez hamburgera
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<boundaries>
+
+## DO NOT CHANGE
+- resources/views/layouts/auth.php (layout logowania osobny)
+- resources/scss/shared/_ui-components.scss (zmienne CSS nietykane)
+- resources/scss/modules/* (moduly SCSS osobne)
+- Logika collapse/localStorage na desktop (zachowac w calosci)
+
+## SCOPE LIMITS
+- Tylko menu glowne (sidebar + topbar) — zadne inne moduly mobilne
+- Nie zmieniaj struktury HTML menu (kolejnosc linkow, klasy is-active)
+- Nie dodawaj nowych zaleznosci JS (vanilla JS only)
+
+</boundaries>
+
+<verification>
+Before declaring plan complete:
+- [ ] Hamburger widoczny na <= 768px, ukryty na desktop
+- [ ] Sidebar slide-in z lewej z animacja
+- [ ] Backdrop przyciemnia tlo i zamyka menu na klik
+- [ ] Klik na link zamyka menu
+- [ ] Body nie scrolluje pod overlayem
+- [ ] Desktop layout identyczny jak przed zmianami
+- [ ] Collapse button na desktop dziala jak dotychczas
+- [ ] Brak bledow JS w konsoli
+</verification>
+
+<success_criteria>
+- Wszystkie 4 acceptance criteria spelnione
+- Menu mobilne uzywalne na ekranach 320px-768px
+- Animacje plynne (CSS transitions, nie JS)
+- Zero regresji na desktop
+</success_criteria>
+
+<output>
+After completion, create `.paul/phases/52-mobile-main-menu/52-01-SUMMARY.md`
+</output>
--- a/.paul/phases/52-mobile-main-menu/52-01-SUMMARY.md
+++ b/.paul/phases/52-mobile-main-menu/52-01-SUMMARY.md
@@ -0,0 +1,111 @@
+---
+phase: 52-mobile-main-menu
+plan: 01
+subsystem: ui
+tags: [mobile, responsive, sidebar, hamburger, css-animation]
+
+requires:
+  - phase: none
+    provides: n/a
+provides:
+  - Mobile-friendly main menu with hamburger toggle and slide-in overlay sidebar
+affects: [mobile-orders-list, mobile-order-details, mobile-settings]
+
+tech-stack:
+  added: []
+  patterns: [mobile-overlay-sidebar, hamburger-toggle, css-transform-slide, backdrop-overlay]
+
+key-files:
+  created: []
+  modified:
+    - resources/views/layouts/app.php
+    - resources/scss/app.scss
+    - public/assets/css/app.css
+
+key-decisions:
+  - "Slide-in overlay (280px) zamiast horizontal scroll — pelna nawigacja na mobile"
+  - "Collapse button na mobile dziala jako X (zamknij) — reuse istniejacego elementu"
+  - "Vanilla JS matchMedia — zero nowych zaleznosci"
+
+patterns-established:
+  - "Mobile overlay pattern: fixed sidebar + backdrop + body.no-scroll + is-mobile-open class"
+  - "Hamburger w topbarze: .topbar__hamburger ukryty na desktop, widoczny na mobile"
+
+duration: ~15min
+started: 2026-03-29
+completed: 2026-03-29
+---
+
+# Phase 52 Plan 01: Mobile Main Menu Summary
+
+**Slide-in overlay sidebar z hamburgerem na mobile (<=768px) — zastapienie niedzialajacej nawigacji horyzontalnej**
+
+## Performance
+
+| Metric | Value |
+|--------|-------|
+| Duration | ~15min |
+| Started | 2026-03-29 |
+| Completed | 2026-03-29 |
+| Tasks | 4 completed (3 auto + 1 checkpoint) |
+| Files modified | 3 |
+
+## Acceptance Criteria Results
+
+| Criterion | Status | Notes |
+|-----------|--------|-------|
+| AC-1: Hamburger widoczny na mobile | Pass | Przycisk 36x36 w topbarze, display:flex na <=768px |
+| AC-2: Otwarcie menu | Pass | Slide-in z lewej (280px), backdrop, body scroll lock |
+| AC-3: Zamkniecie menu | Pass | X / backdrop / link click — wszystkie zamykaja |
+| AC-4: Desktop bez zmian | Pass | Sidebar i collapse dzialaja identycznie |
+
+## Accomplishments
+
+- Hamburger button w topbarze z SVG ikonka (widoczny tylko na mobile)
+- Sidebar jako fixed overlay 280px z CSS transform slide-in (0.25s ease)
+- Backdrop overlay z rgba(0,0,0,0.5) zamykajacy menu na klik
+- Body scroll lock (class no-scroll) gdy menu otwarte
+- Collapse button pelni role X na mobile (ikona obrocona 180deg)
+- Zamykanie menu przy kliknieciu linku nawigacyjnego
+- Reset stanu przy resize do desktop (matchMedia change listener)
+
+## Files Created/Modified
+
+| File | Change | Purpose |
+|------|--------|---------|
+| `resources/views/layouts/app.php` | Modified | Hamburger button, backdrop div, mobile JS logic |
+| `resources/scss/app.scss` | Modified | Nowe klasy mobile (hamburger, backdrop, overlay sidebar), zastapienie starego media query |
+| `public/assets/css/app.css` | Modified | Kompilacja SCSS |
+
+## Decisions Made
+
+| Decision | Rationale | Impact |
+|----------|-----------|--------|
+| Sidebar 280px fixed zamiast 100% fullscreen | Widoczny kontekst strony za menu, lepszy UX | Naturalny pattern znany z aplikacji mobilnych |
+| Reuse collapse-btn jako X na mobile | Mniej nowych elementow HTML, istniejacy SVG strzalki obraca sie | Jednoczesnie zachowany collapse na desktop |
+| Usuniecie !important z sidebar width | Czystszy CSS, nie koliduje z fixed positioning | Latwiejsze utrzymanie |
+
+## Deviations from Plan
+
+None — plan executed exactly as written
+
+## Issues Encountered
+
+None
+
+## Next Phase Readiness
+
+**Ready:**
+- Layout mobilny dziala — sidebar, topbar, container dostosowane
+- Pattern mobile overlay gotowy do reuse w przyszlych modulach
+- Wszystkie istniejace mobile overrides (gridy, formularze) zachowane
+
+**Concerns:**
+- Kolejne moduly (lista zamowien, szczegoly, ustawienia) wymagaja osobnych planow mobilnych
+
+**Blockers:**
+- None
+
+---
+*Phase: 52-mobile-main-menu, Plan: 01*
+*Completed: 2026-03-29*