In order to achieve the desired effect of making the text from menu and logo disappear when minimizing the menu, you can use the following approach:
Create a function called `smallNav()` to handle the resizing of the sidebar container:
function smallNav() {
let menu = document.getElementById('sidebar-container');
menu.style.width = "5rem";
}Then, style the elements using CSS to include transitions and animations for a smoother visual effect:
.router-link-active {
background-color: #2b445f;
font-weight: 700;
border-left: 3px solid #1089ff;
}
#right, .left {
cursor: pointer;
}
#sidebar-container {
min-height: 100vh;
transition: 400ms;
bottom: 0;
width: 18rem;
background: #23374d;
}
#sidebar-small {
min-height: 100vh;
transition: 400ms;
bottom: 0;
width: 0px;
background: #23374d;
}
/* Additional styles go here */