Jacek Pyziak
1c87489824
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>
112 lines
3.7 KiB
Markdown
112 lines
3.7 KiB
Markdown
---
|
|
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*
|