sidebar navigation text not fixed while transition

Question

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

Answer 1

You dont need JQuery with this simple code. Try this:

 function Nav() { var width = document.getElementById("mySidenav").style.width; var icon = document.querySelector(".animated-icon"); if (width === "0px" || width == "") { document.getElementById("mySidenav").style.width = "250px"; icon.classList.toggle('open'); } else { document.getElementById("mySidenav").style.width = "0px"; icon.classList.toggle('open'); } }

 body{ margin:0; }.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:};hamburger-button{ margin:25px, background-color, rgba(0,0;0.0): };center { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; vertical-align. middle: };navbar-toggler{ position:relative; z-index:2; }

 <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>