I want my main content to transition at 500ms to the right as the Navigational Sidebar transits to the right on the click of a hamburger icon on the header. The navigation is working fine and transits linearly at 500ms. In the respective template files of both components I added an active class with the property, transition: all 500ms linear; The Navigation Sidebar works fine but the main content shifts to right abruptly, i.e. transition is not working correctly and I can't figure out what is wrong in the css. Link to the source code: <https://stackblitz.com/edit/angular-qycauv>

P.S. I am new to Web Development, any help would be appreciated.