feat(VToolbar): add collapse-position prop (#17937)

resolves #11378
Co-authored-by: J-Sek <J-Sek@users.noreply.github.com>

Author: prashantsinghb

packages/api-generator/src/locale/en/VToolbar.json

@@ -3,6 +3,7 @@
     "absolute": "Applies position: absolute to the component.",
     "bottom": "Aligns the component towards the bottom.",
     "collapse": "Puts the toolbar into a collapsed state reducing its maximum width.",
+    "collapsePosition": "Specifies side to attach the collapsed toolbar.",
     "extended": "Use this prop to increase the height of the toolbar _without_ using the `extension` slot for adding content. May be used in conjunction with the **extension-height** prop. When false, will not show extension slot even if content is present.",
     "extensionHeight": "Specify an explicit height for the `extension` slot.",
     "flat": "Removes the toolbar's box-shadow.",

packages/docs/src/data/new-in.json

@@ -300,6 +300,11 @@
       "toggle": "3.10.0"
     }
   },
+  "VToolbar": {
+    "props": {
+      "collapsePosition": "3.11.0"
+    }
+  },
   "VTooltip": {
     "props": {
       "eager": "3.2.0",

packages/docs/src/examples/v-toolbar/prop-collapse.vue

@@ -1,21 +1,43 @@
 <template>
   <v-card>
-    <v-toolbar :collapse="collapse" title="Toolbar">
+    <v-toolbar
+      :collapse="collapse"
+      :collapse-position="collapsePosition"
+      title="Toolbar"
+    >
       <template v-slot:append>
         <div class="d-flex ga-1">
           <v-btn icon="mdi-magnify"></v-btn>
-
           <v-btn icon="mdi-dots-vertical"></v-btn>
         </div>
       </template>
     </v-toolbar>
 
-    <v-card-text class="text-center pa-8">
+    <v-card-text class="d-flex flex-column align-center">
       <v-btn
         color="surface-variant"
         text="Toggle"
         @click="collapse = !collapse"
       ></v-btn>
+      <span class="mt-4">Collapse position:</span>
+      <v-chip-group v-model="collapsePosition" variant="outlined" border mandatory>
+        <v-chip
+          class="px-6"
+          prepend-icon="mdi-arrow-collapse-left"
+          selected-class="v-chip--variant-flat"
+          text="start"
+          value="start"
+          label
+        ></v-chip>
+        <v-chip
+          append-icon="mdi-arrow-collapse-right"
+          class="px-6 mr-0"
+          selected-class="v-chip--variant-flat"
+          text="end"
+          value="end"
+          label
+        ></v-chip>
+      </v-chip-group>
     </v-card-text>
   </v-card>
 </template>
@@ -24,4 +46,14 @@
   import { shallowRef } from 'vue'
 
   const collapse = shallowRef(true)
+  const collapsePosition = shallowRef('start')
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      collapse: false,
+      collapsePosition: 'start',
+    }),
+  }
 </script>

packages/vuetify/src/components/VToolbar/VToolbar.sass

@@ -29,7 +29,15 @@
     &--collapse
       max-width: $toolbar-collapsed-max-width
       overflow: hidden
-      border-end-end-radius: $toolbar-collapsed-border-radius
+
+      &-end
+        margin-inline-start: auto
+
+      &.v-toolbar--collapse-start
+        border-end-end-radius: $toolbar-collapsed-border-radius
+
+      &.v-toolbar--collapse-end
+        border-end-start-radius: $toolbar-collapsed-border-radius
 
       .v-toolbar-title
         display: none

packages/vuetify/src/components/VToolbar/VToolbar.tsx

@@ -32,6 +32,10 @@ export type Density = null | 'prominent' | 'default' | 'comfortable' | 'compact'
 export const makeVToolbarProps = propsFactory({
   absolute: Boolean,
   collapse: Boolean,
+  collapsePosition: {
+    type: String as PropType<'start' | 'end'>,
+    default: 'start',
+  },
   color: String,
   density: {
     type: String as PropType<Density>,
@@ -119,6 +123,7 @@ export const VToolbar = genericComponent<VToolbarSlots>()({
         <props.tag
           class={[
             'v-toolbar',
+            `v-toolbar--collapse-${props.collapsePosition}`,
             {
               'v-toolbar--absolute': props.absolute,
               'v-toolbar--collapse': props.collapse,