I have a sidebar that shows and hides content depending on the collapse status.
Here is a LIVE JS FIDDLE
Instead of using icons, I would like to use SVG images but if I use SVG images there is a jumpy effect during the transition and the SVG disappears when the sidebar is closed.
What I've tried:
.sidebar.close .nav-links li a .sidebarSvg{
opacity: 1;
}
I thought changing the opacity to 1 would do the job but I am doing something wrong.
I also tried with display: block; but it did not work.
Is my SVG wrong?
UPDATE:
I also tried placing the svg outside of the <a> but that makes the jumpy effect worst during the toggle transition.
CodePudding user response：
try this :
.sidebar.close .nav-links li .iocn-link {
width:300px;
}
Now You can try thsi :
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i ) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow
arrowParent.classList.toggle("showMenu");
});
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
console.log(sidebarBtn);
sidebarBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("close");
});@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.sidebarSvg{
margin-left: 15px;
margin-right: 15px;
}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 290px;
background: #193D4C;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.close{
width: 78px;
}
.sidebar .logo-details{
height: 60px;
width: 100%;
display: flex;
align-items: center;
}
.logo-icon{
margin-left: 15px;
}
.sidebar .logo-details i{
font-size: 30px;
color: #fff;
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
}
.sidebar .logo-details .logo_name{
font-size: 22px;
color: #fff;
font-weight: 600;
transition: 0.3s ease;
transition-delay: 0.1s;
margin-left:20px;
}
.sidebar.close .logo-details .logo_name{
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links{
height: 100%;
padding: 30px 0 150px 0;
overflow: auto;
}
.sidebar.close .nav-links{
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
display: none;
}
.sidebar .nav-links li{
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
background: #193D4C;
}
.sidebar .nav-links li .iocn-link{
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
display: block;
}
.sidebar .nav-links li i{
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow{
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
display: none;
}
.sidebar .nav-links li a{
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar .nav-links li a .link_name{
font-size: 18px;
font-weight: 400;
color: #fff;
transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: #193D4C;
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar .nav-links li .sub-menu a{
color: #fff;
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank{
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details{
position: fixed;
bottom: 0;
width: 290px;
display: flex;
align-items: center;
justify-content: space-between;
background: #1d1b31;
padding: 12px 0;
transition: all 0.5s ease;
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.sidebar .profile-details .profile-content{
display: flex;
align-items: center;
}
.sidebar .profile-details img{
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: #1d1b31;
transition: all 0.5s ease;
}
.sidebar.close .profile-details img{
padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
color: #fff;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.sidebar .profile-details .job{
font-size: 12px;
}
.home-section{
position: relative;
background: #E4E9F7;
height: 100vh;
left: 290px;
width: calc(100% - 260px);
transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
left: 78px;
width: calc(100% - 78px);
}
.home-section .home-content{
height: 60px;
display: flex;
align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text{
color: #11101d;
font-size: 35px;
}
.home-section .home-content .bx-menu{
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
.userInitials {
height: 38px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
text-align: center;
vertical-align: middle;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: white;
color: #193D4C;
font-weight: 600;
margin-bottom: 20px;
margin-left: 20px;
}
@media (max-width: 420px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
}
.dont-break {
min-width: 100%;
white-space: nowrap;
overflow: hidden;
}
.centered-profile {
display:inline-block;
}
.staff-position{
font-size: small !important;
margin-top: 40px !important;
}
.staff-nav-holder {
margin-left: 20px;
}
.sidebar.close .nav-links li .iocn-link {
width:300px;
}<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/CodingLabYT-->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- Boxiocns CDN Link -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar close">
<div class="logo-details">
<div class="logo-icon"><svg xmlns="http://www.w3.org/2000/svg" width="43.878" height="44.07" viewBox="0 0 43.878 44.07">
<g id="g110" transform="translate(24.953 4.408)">
<path id="path4" d="M-8.04,26.725A10.416,10.416,0,0,1-12.112,12.6,10.437,10.437,0,0,1,.23,7.767L4.939-3.049a22.3,22.3,0,0,0-28.5,13.106A22.166,22.166,0,0,0-12.748,37.54Z" fill="#f8e3a9"/>
<path id="path6" d="M6.523-2.315,1.815,8.5A10.417,10.417,0,0,1,5.887,22.623,10.438,10.438,0,0,1-6.455,27.459l-4.708,10.815a22.3,22.3,0,0,0,28.5-13.1A22.117,22.117,0,0,0,6.523-2.315" transform="translate(0.196 0.03)" fill="#f8e3a9"/>
<path id="path8" d="M-3.265,8.85a8.525,8.525,0,0,1,8.525,8.525A8.525,8.525,0,0,1-3.265,25.9a8.525,8.525,0,0,1-8.525-8.526h0A8.608,8.608,0,0,1-3.265,8.85" transform="translate(0.187 0.189)" fill="#f8e3a9"/>
</g>
</svg>
</div>
<span class="logo_name dont-break">STACKOVERFLOW</span>
</div>
<ul class="nav-links">
<li>
<div class="iocn-link">
<a href="#">
<span class="userInitials">JW</span>
<div class="col-9 staff-nav-holder">
<span class="link_name dont-break centered-profile">John Walker</span>
<span class="link_name staff-position">PM</span>
</div>
</a>
<i class='bx bxs-chevron-down arrow centered-profile' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">John Walker</a></li>
<li><a href="#">Customize your homepage</a></li>
<li><a href="#">Change your password</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<svg class="sidebarSvg" xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" viewBox="0 0 32 32"><g id="icon_layer" data-name="icon layer"><path class="cls-1" d="M20.5,12H16.55a.5.5,0,0,1-.5-.5.5.5,0,0,1,.5-.5H20.5a.51.51,0,0,1,.5.5A.5.5,0,0,1,20.5,12Z"/><path class="cls-1" d="M20.5,17H16.55a.5.5,0,0,1,0-1H20.5a.5.5,0,0,1,0,1Z"/><path class="cls-1" d="M20.5,22H16.55a.5.5,0,0,1,0-1H20.5a.5.5,0,0,1,0,1Z"/><path class="cls-1" d="M12.27,18h0a.49.49,0,0,1-.37-.18l-.8-1a.5.5,0,1,1,.76-.64l.44.52,1.44-1.58a.5.5,0,0,1,.74.67l-1.83,2A.51.51,0,0,1,12.27,18Z"/><path class="cls-1" d="M22.44,5.5H21.32a.5.5,0,0,0,0,1h1.12A1.07,1.07,0,0,1,23.5,7.56V24.44a1.07,1.07,0,0,1-1.06,1.06H9.56A1.07,1.07,0,0,1,8.5,24.44V7.56A1.07,1.07,0,0,1,9.56,6.5h1.22a.5.5,0,1,0,0-1H9.56A2.06,2.06,0,0,0,7.5,7.56V24.44A2.06,2.06,0,0,0,9.56,26.5H22.44a2.06,2.06,0,0,0,2.06-2.06V7.56A2.06,2.06,0,0,0,22.44,5.5Z"/><path class="cls-1" d="M12.37,7.73h7.27a.5.5,0,0,0,.5-.5V4.78a.5.5,0,0,0-.5-.5H18a2,2,0,0,0-3.88,0H12.37a.5.5,0,0,0-.5.5V7.23A.5.5,0,0,0,12.37,7.73Zm.5-2.45h1.66a.5.5,0,0,0,.5-.5,1,1,0,0,1,2,0,.5.5,0,0,0,.5.5h1.6V6.73H12.87Z"/><path class="cls-1" d="M11.09,11.83l.8,1a.53.53,0,0,0,.37.18h0a.48.48,0,0,0,.37-.17l1.83-2a.5.5,0,0,0-.74-.68l-1.44,1.58-.44-.52a.5.5,0,1,0-.76.64Z"/><path class="cls-1" d="M13.5,23h-2a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h2a.5.5,0,0,1,.5.5v2A.5.5,0,0,1,13.5,23ZM12,22h1V21H12Z"/></g></svg>
<span class="link_name">Projects</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Category</a></li>
<li><a href="#">Create a New Project</a></li>
<li><a href="#">See All Projects</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-book-alt' ></i>
<span class="link_name">Posts</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Posts</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Login Form</a></li>
<li><a href="#">Card Design</a></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="link_name">Analytics</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-menu'></i>
<span class="link_name dont-break">Collapse sidebar</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<span class="text"></span>
</div>
</section>
</body>
</html>