Vuetify: [Bug Report] Navigation drawer has incorrect icon alignment when custom mini-variant-width is set

[sindrepm]

Versions and Environment

Vuetify: 0.17.2
Vue: 2.5.7
Browsers: Chrome 62.0.3202.94
OS: Windows 7

Steps to reproduce

Create a navigation drawer with some list tiles and set the mini-variant-width to a non-default value (e.g. 100). Now activate mini-variant.

See provided codepen for issue demonstration and fix.

Expected Behavior

Tile icons should be horizontally centered regardless of the width of the mini sidebar.

Actual Behavior

The icons are off-center because it assumes the default mini-variant-width of 80px to calculate the icon alignment. Also, if you do not wrap the v-list-tile-title in a v-list-tile-content parts of the title will still show in mini mode because the opacity override only applies to .list__tile__content. Same with the right hand icon (the up/down arrow) in case of using a list-tile-group.

Reproduction Link

https://codepen.io/anon/pen/pdLXWj

Other comments

I am proposing a fix in my codepen which will make it work with any sidebar width. Also, with this solution the current CSS overrides to hide title, etc. is not technically needed because the icon/avatar will always fill the full width of the sidebar.

[KaelWD]

Duplicate of #2205 but I'll allow it.

[AlexSHoffman]

The proposed fix makes <v-list-tile-content> jump when the drawer is closed.
To prevent this, instead of using min-width: 100% for aligning, you can manually specify the equal amount of padding for <v-list-tile-action>

Codepen:
https://codepen.io/anon/pen/QrrNmE?editors=1100

[johnleider]

An update on this issue. I spent some time tonight seeing how this might integrate and came up with 2 potential solutions:

1. Remove margin and center content when mini is closed
   Pros: Works at any width of mini-variant
   Cons: Creates a disjointed animation when changing from mini to non-mini

2. Don't remove margin
   Pros: For the default drawer experience (a dense list), has a smooth expand/contract animation
   Cons: Does not work with any width of mini-variant

For the purposes of the MD2 update, I'm going to go with option 2 for a few reasons:

• The animation feels terrible, especially with the new open-on-hover prop
• The user can technically achieve a centered icon if designating a custom mini-variant-width
• With no explicit support on MD2 (as far as I'm aware), it doesn't become as big a priority as simply making it work with the default setup

I'm going to leave this issue open so we can maybe revisit in the future as it _is_ something I would like to have in the framework, it just doesn't feel right right now.

[johnleider]

After a bunch of experimentation, I'm starting to double think the mini-variant changes and having it center despite the animation hurdles. Overall it increases the flexibility of the component.

[gabaum10]

So question: why is this closed? The behavior is honestly pretty janky right now when you hover to expand the menu. I mean, hover:true is a supported property in the docs, but it looks bad when you turn it on. The demo in the docs is pretty jumpy too. Is there a plan to address that more permanently?

https://codepen.io/gabaum10/pen/WqOdWY?&editable=true&editors=101