diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass index 16a5490881c..532d90dd438 100644 --- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass +++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass @@ -23,6 +23,11 @@ &--rounded @include tools.rounded($navigation-drawer-rounded-border-radius) + &--top, + &--bottom + max-height: -webkit-fill-available + overflow-y: scroll + &--top top: 0 border-bottom-width: $navigation-drawer-border-thin-width diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx index 5e86a5b24cf..55fb512e9bb 100644 --- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx +++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx @@ -177,12 +177,13 @@ export const VNavigationDrawer = genericComponent()({ return isDragging.value ? size * dragProgress.value : size }) + const elementSize = computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value) const { layoutItemStyles, layoutItemScrimStyles, layoutIsReady } = useLayoutItem({ id: props.name, order: computed(() => parseInt(props.order, 10)), position: location, layoutSize, - elementSize: width, + elementSize, active: computed(() => isActive.value || isDragging.value), disableTransitions: computed(() => isDragging.value), absolute: computed(() => @@ -246,6 +247,7 @@ export const VNavigationDrawer = genericComponent()({ ssrBootStyles.value, stickyStyles.value, props.style, + ['top', 'bottom'].includes(location.value) ? { height: 'auto' } : {}, ]} { ...scopeId } { ...attrs }