sidebar navigation text not fixed while transition

i try to change css but not work text short text is ok but i have to put long line when click it not smooth while transition working i use template from codeply(https://www.codeply.com/p/RXiaRJEqWj#), i want text show up smooth like button or short text please advise me how I should use it to remember for next time i can help in community if i saw someone ask like me thank you.

<div id="mySidenav" class="sidenav">
              <h3>Painéis</h3>
              <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
              <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
              <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
              <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
            </div>

 <nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
          <!-- Collapse button -->
          <button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();"  style="z-index: 2">
              <div class="animated-icon"><span></span><span></span><span></span></div>
          </button>
          <!-- Navbar brand -->
          <div class="mx-auto order-0">
              <a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
          </div>
      </nav>

<script>
        function Nav() {
          var width = document.getElementById("mySidenav").style.width;
          if (width === "0px" || width == "") {
            document.getElementById("mySidenav").style.width = "250px";
            $('.animated-icon').toggleClass('open');
          }
          else {
            document.getElementById("mySidenav").style.width = "0px";
            $('.animated-icon').toggleClass('open');
          }
        }
      </script>

.sidenav {
    height: 100%;
    width: 0; 
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #ffffff!important;
    backdrop-filter: blur(15px);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    box-shadow: 0px 0px 8px #000000;
    
  }

 
  .sidenav h3{
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #000000;
    display: block;
    transition: 0.3s;
  }
  .sidenav a {
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 16px;
    color: #000000;
    display: block;
    transition: 0.3s;
  }

  .sidenav a:hover {
    color: #ffffff;
    background-color:#000000;
    padding:12px;
  }

  .sidenav .item i{
    margin-right: 15px;
  }

  .sidenav::-webkit-scrollbar { 
    display: none; 
  } 
  
    .animated-icon {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    }
    
    .animated-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    }
    
    .animated-icon span {
    background: #f3e5f5;
    }
    
    .animated-icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon span:nth-child(3) {
    top: 20px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 8px;
    }
    
    .animated-icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
    }
    
    .animated-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 21px;
    left: 8px;
    }
    button {border:none !important;}
    button:focus{outline: none;}
  
    .center {
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      text-align: center;
      vertical-align: middle;
    }

i tried to change the css and and the javascript but it did changed at all, just gave me more problems, i did change position and display in the css, but dont seem this is the problem, someone help me pls