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

phase, plan, type, wave, depends_on, files_modified, autonomous

phase	plan	type	wave	depends_on	files_modified	autonomous
52-mobile-main-menu	01	execute	1		resources/views/layouts/app.php resources/scss/app.scss public/assets/css/app.css	false

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

## Project Context @.paul/PROJECT.md @.paul/ROADMAP.md @.paul/STATE.md

Source Files

@resources/views/layouts/app.php @resources/scss/app.scss

<acceptance_criteria>

AC-1: Hamburger widoczny na mobile

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

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

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

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>

Task 1: Hamburger button + mobile JS w app.php resources/views/layouts/app.php 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)

Otworz strone na urzadzeniu/emulatorze mobilnym, hamburger widoczny, klik otwiera sidebar overlay, klik backdrop/link zamyka AC-1, AC-2, AC-3 satisfied Task 2: Mobile menu SCSS — overlay, animacje, hamburger resources/scss/app.scss 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)

Resize okna przegladarki do <= 768px — sidebar ukryty, hamburger widoczny, slide-in dziala, desktop bez zmian AC-1, AC-2, AC-3, AC-4 satisfied Task 3: Build CSS public/assets/css/app.css Skompiluj SCSS do CSS. Jezeli brak SASS compiler w srodowisku, skopiuj wynikowy CSS odpowiadajacy zmianom SCSS do pliku wynikowego. Porownaj app.css z app.scss — zmiany media query obecne w wynikowym CSS Plik CSS aktualny z SCSS Menu mobilne z hamburgerem, overlay sidebar, animacja slide-in 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 Type "approved" to continue, or describe issues to fix

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)

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

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

After completion, create `.paul/phases/52-mobile-main-menu/52-01-SUMMARY.md`