Przechowywanie informacji o tym czy boczny sidebar jest zwinięty czy rozwinięty w LocalStorage
1. Przeglądarka ładuje stronę → serwer zwraca HTML ze strukturą #layout-wrapper + .app-sidebar (sidebar zawsze jest w HTML, bez
żadnej klasy)
2. JavaScript odpala się po załadowaniu (main.js):
function initSidebar() {
if (!isMobile() && localStorage.getItem('crm_sidebar_collapsed') === '1') {
$('body').addClass('sidebar-collapsed');
}
}
initSidebar();
Czyta localStorage i jeśli było '1' — natychmiast dodaje klasę do .
3. CSS reaguje na klasę:
body.sidebar-collapsed .app-sidebar { transform: translateX(-250px); }
body.sidebar-collapsed .main-content { margin-left: 0; }
Sidebar znika, content się rozszerza.
4. Kliknięcie toggle:
$('body').toggleClass('sidebar-collapsed');
localStorage.setItem('crm_sidebar_collapsed',
$('body').hasClass('sidebar-collapsed') ? '1' : '0');
Przełącza klasę + zapisuje stan do localStorage.
---
Praktyczna konsekwencja: jest krótki flash przy ładowaniu strony — HTML pojawia się z sidebarem widocznym, dopiero po uruchomieniu JS
sidebar się zwija. Gdyby stan był w sesji PHP, serwer mógłby od razu renderować odpowiednią klasę w i tego flash'a by nie
było. Warto to mieć na uwadze jeśli będzie przeszkadzać.