Vue3 + element-plus side menu: overlay in mobile and animation issue

Question

Vue 3 and UI newbie here. Given this playground area with a code sample, I wanted

1. In the "collapse" animation of the menu, for the entire menu to slide out (but if you notice, the size of the menu changes first - making it occupy less than 100% of the height - and then it slides out)
2. If it is a smaller screen, I wanted the side menu to be collapsed by default and for it to be an overlay when sliding in (so the main contents are not pushed by it when sliding in)

As a Vue and UI beginner, I feel like I am going down the wrong paths when trying to explore solutions for these problems, and was hoping the community of experienced developers could help me with them.

Answer 1

I ended up using https://github.com/amirkian007/vue-awesome-sidebar. It is a pretty neat component.