feat: add top property for v-navigation-drawer

vuetifyjs · Nov 6, 2023 · df70bfe · df70bfe
1 parent 5de66af
commit df70bfe
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/packages/api-generator/src/locale/en/v-navigation-drawer.json b/packages/api-generator/src/locale/en/v-navigation-drawer.json
@@ -1,6 +1,7 @@
 {
   "props": {
     "bottom": "Expands from the bottom of the screen on mobile devices",
+    "top": "Expands from the top of the screen on mobile devices",
     "clipped": "A clipped drawer rests under the application toolbar. **Note:** requires the **clipped-left** or **clipped-right** prop on `v-app-bar` to work as intended",
     "disableResizeWatcher": "Will automatically open/close drawer when resized depending if mobile or desktop.",
     "disableRouteWatcher": "Disables opening of navigation drawer when route changes",

diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
@@ -67,6 +67,11 @@
   bottom: 0
   min-width: 100%
 
+.v-navigation-drawer--top.v-navigation-drawer--is-mobile
+  top: 0
+  bottom: auto
+  min-width: 100%
+
 .v-navigation-drawer--right
   left: auto
   right: 0

diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.ts b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.ts
@@ -93,6 +93,7 @@ export default baseMixins.extend({
       },
     },
     temporary: Boolean,
+    top: Boolean,
     touchless: Boolean,
     width: {
       type: [Number, String],
@@ -135,6 +136,7 @@ export default baseMixins.extend({
         'v-navigation-drawer--open-on-hover': this.expandOnHover,
         'v-navigation-drawer--right': this.right,
         'v-navigation-drawer--temporary': this.temporary,
+        'v-navigation-drawer--top': this.top,
         ...this.themeClasses,
       }
     },
@@ -165,6 +167,7 @@ export default baseMixins.extend({
     computedTransform (): number {
       if (this.isActive) return 0
       if (this.isBottom) return 100
+      if (this.isTop) return -100
       return this.right ? 100 : -100
     },
     computedWidth (): string | number {
@@ -179,6 +182,9 @@ export default baseMixins.extend({
     isBottom (): boolean {
       return this.bottom && this.isMobile
     },
+    isTop (): boolean {
+      return this.top && this.isMobile
+    },
     isMiniVariant (): boolean {
       return (
         !this.expandOnHover &&
@@ -229,9 +235,9 @@ export default baseMixins.extend({
       )
     },
     styles (): object {
-      const translate = this.isBottom ? 'translateY' : 'translateX'
+      const translate = this.isBottom || this.isTop ? 'translateY' : 'translateX'
       return {
-        height: convertToUnit(this.height),
+        height: !this.isTop ? convertToUnit(this.height) : 'auto',
         top: !this.isBottom ? convertToUnit(this.computedTop) : 'auto',
         maxHeight: this.computedMaxHeight != null
           ? `calc(100% - ${convertToUnit(this.computedMaxHeight)})`