fix(55-desktop-collapsed-sidebar-fix): ukrycie etykiet i centrowanie ikon w zwiniętym sidebarze

Zwiniety sidebar (is-collapsed) pokazywal obciete etykiety zamiast czystych ikon. Naprawiono: display:none na labelach/strzalkach/sublinkach, justify-content:center na linkach, ukrycie brand text. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 23:51:24 +02:00
parent 4b38f3e7a6
commit 1f449f84ad
7 changed files with 340 additions and 8 deletions
--- a/.paul/PROJECT.md
+++ b/.paul/PROJECT.md
@@ -63,6 +63,7 @@ Sprzedawca moĹĽe obsĹ‚ugiwaÄ‡ zamĂłwienia ze wszystkich kanaĹ‚Ăłw
 - [x] Mobile Main Menu: hamburger, slide-in overlay sidebar, backdrop na mobile <=768px — Phase 52
 - [x] Mobile Status Panel Toggle: zwijany/rozwijany panel statusow na /orders/list — Phase 53
 - [x] Order Detail Image Hover: hover zoom na miniaturkach produktow w /orders/{id} — Phase 54
+- [x] Desktop Collapsed Sidebar Fix: ukrycie etykiet, centrowanie ikon w zwiniętym sidebarze — Phase 55

 ### Active (In Progress)

--- a/.paul/ROADMAP.md
+++ b/.paul/ROADMAP.md
@@ -15,6 +15,7 @@ Wersja mobilna aplikacji, modul po module. Cel: pelna uzywalnosc orderPRO na tel
 | 52 | Mobile Main Menu | 1/1 | Complete |
 | 53 | Mobile Status Panel Toggle | 1/1 | Complete |
 | 54 | Order Detail Image Hover | 1/1 | Complete |
+| 55 | Desktop Collapsed Sidebar Fix | 1/1 | Complete |
 | TBD | Mobile Orders List | - | Not started |
 | TBD | Mobile Order Details | - | Not started |
 | TBD | Mobile Settings | - | Not started |
--- a/.paul/STATE.md
+++ b/.paul/STATE.md
@@ -10,14 +10,14 @@ See: .paul/PROJECT.md (updated 2026-03-28)
 ## Current Position

 Milestone: v3.0 Mobile Responsive — In progress
-Phase: 3 of N (54 - Order Detail Image Hover) — Complete
-Plan: 54-01 complete
-Status: Loop complete — phase 54 done, ready for next PLAN
-Last activity: 2026-03-29 — UNIFY closed for 54-01
+Phase: 4 of N (55 - Desktop Collapsed Sidebar Fix) — Complete
+Plan: 55-01 complete
+Status: Loop complete — phase 55 done, ready for next PLAN
+Last activity: 2026-03-29 — UNIFY closed for 55-01

 Progress:
