Sidebar Menu Using HTML and CSS

<!--icon style link: <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'> --> 

 <div class="sidebar">
    <div class="all">
      <!--menu button-->
      <div class="logo_content">

        <!--profile image-->
        <div class="logo">
          <header>
            <img src="profile.jpg" alt="">
            <p>Mystery Code</p>
          </header>
        </div>
        <i class="bx bx-menu" id="btn"></i>
      </div>

      <ul class="nav_list">
        <li><a href="#">
          <i class="bx bx-grid-alt"></i>
          <span class="links_name">Dashboard</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-user"></i>
          <span class="links_name">User</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-chat"></i>
          <span class="links_name">Messages</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-pie-chart-alt-2"></i>
          <span class="links_name">Analytics</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-folder"></i>
          <span class="links_name">File Manager</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-cart-alt"></i>
          <span class="links_name">Order</span>
        </a></li>

        <li><a href="#">
          <i class="bx bx-heart"></i>
          <span class="links_name">Saves</span>
        </a></li>
      </ul>
    </div>

    <!--social icon-->


    <div class="profile_content">
      <div class="profile">
        <div class="links_name">
          <div class="social-links">
            <a href="#"><i class="bx bxl-twitter"></i></a>
            <a href="#"><i class="bx bxl-facebook"></i></a>
            <a href="#"><i class="bx bxl-instagram"></i></a>
            <a href="#"><i class="bx bxl-youtube"></i></a>
          </div>
        </div>
        <!--share button-->
        <i class="bx bx-share-alt" id="log_out"></i>
      </div>
    </div>


  </div>

  <!--body background-->
  <div class="home_content">
    <div class="text">
      <img src="image.jpg" alt="">
    </div>
  </div>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 78px;
  background: #11101d;
  padding: 6px 14px;
  z-index: 99;
  transition: all 0.5s ease;
}
.sidebar ul{
  margin-top: 130px;
}
.sidebar ul li{
  position: relative;
  height: 50px;
  width: 100%;
  margin:  0 5px;
  list-style: none;
  line-height: 50px;
  margin: 5px 0;
}
.sidebar ul li a{
  color: #fff;
  align-items: center;
  display: flex;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition: all 0.4s ease;
}
.sidebar ul li a:hover{
  color: #11101d;
  background: #fff;
}
.sidebar .links_name{
  font-size: 16px;
  font-weight: 400;
  opacity: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.sidebar ul li i{
  font-size: 22px;
  font-weight: 400;
  height: 40px;
  min-width: 50px;
  line-height: 40px;
  text-align: center;
  border-radius: 12px;
}
.sidebar #btn{
  position: absolute;
  color: #fff;
  top: 6px;
  left: 50%;
  font-size: 27px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
}
.sidebar.active{
width: 240px;
}
.sidebar.active .links_name{
  opacity: 1;
  pointer-events: auto;
  transition: 0s;
}
.sidebar.active #btn{
  left: 90%;
}
.sidebar img{
  width: 120px;
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 120px;
}
.sidebar .logo_content .logo{
  color: #fff;
  display: flex;
  height: 50px;
  width: 100%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.1s ease;
}
.sidebar.active .logo_content .logo{
  opacity: 1;
  pointer-events: none;
  transition: all 2s ease;
}
.logo p{
  font-size: 21px;
  margin-left: 30px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.home_content{
  position: absolute;
  height: 500px;
  width: calc(100% - 78px);
  left: 78px;
  background-size: cover;
  transition: all 0.5s ease;
}

.sidebar.active ~ .home_content{
  z-index: 100;
  width: calc(100% - 240px);
  left: 240px;
}
.home_content .text img{
  background-position: center;
  background-size: cover;
  height: 660px;
  width: 100%;
}


/* ========= scrolling effect ======*/

.all{
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}
/* hide scroll bar */
.all::-webkit-scrollbar{
  width: 0px;
}


.sidebar .profile_content{
  position: absolute;
  color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
}
.sidebar .profile_content .profile{
  position: relative;
  padding: 10px 6px;
  height: 60px;
  background: none;
  transition: all 0.4s ease;
}
.social-links i{
 padding: 8px;
 margin-left: 10px;
 margin-top: 7px;
 color: rgb(233, 234, 236);
 background: #393b57;
 border-radius: 50px;
 width: 33px;
 height: 33px;
 font-size: 17px;
 text-align: center;
}
.social-links i:hover{
  background: #36adf1;
}
.sidebar.active .profile_content .profile{
  background: #1d1b31;
}
.profile #log_out{
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 50px;
  line-height: 50px;
  font-size: 24px;
  border-radius: 12px;
  text-align: center;
  transition:  all 0.4s ease;
  background: #1d1b31;
}
.sidebar.active .profile #log_out{
  left: 90%;
}

    // active button using javascript

    let btn = document.querySelector("#btn");
    let sidebar = document.querySelector(".sidebar");


    btn.onclick = function(){
      sidebar.classList.toggle("active");

      if(btn.classList.contains("bx-menu")){
        btn.classList.replace("bx-menu", "bx-menu-alt-right");
      }
      else{
        btn.classList.replace("bx-menu-alt-right", "bx-menu");
      }
    }