Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main class but it did not work.
let btnSidebar = document.querySelector(".bx-menu")
let sidebar = document.querySelector(".nk-sidebar")
btnSidebar.addEventListener("click", ()=> {
sidebar.classList.toggle("close")
})@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.nk-sidebar {
position: fixed;
top: 0;
height: 100%;
width: 270px;
display: flex;
flex-direction: column;
border-right: 1px solid #e6e5e5;
padding: 10px;
transition: 0.3s ease all;
}
.nk-sidebar.close {
width: 73px;
}
.nk-sidebar .nk-sb-hrd {
display: flex;
align-items: center;
/* flex: 0 0 50px; */
/* padding: 10px; */
width: 100%;
gap: 10px;
background: black;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
font-size: 16px;
color: #fff;
font-weight: 600;
}
.nk-sidebar .nk-sb-nav {
flex: 1;
}
.nk-sidebar .nk-sb-footer {
display: flex;
flex-direction: column;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
min-width: 50px;
height: 50px;
width: 50px;
padding: 5px;
border-radius: 10px;
}
.nk-sb-hr-ham {
height: 40px;
min-width: 40px;
border: 1px solid #e6e5e5;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
background: red;
}
.ham {
width: 20px;
height: 2px;
background: #0057d9;
}
.nk-sb-company {
font-weight: 600;
color: #0057d9;
font-size: 14px;
white-space: nowrap;
}
.nk-section {
position: relative;
left: 270px;
width: calc(100% - 270px);
padding: 10px;
height: 100vh;
background: yellow;
transition: 0.3s ease all;
}
.nk-sidebar.close .nk-sb-company {
opacity: 0;
pointer-events: none;
}
.nk-sidebar.close ~ .nk-section {
left: 73px;
width: calc(100% - 73px);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../materials/fonts/new/fonts.css">
<link rel="stylesheet" href="../materials/css/dashboard.css">
<script src="../materials/plugins/jquery-3.6.0.js"></script>
<link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984938288848598abd9c5dac5d9">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="nk-sidebar">
<div class="nk-sb-hrd">
<div class="nk-sb-hr-ham">
<div class="ham top"></div>
<div class="ham mid"></div>
<div class="ham bot"></div>
</div>
<div class="nk-sb-company">Zybm Business Applications</div>
</div>
<div class="nk-sb-nav">
</div>
<div class="nk-sb-footer">
asdasd
</div>
</div>
<div class="nk-section">
<i class="bx bx-menu"></i>
</div>
<script type="text/javascript" src="../materials/js/dashboard.js"></script>
</body>
</html>