I am currently in the process of developing an admin panel for my website. I have a sidebar menu that I would like to hide behind a hamburger icon and only expand when clicked on. After researching potential solutions, I haven't found much that fits my needs. That's why I'm reaching out to you guys for help with this issue. My sidebar menu is structured using flexbox with the following code:
.sidebar{
@include flexbox();
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
text-align: center;
flex: 0 0 18%;
min-height: 100%;
margin: 0;
background-color: $oc-gray-9;
a{
display: block;
width: 87.25%;
text-align: left;
padding-left: 5vh;
text-decoration: none;
color: $oc-gray-6;
font-weight: bold;
text-transform: uppercase;
line-height: 10vh;
font-family: CaviarDreams;
font-size: 1.15vw;
}
a:hover{
background-color: $oc-red-9;
color: $oc-gray-2;
.menu-img {
opacity: 1;
}
}
.logo-img{
width: 90%;
height: auto;
}
.menu-img {
width: 7%;
height: auto;
}
}
The corresponding HTML looks like this:
<div class="sidebar">
<img src="logo.png" class="logo-img">
<a class="hvr-fade" href="index.php"><img src="dash.png" class="menu-img"> Dashboard</a>
Other code here....
</div>
Is there any guidance or suggestions you can provide on how I can achieve this functionality?
Thank you.