<div class="frame flex-center">
      <div class="panel flex-center">
        <header class="header">
          <nav class="menu-icon hover-light" onclick="showMenu()">
            <i class="fa-solid fa-bars-staggered"></i>
          </nav>
          <h4 class="title">Notifications</h4>
          <input type="text" class="search-input" placeholder="Search ..." />
          <i
            class="fa fa-search search-icon hover-light"
            onclick="search()"
          ></i>
        </header>

        <div class="notifications">
          <div class="line"></div>
          <div class="notification">
            <span class="time">9:24 AM</span>
            <p><b>John Walker</b> posted a photo on your wall.</p>
          </div>
          <div class="notification">
            <span class="time">8:19 AM</span>
            <p><b>Alice Parker</b> commented your last post.</p>
          </div>
          <div class="notification">
            <span class="time">Yesterday</span>
            <p><b>Luke Wayne</b> added you as friend.</p>
          </div>
        </div>
      </div>

      <div class="menu flex-center">
        <ul>
          <li><i class="fa fa-dashboard"></i>Dashboard</li>
          <li><i class="fa fa-user"></i>Profile</li>
          <li><i class="fa fa-bell"></i>Notifications</li>
          <li><i class="fa fa-comments"></i>Messages</li>
          <li><i class="fa fa-gear"></i>Settings</li>
        </ul>
      </div>
    </div>
 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}


//utilities
.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hover-light {
  transition: all 0.3s ease-in-out;
  &:hover { 
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    cursor: pointer;
  }
}

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 5px;
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  background-image: linear-gradient(120deg,rgba(251, 233, 193, 0.466), rgba(250, 220, 155, 0.408));
  background-color: lightblue;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panel {
  z-index: 1;
  height: 350px;
  width: 350px;
  box-shadow: 0px 6px 15px rgba(63, 66, 66, 0.266);
  background-color: rgb(218, 254, 242);
  justify-content: flex-start;
  border-radius:10px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}
.show-menu-panel{
  transform: translateX(40%);
  
}

.header {
  background-color: cadetblue;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  color: #fff;
  
  .menu-icon {
    transition: all 0.3s ease-in-out;
  }
  .show-menu-icon{
    transform:rotate(180deg);
  }

  .search-input {
    position: absolute;
    font-size:1rem;
    padding:0.4rem 0.5rem;
    border-radius:15px;
    border: none;
    transform: translateX(70%);
    opacity: 0;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
  }
  .show-search-input {
    transform: translateX(25%);
    opacity: 1;
    z-index: 1;
  }
  .title {
    opacity: 1;
    transition: all 0.3s ease-in-out;
  }
  .show-search{
    opacity: 0;
    position: absolute;
    top: 50%;
  }
}

@keyframes show-in {
  from {
    transform: translate3d(0,50px,0);
    opacity: 0;
  }
  to {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}

.notifications {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  position: relative;
  animation: show-in .7s ease-in-out;

  .line {
    height: 300px;
    width: 3px;
    background:rgb(201, 229, 238);
    position: absolute;
    margin: 0 1.5rem;
  }
  .notification{
    color: rgb(52, 70, 70);
    width: 85%;
    padding-left: 3rem;
    position: relative;
    transform-origin: 30px;

    @extend .hover-light;
    &:hover {
      color:rgba(83, 176, 176, 0.968);
      cursor: pointer;
      transform: scale(1.01);
    }
   
    .time::before { 
      content: '';
      position: absolute;
      left: 6%;
      height:10px;
      width:10px;
      border-radius:50%;
      border: 2px solid cadetblue;
      background-color: rgb(218, 254, 242);
      box-shadow: 0 0 0 3px rgb(218, 254, 242);
      
    }
  }
}

.menu {
  position: absolute;
  z-index: 0;
  height: 300px;
  width: 150px;
  background-color:rgb(16, 115, 130);
  border-radius: 10px 0 0 10px;
  box-shadow: 0px 6px 15px rgba(63, 66, 66, 0.266);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  ul{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-items: flex-start;
    li {
      color:#fff;
      width:100%;
      list-style: none;
      cursor: pointer;
      @extend .hover-light;
      i{
        padding:0 .5rem;
      }
    }
  }
}
.show-menu{
  transform: translateX(-70%);
  
}

const hamburger = document.querySelector('.menu-icon');
const panel = document.querySelector('.panel');
const menu = document.querySelector('.menu')

const searchIcon = document.querySelector('.search-icon');
const searchInput = document.querySelector('.search-input');
const title = document.querySelector('.title');

function showMenu() {
    panel.classList.toggle('show-menu-panel')
    hamburger.classList.toggle('show-menu-icon')
    menu.classList.toggle('show-menu')
}

function search() {
    searchInput.classList.toggle('show-search-input')
    title.classList.toggle('show-search')
}