This doesn’t answer your question directly for the built-in/example drawer menu but
I wrote a drawer menu component that one can drop into the drawer that gives more/easier control over the elements.
If you don’t want to use it then try using similar classes in the existing drawer section of your template.
fyi .q-drawer__content is the primary class element into which the component drops. Take a look at styling section below
This component uses a menu prop which is just an object with the menu options. This for me was way easier than hard coding each choice. I just change an entry or change it’s disabled or hide property. Very easy to do dynamically too.
<template>
<q-list class="q-drawer-menu">
<q-item-label class="q-drawer-menu__heading" header v-if="menu.heading">{{ menu.heading }} </q-item-label>
<q-separator v-if="menu.separator"/>
<!-- <q-separator spaced v-if="menu.separator"/> -->
<div :key="item.name" v-for="item in menu.items">
<q-item
:clickable="item.disabled"
v-if="!item.hidden"
:class="item.disabled ? 'disabled':'enabled'"
class="q-drawer-menu__item"
@click="$emit('active',item)"
:to="`/${item.path||item.name}`">
<q-tooltip v-if="item.tip">{{item.tip}}</q-tooltip>
<q-item-section v-if="!menu.disableIcons" top avatar>
<q-avatar v-if="item.icon" :color="item.iconColor" class="q-drawer-menu__item--icon" :icon="item.icon" />
<!-- <q-icon v-if="item.icon" :color="item.iconColor || 'primary'" class="q-drawer-menu__item--icon" :name="item.icon" /> -->
</q-item-section>
<q-item-section>
<q-item-label class="q-drawer-menu__item--name">{{ item.label ? item.label : item.name[0].toUpperCase()+item.name.slice(1) }}</q-item-label>
<q-item-label caption class="q-drawer-menu__item--caption" lines="2">{{item.caption}}</q-item-label>
</q-item-section>
</q-item>
<q-separator v-if="!item.disabled & menu.separator" />
</div>
<q-icon />
</q-list>
</template>
<script>
import { QItem, QItemLabel, QItemSection, QSeparator, QIcon } from 'quasar'
// is array of object that looks
export default {
data () {
return {
pin: '',
disabled: false
}
},
props: ['menu'],
methods: {
},
watch: {
pin (val) {
if (val && val.length === this.pin.length) {
this.disabled = true
this.validatePin()
}
}
},
components: { QItem, QItemLabel, QItemSection, QSeparator, QIcon }
}
</script>
<style lang="stylus">
.q-drawer__content
background-color $menu-color
.q-drawer-menu__heading
color $menu-heading-text-color
background $menu-heading-color
.q-drawer-menu__item
padding .2em
color $menu-item-text-color
background $menu-item-color
.q-drawer-menu__item
&.disabled
background $menu-item-disabled-color
.q-drawer-menu__item--caption
color $menu-item-caption-text-color
.q-drawer-menu__item--icon
color $menu-item-icon-symbol-color
background-color $menu-item-icon-color
</style>
I put this in assets and then load it and set is as the passed menu prop.
export default {
heading: 'System Configuration',
// disableIcons: true,
// disabled: true,
separator: true,
items: [ // name is only required
// full props supported are, label, name, caption,icon,hidden,disabled
{ label: 'Primary', name: 'config', caption: 'primay configuration', icon: 'fas fa-cog' },
{ name: 'network', path: 'service/network', caption: 'Networked Devices/SBCs/Computers', icon: 'fas fa-network-wired' },
{ name: 'hardware', path: 'service/hardware', caption: 'Hardware Firmware Setup', icon: 'fas fa-microchip' },
{ name: 'circuits', path: 'service/circuits', caption: 'Physical Light/Outlet Circuits Setup', icon: 'fas fa-lightbulb' },
{ name: 'switches', path: 'service/switches', caption: 'Physical and Virtual Switch Setup', icon: 'fas fa-toggle-on' },
{ name: 'security', caption: 'System User Credentials', icon: 'fa fa-shield-alt' },
{ name: 'backup', caption: 'Backup Underlying Database', icon: 'fas fa-save', disabled: true },
{ name: 'help', caption: 'Configuration Help/Docs', tip: 'this is a tip', icon: 'fas fa-info-circle' },
{ name: 'command', caption: 'Custom Command', icon: 'fas fa-chevron-right', hidden: true }
]
}
<q-drawer show-if-above v-model="menuOpen" side="left" bordered>
<q-drawer-menu :menu="menu" @active="(item) => active=item"/>
</q-drawer>
...
import menu from 'assets/menu'
import QDrawerMenu from 'src/components/DrawerMenu'
...
menu: menu,
}
},
components: {
QDrawerMenu
},
...
