orderPRO/.paul/phases/52-mobile-main-menu/52-01-PLAN.md

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