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

Files

Jacek Pyziak 1f449f84ad 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

4.5 KiB

Raw Blame History

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

phase

plan

type

wave

depends_on

files_modified

autonomous

55-desktop-collapsed-sidebar-fix

execute

resources/scss/app.scss

public/assets/css/app.css

false

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

## Project Context @.paul/PROJECT.md

Source Files

@resources/scss/app.scss

<acceptance_criteria>

AC-1: Etykiety ukryte

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

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

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>

Task 1: Style is-collapsed w app.scss resources/scss/app.scss 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

Sidebar zwiniety pokazuje tylko wycentrowane ikony, brak obcietego tekstu AC-1, AC-2, AC-3 satisfied Task 2: Build CSS public/assets/css/app.css Skompiluj SCSS: npx sass resources/scss/app.scss public/assets/css/app.css --no-source-map Nowe reguly is-collapsed obecne w wynikowym CSS CSS aktualny Poprawiony wyglad zwinietego sidebara na desktop 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 Type "approved" to continue, or describe issues to fix

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

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

<success_criteria>

Wszystkie 3 acceptance criteria spelnione
Zwiniety sidebar wyglada czysto — tylko ikony
Zero regresji na rozwinietym sidebarze i mobile </success_criteria>

After completion, create `.paul/phases/55-desktop-collapsed-sidebar-fix/55-01-SUMMARY.md`

4.5 KiB Raw Blame History