Side bar

Cards
CSS | JavaScript

+ ANIMATION :

+ Description :

This animation is displaying a side menu.

In order to achieve it you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the animation to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS (be careful with the buttons and icons) instead of putting it into the code element in order to avoid FOUC as the code block is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined.

 

Load Font Awesome library if necessary, please adapt according to your builder:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
  integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

HTML:

<section class="side-section">
  <div class="side-wrapper">
    <div id="side-bar" class="side-bar">
      <div id="side-tog" class="side-tog" title="open/close"></div>
      <div class="tog-icon-ctn active">
        <div class="tog-icon-wrap">
          <i class="tog-icon fa-solid fa-house"></i>
        </div>
        <p class="tog-txt">Home</p>
      </div>
      <div class="tog-icon-ctn">
        <div class="tog-icon-wrap">
          <i class="tog-icon fa-solid fa-users"></i>
        </div>
        <p class="tog-txt">About</p>
      </div>
      <div class="tog-icon-ctn">
        <div class="tog-icon-wrap">
          <i class="tog-icon fa-solid fa-server"></i>
        </div>
        <p class="tog-txt">Services</p>
      </div>
      <div class="tog-icon-ctn">
        <div class="tog-icon-wrap">
          <i class="tog-icon fa-solid fa-location-dot"></i>
        </div>
        <p class="tog-txt">Information</p>
      </div>
      <div class="tog-icon-ctn">
        <div class="tog-icon-wrap">
          <i class="tog-icon fa-solid fa-phone"></i>
        </div>
        <p class="tog-txt">Contact</p>
      </div>
      <div class="tog-social-ctn">
        <i class="tog-social fa-brands fa-square-facebook"></i>
        <i class="tog-social fa-brands fa-instagram"></i>
        <i class="tog-social fa-brands fa-square-twitter"></i>
        <i class="tog-social fa-brands fa-square-youtube"></i>
      </div>
    </div>
  </div>
</section>

 

CSS:

.side-section {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #202020;
  justify-content: flex-start;
  min-height: 100vh;
  width: 100%;
}
.side-wrapper {
  padding: 5px;
  border-radius: 6px;
  box-shadow: 8px 8px 16px #1b1b1b, -8px -8px 16px #252525;
  background: linear-gradient(145deg, #222222, #1d1d1d);
}
.side-bar {
  background: linear-gradient(145deg, #222222, #1d1d1d);
  width: 68px;
  height: 550px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  transition: all 0.3s linear;
}
.side-tog {
  width: 68px;
  height: 68px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s linear;
  cursor: pointer;
}
.tog-icon-ctn {
  padding: 12px 0 12px 12px;
  margin: 0 0 8px 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: justify;
  border-radius: 6px;
  transition: all 0.3s linear;
}
.tog-icon-wrap {
  min-width: 46px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-tog:before {
  content: "";
  position: absolute;
  left: 16px;
  width: 36px;
  height: 2px;
  background: white;
  box-shadow: 0 8px 0 white;
  transform: translateY(-14px);
  transition: all 0.3s linear;
}
.tog-icon {
  color: white;
  font-size: 30px;
  transition: 0.3s;
  cursor: pointer;
}
.tog-txt {
  margin: 0 0 0 75px;
  padding: 0 0 0 1rem;
  font-size: 1.3rem;
  color: white;
  cursor: pointer;
  transition: all 0.3s linear;
}
.tog-social-ctn {
  padding-bottom: 22.5px;
  width: 250px;
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  align-content: flex-end;
  position: absolute;
  bottom: 0px;
  transition: all 0.3s linear;
}
.tog-social {
  color: white;
  margin: 8px;
  width: 30px;
  height: 30px;
  font-size: 30px;
  transition: 0.3s;
  cursor: pointer;
  transition: all 0.3s linear;
}
.side-tog:after {
  content: "";
  position: absolute;
  left: 16px;
  width: 36px;
  height: 2px;
  background: white;
  transform: translateY(2px);
  box-shadow: 0 8px 0 white;
  transition: 0.3s;
}

.side-bar.reveal {
  width: 250px;
}

.side-bar.reveal .side-tog:before {
  transform: rotate(45deg) translateY(0px);
  box-shadow: 0 0 0 transparent;
}

.side-bar.reveal .side-tog:after {
  transform: rotate(-45deg) translateY(0px);
  box-shadow: 0 0 0 transparent;
}

.side-bar.reveal .side-tog {
  transform: rotate(-180deg);
}

.side-bar.reveal .tog-txt {
  margin-left: 50px;
}

.tog-icon-ctn.active .tog-icon {
  color: #9b6bf7;
  filter: drop-shadow(0 0 2px #9b6bf7);
}

.tog-icon-ctn.active .tog-txt {
  color: #9b6bf7;
  transform: translateX(8px);
}

.tog-icon-ctn.active {
  box-shadow: inset 8px 8px 16px #1b1b1b, inset -8px -8px 16px #252525;
}

.tog-icon-ctn:hover {
  box-shadow: inset 8px 8px 16px #1b1b1b, inset -8px -8px 16px #252525;
}

.tog-icon-ctn:hover:not(.active) .tog-txt {
  transform: translateX(8px);
}

.tog-txt:before {
  transition: all 0.5s linear;
}
.tog-icon-ctn.active .tog-txt:before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  background-color: #9b6bf7;
  top: 10%;
  height: 80%;
}

.tog-icon-ctn:hover .tog-txt:before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  background-color: white;
  top: 10%;
  height: 80%;
}

.tog-icon-ctn:hover.active .tog-txt:before {
  background-color: #9b6bf7;
}

.side-bar.reveal .tog-social-ctn {
  padding-right: 41px;
}
.tog-social:hover {
  color: #9b6bf7;
}

 

JS:

document.addEventListener("DOMContentLoaded", function (event) {
  const navigation = document.querySelector("#side-bar");
  const toggle = document.querySelector("#side-tog");
  toggle.onclick = function () {
    navigation.classList.toggle("reveal");
  };

  // Add active class to the current button (highlight it)

  const btns = navigation.querySelectorAll(".tog-icon-ctn");
  const btnsL = btns.length;
  for (var i = 0; i < btnsL; i++) {
    btns[i].addEventListener("click", function () {
      const current = document.querySelectorAll(".active");
      current[0].classList.remove("active");
      this.classList.add("active");
    });
  }
});

 

Contact
I can adapt and install this animation on your website, contact me and let's talk about it!