feat(VNavigationDrawer): port to v3

[johnleider]

Description

port to v3

Motivation and Context

port to v3

How Has This Been Tested?

pending

Markup:

https://gist.github.com/johnleider/2961f4bcd3831fc37f8ea2ff4061137e

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[johnleider]

Requesting Initial comments from @vuetifyjs/core-team

[nekosaur]

I think it would be very helpful if you provided descriptions of some of the props available here. Some of my immmediate questions are:

1. What's the difference between mobile and temporary? They seem to have the same effect, even on small screens.
2. temporary and floating are too close in meaning imo. It would not be hard to imagine that someone sees floating and thinks that it does what temporary actually does.
3. What does permanent do?
4. What does stateless do? It sounds a little bit like temporary as well.
5. bottom makes nav drawer take up entire screen
6. On the topic of bottom (and right), I am not a fan of using the position composable but changing the meaning of the props. In nav drawer, bottom and right are used only as boolean props to indicate where drawer should show (while the logic and calculation of that is done by layout composable), but they are defined as [Boolean, Number, String]. I would much rather see a position prop that takes 'left' | 'right' | 'bottom'.
7. Because it uses position composable it also has top prop which doesn't make sense.
8. makeLayoutItemProps should not set default name. That would immediately trip up the layout system when two nav drawers are used.
9. What's the use case for fixed? Right now it gets overwritten by layout which sets absolute position in styles

[nekosaur]

Elaboration on some of my questions:

2. Going by name only, floating could be interpreted to do what temporary does, while it is not at all obvious from the name that it only removes border.
3. In v2, permanent is described as The drawer remains visible regardless of screen size. Would this not be equal to

   :model-value="true"
   

   since we're using the proxy composable. If mobile/route changing is still wanted, then it would be

   v-model="foo"
   mobile-breakpoint="0"
   

4. In v2, stateless is described as Remove all automated state functionality (resize, mobile, route) and manually control the drawer state. Would this not be

   :model-value="foo"
   

[johnleider]

1. mobile is a temporary prop to test the mobile functionality of a component and will go away once the display composable is done.
2. Agreed, only done for v2 feature parity. floating can be removed for border="0"
3. We can remove stateless, but permanent should stay.
   a. That will work as well
4. It can go
5. Should only happen on landscape, I can remove for now and implement it once display is in
6. I'm not opposed to this
7. The same as 6
8. Okay
9. So that being fixed isn't tied to the usage of app, at least in v2