Fix: css based solution for sidebar without js dependency

[G-Simpson]

Description

Currently the functionality for the show/hide of the sidebar uses 'el-transition' for the sidebare ease-in/out but nothing for the main body. It looks uneven. I've changed them both to use css transitions and have removed some unneccesary code. Works on all viewport sizes

Fixes # No Issue

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works

Screenshots & recording

Old functionality:
https://github.com/user-attachments/assets/0004757a-f44c-4d13-bdb3-76392d0ee49e

New functionality
https://github.com/user-attachments/assets/4fcef603-1bc1-4f46-a19a-fcfeeb12118f

Manual review steps

Click on the hamburge icon on any viewport size

[codeclimate]

Code Climate has analyzed commit 1b211b2 and detected 0 issues on this pull request.

View more on Code Climate.

[adrianthedev]

This is great @G-Simpson!
The only suggestion I'd have is to make the animation time shorter.

Thank you for this! It's a great improvement!