Expandable left drawer with annoying animation effects. As a rule, I avoid animations but, in this case, I have decided to play a little bit in the sandbox. I have split the drawer into three components: Drawer wrapper, Avatar, and DrawerItem.

In a real project, I would split it even into more components: the expand/collapse button, the animated icons of the menu item. It would make the code even more trivial and readable.

The concept of the half-collapsed drawer I got from Vuetify navigation drawer. Therefore, I decided to implement the concept in my own way. Of course, I have thought about cross-browser compatibility and tested the drawer in safari, chrome and firefox browsers. 😉