Vuetify: Make v-navigation-drawer take up all space to top left corner instead of v-app-bar
I have a VuetifyJS (v3) page with a v-app-bar and v-navigation-drawer both present, and both with the app prop set. The v-app-bar takes up all the horizontal space extending from the top left corner. The v-navigation-drawer starts from underneath the v-app-bar. How do reverse this relationship? I.e. make the v-navigation-drawer take up all vertical space starting from the top left corner and have the v-app-bar start from the side of the v-navigation-drawer? The vuetifyjs.com docs pages actually do this (see below). So my Q is how do I do what vuetifyjs.com is doing here?
Documentation for this is here: https://next.vuetifyjs.com/en/features/application-layout/
The way layout components arrange themselves is controlled by the order they appear in the template, and can be adjusted with the order prop which behaves like order in CSS.
- Styling issues with Chartist + VueJs + Webpack
- v-img not showing image from folder
- Centralize radio-group Vuetify
- How do I change the vuetify theme background color
- Open a dropdown with right click in Vue3 and Vuetify3
- vuetify2 to vuetify3 transition-group no longer working
- How to change style or add over component on headers of v-data-table on vuetify3
- How to prevent the selected state from being released when an already selected element in v-list of vuetify3
- How to keep the reactivity of data when passing it into a function?
- v-autocomplete/v-select width changes depending on item length (Vue/Vuetify 3)
- How to add tooltip to datatable header in vuetify 3?
- How to change vuetify "append-outer-icon" size?
- How to call a function on append-icon click in Vuetify.js?
- Vuetify 3 v-file-input, clickable chips
- How to set the background color of Vuetify v-data-table row on hover?
- How to use Vuetify tabs with vue-router
- How to change tooltip background of Vuetify 3?
- vuetifyjs selects with 'hide-selected=true' show only listing first 20 items
- What are the scss variables for modifying a Vuetify 3 v-text-field outline?
- How to create an alert the fade after a duration in Vuetify?
- Close a Vuetify v-dialog in a custom component when using v-slot:activator
- Relation of v-select and v-checkbox on two others components
- Color property of Vuetify 3 button applied to text not button
- Vuetify2 grid layout
- Vuetify v-tooltip is not displaying when v-list is disabled
- v-data-table checkboxes select all checkboxes
- overide plain styling on <v-card-actions>
- Vuetify: changing min-height of v-application--wrap
- How to ensure all items in a v-combobox follow rule
- How to use v-app-bar for scrolling behavior in Vuetify 3