<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<div class="container-full">
<div class="row">
<div class="col-md bg-dark" style="height: 100vh" id="aside">
<!-- sidebar -->
<aside class="aside d-flex flex-column flex-shrink-0 p-2 text-white">
<div>
<div class="float-start p-1">
<img
src="/image/co.webp"
alt="User Image"
height="60"
width="60"
class="rounded-circle"
/>
</div>
<div class="float-start" id="name">
<span class="name text-sm"
><strong>John Doe</strong>
<br />
<i class="fa fa-circle text-success"> Online</i>
</span>
</div>
</div>
<hr />
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a href="#" class="nav-link text-white pb-1">
<i
class="fas fa-tachometer-alt text-white"
aria-hidden="true"
></i>
<span class="side-icon">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="nav-link text-white"
><i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span class="side-icon"> Orders</span>
</a>
</li>
<li>
<a href="#" class="nav-link text-white"
><i class="fa fa-shopping-basket" aria-hidden="true"></i>
<span class="side-icon" id="pro"> Products</span>
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<i class="fa fa-user-circle" aria-hidden="true"></i>
<span class="side-icon"> Customers</span>
</a>
</li>
</ul>
</aside>
</div>
<!-- sidebar -->
<div class="col-md-10" id="bod">
<div class="row">
<div class="col-md-12 px-0">
<!-- navbar -->
<nav
class="navbar navbar-expand-md navbar-light bg-warning"
style="padding-right: 1rem"
>
<span class="p-0" id="tog">
<i
class="fas fa-bars m-2 p-0"
style="color: rgb(0, 0, 0); font-size: 40px"
></i>
</span>
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- navbar -->
<div class="row m-3 bg-light">
<div class="col-md-12">
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean ultricies mi vitae
est. Mauris placerat eleifend leo. Quisque sit amet est et
sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. Donec non enim in turpis
pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
faucibus, tortor neque egestas augue, eu vulputate magna eros eu
erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus
</p>
</div>
<!-- content -->
</div>
<!-- content -->
</div>
</div>
</div>
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.col-md-11 {
background-color: bisque;
}
.order {
display: none;
}
.tog {
padding-left: 0.5rem;
}
.col-md-1 {
background-color: brown;
font-size: larger;
}
.tim {
display: none;
}
#name {
padding-top: 4px;
padding-left: 10px;
}
document.getElementById("tog").addEventListener("click", aside);
function aside() {
let elem = document.getElementById("aside");
let nav = document.getElementById("bod");
let name = document.getElementById("name");
console.log(elem.classList);
elem.classList.toggle("col-md-1");
name.classList.toggle("tim");
nav.classList.toggle("col-md-11");
const el = document.querySelectorAll(".side-icon");
el.forEach((box) => {
box.classList.toggle("order");
});
}
