title: Make the sidebar collapse linear and avoid vertical misalignments
body: <p>I have implemented a sidebar and the collapse function (<code>for minimizing the sidebar</code>) works quite okay, but whenever I click on 'collapse' again to <code>maximize</code> the sidebar, the elements inside the sidebar are misaligned during few milliseconds and the logo text appears above the body. Please see the images below</p>
  <p>[![enter image description here][1]][1]
  [![enter image description here][2]][2]</p>
  <p>How could I make it smoother and avoid the misalignments? It should be something linear without any vertical changes.</p>
  <p>I've tried so many things but it was impossible for me to make it work.</p>