cdao-pjet/app/javascript/src/application/sidenav.scss

.sidenav {
  background-color: #e6e6e6;
  left: 0 !important;
  position: fixed;
  padding-top: 120px;
  margin-top: 0;
  height: 100%;
  text-rendering: optimizeLegibility;
  top: 0;
  transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
  width: inherit;

  .accordion-item, button {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
  }
}

.wrapper {
  height: 100% !important;
  align-items: stretch;
  background-color: #d9d9d9;
  display: flex;
  padding-bottom: 10px;
  perspective: 1500px; 
}

#sidenav.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

/* Toggling the sidebar header content, hide the big heading [h3] and showing the small heading [strong] and vice versa*/
#sidenav .sidenav-header strong {
    display: none;
}

#sidenav.active .sidenav-header h3 {
    display: none;
}

#sidenav.active .sidenav-header strong {
    display: block;
}

#sidenav ul li a {
    text-align: left;
}

#sidenav.active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidenav.active ul li a i {
  margin-right:  0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

/* Same dropdown links padding*/
#sidenav.active ul ul a {
  padding: 10px !important;
}

/* Changing the arrow position to bottom center position, 
 translateX(50%) works with right: 50% 
 to accurately  center the arrow */
#sidenav.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

@media (max-width: 768px) {
  /* 80px and its content aligned to centre. Pushing it off the screen with the
     negative left margin
  */
  #sidenav.active {
      min-width: 80px;
      max-width: 80px;
      text-align: center;
      margin-left: -80px !important;
  }


  /* Reappearing the sidenav on toggle button click */
  #sidenav {
      margin-left: 0; 
  }


  /* Toggling the sidenav header content, 
     hide the big heading [h3] and showing the small heading [strong] and vice versa
  */
  #sidenav .sidenav-header strong {
      display: none;
  }
  #sidenav.active .sidenav-header h3 {
      display: none;
  }
  #sidenav.active .sidenav-header strong {
      display: block;
  }

  /* Downsize the navigation links font size */
  #sidenav.active ul li a {
      padding: 20px 10px;
      font-size: 0.85em;
  }

  #sidenav.active ul li a i {
      margin-right:  0;
      display: block;
      font-size: 1.8em;
      margin-bottom: 5px;
  }

  /* Adjust the dropdown links padding*/
  #sidenav.active ul ul a {
      padding: 10px !important;
  }

  /* Changing the arrow position to bottom center position, 
    translateX(50%) works with right: 50% 
    to accurately  center the arrow */
  .dropdown-toggle::after {
      top: auto;
      bottom: 10px;
      right: 50%;
      -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
      transform: translateX(50%);
  }
}