search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.83k stars 6.96k forks source link

[Feature Request] v-navigation-drawer: v-list-item -icon/-avatar/-action should center align in mini-variant #14736

Closed Excalibaard closed 9 months ago

Excalibaard commented 2 years ago

Problem to solve

Currently, if you have a v-navigation-drawer with mini-variant, all v-list-item *-icon/*-avatar/*-action elements are justified at flex-start. This is fine if everything is the same size, but if there are items that vary in size, the alignment is wrong. For example an avatar or icon may be slightly bigger (it could link to a profile page or have a different priority from other items) than the regular icon size. I made a pen that shows the problem: https://codepen.io/Excalibaard/pen/abVENOV

Proposed solution

Apply justify-content: center to .v-navigation-drawer--mini-variant { .v-list-item__icon, .v-list-item__avatar, .v-list-item__action }. Maybe to the entire navigation drawer, maybe only when .v-list--nav is used as well. Maybe an animatable alternative to justify-content for switching between mini-variant and the expanded navigation drawer.

johnleider commented 9 months ago

Thank you for the Feature Request and interest in improving Vuetify. After careful consideration, the team has decided that this is not functionality that we are looking to implement at this time.

If you have any questions, please reach out to us in our Discord community.