Как заблокировать меню боковой панели, скрытое при обновлении страницы

У меня есть меню боковой панели, которое было успешно скрыто и отображено. Когда меню боковой панели скрыто и я обновляю страницу или браузер, скрытое меню боковой панели вернется к своему первоначальному виду, а не в том положении, в котором оно было скрыто. Вопрос в том, как заблокировать, чтобы отображение меню боковой панели оставалось в скрытом положении. Я несколько раз пробовал использовать javascript, но все равно не смог. Пожалуйста, помогите, спасибо.

.sidebar {
height: 100%;
width: 250px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
background-color: var(--sidebar-color);
color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: all 0.5s ease;
overflow-y: auto;
/* hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none;
scrollbar-width: none;

}

.sidebar.expand {
width: 65px;

}

var btnToggle = document.querySelector("#btnToggle");
var sidebar = document.querySelector(".sidebar");

btnToggle.onclick = function() {
    sidebar.classList.toggle("expand");

}

введите описание изображения здесь

при обновлении страницы

Всего 1 ответ


Если вы хотите, чтобы он был постоянным, вам нужно использовать localStorage для сохранения состояния боковой панели. Затем, когда страница перезагружается, вы можете прочитать состояние из localStorage и соответственно установить класс на боковой панели.

Непроверенный код ниже:

var btnToggle = document.querySelector("#btnToggle");
var sidebar = document.querySelector(".sidebar");

// When the page loads, use localStorage to set the initial class

if(localStorage.getItem("expand") && localStorage.getItem("expand") == "true"){
  sidebar.classList.add("expand");
}

btnToggle.onclick = function() {
  sidebar.classList.toggle("expand");
  localStorage.setItem("expand", sidebar.classList.contains("expand"));
}

Я создал minimal code pen, чтобы проиллюстрировать, как это работает. Я также включил анимацию, которую вы упомянули в комментариях.


Есть идеи?

10000