- Milestone: [###░░░░░░░] ~30%
- Phase 54: [##########] 100%
+- Milestone: [####░░░░░░] ~40%
+- Phase 55: [##########] 100%

 ## Loop Position

@@ -30,9 +30,9 @@ PLAN ──▶ APPLY ──▶ UNIFY
 ## Session Continuity

 Last session: 2026-03-29
-Stopped at: Phase 54 complete
+Stopped at: Phase 55 complete
 Next action: /paul:plan dla kolejnego modulu
-Resume file: .paul/phases/54-order-detail-image-hover/54-01-SUMMARY.md
+Resume file: .paul/phases/55-desktop-collapsed-sidebar-fix/55-01-SUMMARY.md

 ## Accumulated Context

--- a/.paul/phases/55-desktop-collapsed-sidebar-fix/55-01-PLAN.md
+++ b/.paul/phases/55-desktop-collapsed-sidebar-fix/55-01-PLAN.md
@@ -0,0 +1,180 @@
+---
+phase: 55-desktop-collapsed-sidebar-fix
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - resources/scss/app.scss
+  - public/assets/css/app.css
+autonomous: false
+---
+
+<objective>
+## Goal
+Naprawic wyglad zwinietego sidebara na desktop — ukryc etykiety, wycentrowac ikony, ukryc brand text i strzalki toggle.
+
+## Purpose
+Po zwiniciu menu na desktop (klik collapse button) widac obciete etykiety ("Za...", "K..."), ikony nie sa wycentrowane, brand text wycieka. Sidebar powinien pokazywac tylko ikony wycentrowane w 52px.
+
+## Output
+- Etykiety menu ukryte przy is-collapsed
+- Ikony wycentrowane w zwinionym sidebarze
+- Brand text ukryty, tylko collapse button widoczny
+- Strzalki toggle grup ukryte
+</objective>
+
+<context>
+## Project Context
+@.paul/PROJECT.md
+
+## Source Files
+@resources/scss/app.scss
+</context>
+
+<acceptance_criteria>
+
+## AC-1: Etykiety ukryte
+```gherkin
+Given sidebar zwiniety (is-collapsed) na desktop
+When uzytkownik patrzy na menu
+Then etykiety sa calkowicie ukryte (brak obcietego tekstu)
+And widoczne sa tylko ikony
+```
+
+## AC-2: Ikony wycentrowane
+```gherkin
+Given sidebar zwiniety na desktop
+When uzytkownik patrzy na pozycje menu
+Then ikony sa wycentrowane w 52px szerokosci sidebara
+And aktywny element ma wycentrowany highlight
+```
+
+## AC-3: Brand i strzalki ukryte
+```gherkin
+Given sidebar zwiniety na desktop
+When uzytkownik patrzy na gorna czesc sidebara
+Then brand text "orderPRO" jest ukryty
+And strzalki toggle grup sa ukryte
+And przycisk rozwin jest widoczny i wycentrowany
+```
+
+</acceptance_criteria>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Style is-collapsed w app.scss</name>
+  <files>resources/scss/app.scss</files>
+  <action>
+    Dodaj nowe reguly dla `.sidebar.is-collapsed` po istniejacym bloku (linia ~106):
+
+    ```scss
+    .sidebar.is-collapsed {
+      // juz istnieje: width: 52px; min-width: 52px;
+      padding: 18px 0; // usun boczny padding, ikony centrowane przez justify-content
+
+      .sidebar__brand-text {
+        display: none;
+      }
+
+      .sidebar__brand {
+        justify-content: center;
+        margin: 4px 0 16px;
+      }
+
+      .sidebar__label {
+        display: none;
+      }
+
+      .sidebar__toggle-arrow {
+        display: none;
+      }
+
+      .sidebar__link,
+      .sidebar__group-toggle {
+        justify-content: center;
+        padding: 9px;
+        border-radius: 8px;
+        margin: 0 6px;
+      }
+
+      .sidebar__sublink {
+        display: none;
+      }
+
+      .sidebar__group-links {
+        display: none;
+      }
+
+      .sidebar__icon {
+        margin: 0;
+      }
+    }
+    ```
+
+    Unikaj: usuwania istniejacego `.sidebar.is-collapsed` — rozszerz go o nowe wlasciwosci
+  </action>
+  <verify>Sidebar zwiniety pokazuje tylko wycentrowane ikony, brak obcietego tekstu</verify>
+  <done>AC-1, AC-2, AC-3 satisfied</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Build CSS</name>
+  <files>public/assets/css/app.css</files>
+  <action>
+    Skompiluj SCSS: npx sass resources/scss/app.scss public/assets/css/app.css --no-source-map
+  </action>
+  <verify>Nowe reguly is-collapsed obecne w wynikowym CSS</verify>
+  <done>CSS aktualny</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Poprawiony wyglad zwinietego sidebara na desktop</what-built>
+  <how-to-verify>
+    1. Otworz https://orderpro.projectpro.pl/ i zaloguj sie
+    2. Kliknij przycisk zwiniecia menu (strzalka w lewo)
+    3. Sprawdz: widoczne tylko ikony, wycentrowane w 52px
+    4. Brak obcietego tekstu, brak strzalek, brak brand text
+    5. Kliknij rozwin — menu wraca do pelnej szerokosci z etykietami
+    6. Najedz na ikone w zwinionym menu — tooltip lub rozwinięcie
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<boundaries>
+
+## DO NOT CHANGE
+- Wyglad rozwinietego sidebara (260px)
+- Zachowanie mobile (hamburger, overlay)
+- Logika JS collapse/expand
+- resources/views/layouts/app.php
+
+## SCOPE LIMITS
+- Tylko style CSS dla is-collapsed
+- Nie zmieniaj struktury HTML
+
+</boundaries>
+
+<verification>
+Before declaring plan complete:
+- [ ] Zwiniety sidebar: tylko ikony, wycentrowane
+- [ ] Brak obcietego tekstu
+- [ ] Brand text ukryty
+- [ ] Strzalki toggle ukryte
+- [ ] Sublinki ukryte
+- [ ] Rozwiniety sidebar: bez zmian
+- [ ] Mobile: bez zmian
+</verification>
+
+<success_criteria>
+- Wszystkie 3 acceptance criteria spelnione
+- Zwiniety sidebar wyglada czysto — tylko ikony
+- Zero regresji na rozwinietym sidebarze i mobile
+</success_criteria>
+
+<output>
+After completion, create `.paul/phases/55-desktop-collapsed-sidebar-fix/55-01-SUMMARY.md`
+</output>
--- a/.paul/phases/55-desktop-collapsed-sidebar-fix/55-01-SUMMARY.md
+++ b/.paul/phases/55-desktop-collapsed-sidebar-fix/55-01-SUMMARY.md
@@ -0,0 +1,89 @@
+---
+phase: 55-desktop-collapsed-sidebar-fix
+plan: 01
+subsystem: ui
+tags: [sidebar, collapsed, desktop, css-fix]
+
+requires:
+  - phase: 52-mobile-main-menu
+    provides: mobile sidebar overlay
+provides:
+  - Clean collapsed sidebar on desktop with icon-only display
+affects: []
+
+tech-stack:
+  added: []
+  patterns: []
+
+key-files:
+  created: []
+  modified:
+    - resources/scss/app.scss
+    - public/assets/css/app.css
+
+key-decisions:
+  - "display:none na labelach/strzalkach zamiast overflow clip — czyste ukrycie"
+  - "justify-content:center + margin 0 6px na linkach — centrowanie ikon"
+
+patterns-established: []
+
+duration: ~5min
+started: 2026-03-29
+completed: 2026-03-29
+---
+
+# Phase 55 Plan 01: Desktop Collapsed Sidebar Fix Summary
+
+**Naprawa zwinietego sidebara na desktop — ukrycie etykiet, centrowanie ikon, czysty wyglad icon-only**
+
+## Performance
+
+| Metric | Value |
+|--------|-------|
+| Duration | ~5min |
+| Started | 2026-03-29 |
+| Completed | 2026-03-29 |
+| Tasks | 3 completed (2 auto + 1 checkpoint) |
+| Files modified | 2 |
+
+## Acceptance Criteria Results
+
+| Criterion | Status | Notes |
+|-----------|--------|-------|
+| AC-1: Etykiety ukryte | Pass | display:none na .sidebar__label |
+| AC-2: Ikony wycentrowane | Pass | justify-content:center + margin 0 6px |
+| AC-3: Brand i strzalki ukryte | Pass | display:none na brand-text, toggle-arrow, group-links |
+
+## Accomplishments
+
+- Etykiety menu ukryte (display:none zamiast overflow clip)
+- Ikony wycentrowane w 52px z margin 0 6px
+- Brand text ukryty, collapse button wycentrowany
+- Strzalki toggle grup ukryte
+- Sublinki i group-links ukryte przy collapse
+- Padding boczny usuniety (padding: 18px 0)
+
+## Files Created/Modified
+
+| File | Change | Purpose |
+|------|--------|---------|
+| `resources/scss/app.scss` | Modified | Rozszerzenie .sidebar.is-collapsed o ukrywanie elementow |
+| `public/assets/css/app.css` | Modified | Kompilacja SCSS |
+
+## Deviations from Plan
+
+None — plan executed exactly as written
+
+## Issues Encountered
+
+None
+
+## Next Phase Readiness
+
+**Ready:** Sidebar desktop dziala poprawnie w obu stanach
+**Concerns:** None
+**Blockers:** None
+
+---
+*Phase: 55-desktop-collapsed-sidebar-fix, Plan: 01*
+*Completed: 2026-03-29*
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -801,6 +801,33 @@ a {
 .sidebar.is-collapsed {
  width: 52px;
  min-width: 52px;
+  padding: 18px 0;
+}
+.sidebar.is-collapsed .sidebar__brand-text {
+  display: none;
+}
+.sidebar.is-collapsed .sidebar__brand {
+  justify-content: center;
+  margin: 4px 0 16px;
+}
+.sidebar.is-collapsed .sidebar__label {
+  display: none;
+}
+.sidebar.is-collapsed .sidebar__toggle-arrow {
+  display: none;
+}
+.sidebar.is-collapsed .sidebar__link,
+.sidebar.is-collapsed .sidebar__group-toggle {
+  justify-content: center;
+  padding: 9px;
+  border-radius: 8px;
+  margin: 0 6px;
+}
+.sidebar.is-collapsed .sidebar__group-links {
+  display: none;
+}
+.sidebar.is-collapsed .sidebar__icon {
+  margin: 0;
 }

 .sidebar__brand {
--- a/resources/scss/app.scss
+++ b/resources/scss/app.scss
@@ -48,6 +48,40 @@ a {
 .sidebar.is-collapsed {
  width: 52px;
  min-width: 52px;
+  padding: 18px 0;
+
+  .sidebar__brand-text {
+    display: none;
+  }
+
+  .sidebar__brand {
+    justify-content: center;
+    margin: 4px 0 16px;
+  }
+
+  .sidebar__label {
+    display: none;
+  }
+
+  .sidebar__toggle-arrow {
+    display: none;
+  }
+
+  .sidebar__link,
+  .sidebar__group-toggle {
+    justify-content: center;
+    padding: 9px;
+    border-radius: 8px;
+    margin: 0 6px;
+  }
+
+  .sidebar__group-links {
+    display: none;
+  }
+
+  .sidebar__icon {
+    margin: 0;
+  }
 }

 .sidebar__brand {