Как исправить схлопывание боковой панели? ⇐ CSS

[Anonymous]

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

Ошибка: значок меню находится за пределами панели навигации, а боковая панель не работает при сворачивании экрана после сворачивания, как пустое место на экране, как показано на снимке экрана.
















Dashboard







Terms of Service




Privacy Policy




Cookies Policy






:root {
--ff-inter: Inter, sans-serif;
--background-color: hsl(0, 0%, 98%); /* #f9f9f9 */
--sec-color: hsl(240, 3%, 93%); /* #ededee */
--input-background: hsl(0, 0%, 98%); /* #f9f9f9 */
--default-color: hsl(240, 13%, 13%); /* #1d1d26 */
--white-color: hsl(0, 0%, 100%); /* WHITE */
--gray-color: hsl(0, 0%, 50%); /* GRAY */
--hover-color: hsl(240, 2%, 89%); /* #e3e3e4 */
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}

body {
color: var(--default-color);
font-family: var(--ff-inter);
background-color: var(--background-color);
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
letter-spacing: -0.28px;
font-weight: 500;
line-height: 140%;
font-size: 14px;
}

.link:actie {
outline: 0;
}



document.addEventListener("DOMContentLoaded", function() {
const sidebar = document.querySelector(".dashboard-sidebar");
const spacer = document.querySelector(".sidebar-spacer");
const chevronIcon = document.querySelector("ion-icon[name='chevron-back-outline']");
const sidebarLinks = document.querySelectorAll(".sidebar-link");
const sidebarLinkTexts = document.querySelectorAll(".sidebar-link-text");
const sidebarLogo = document.querySelector(".dashboard-logo");
// Event listener for clicking on the chevron icon to toggle sidebar
chevronIcon.addEventListener("click", function() {
sidebar.classList.toggle("collapsed");
if (sidebar.classList.contains("collapsed")) {
spacer.style.width = "75px";
sidebar.style.width = "75px";
// Hide text labels
sidebarLinkTexts.forEach(function(linkText) {
linkText.style.display = "none";
});
// Hide sidebar logo when collapsed
sidebarLogo.style.visibility = "hidden";
chevronIcon.setAttribute("name", "chevron-forward-outline");
} else {
spacer.style.width = "220px";
sidebar.style.width = "220px";
// Show text labels
sidebarLinkTexts.forEach(function(linkText) {
linkText.style.display = "inline-block";
});
// Show sidebar logo when expanded
sidebarLogo.style.visibility = "visible";
// Change chevron icon to back when sidebar is expanded
chevronIcon.setAttribute("name", "chevron-back-outline");
}
});
});



Подробнее здесь: https://stackoverflow.com/questions/781 ... d-collapse