fix(VNavigationDrawer): don't restrict elementSize when location is t…

…op or bottom
vuetifyjs · Apr 29, 2024 · 1ee802d · 1ee802d
1 parent 99ea55d
commit 1ee802d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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
@@ -177,12 +177,13 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
 
       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<VNavigationDrawerSlots>()({
               ssrBootStyles.value,
               stickyStyles.value,
               props.style,
+              ['top', 'bottom'].includes(location.value) ? { height: 'auto' } : {},
             ]}
             { ...scopeId }
             { ...attrs }