orderPRO/.paul/phases/55-desktop-collapsed-sidebar-fix/55-01-PLAN.md

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