In my app the left drawer is not fixed like in the examples when content in the the page component is scrolled it scrolls with it.
I’ve check my html against the example for my layout page and that is all fine. The props for the drawer are just as in the example.
I see no special css in the codepen so I assume that a fixed drawer is the default
This project has come forward from pre 1.0 but I assumed any core css or css in the layout component was updated.
https://github.com/quasarframework/quasar/tree/dev/ui/src/css
so I scrubbed node_modules and reinstalled. Still there.
I built a clean new app. Tossed in some content. Works fine
Just can’t put my finger on issue.
Any suggestions?
using
Pkg quasar… v1.9.8
Pkg @quasar/app… v1.6.0
<template>
<q-layout view="hHh lpR fFf">
<!-- Header/Toolbar -->
<q-header elevated v-if="this.isAuthenticated">
<q-toolbar>
<q-btn
dense
flat
round
icon="menu"
@click="menuOpen = !menuOpen"
/>
<q-toolbar-title>
{{ appName ? `${appName} -` : '' }} {{ pageName() }}
<!-- <div slot="subtitle">{{subTitle}}></div> -->
</q-toolbar-title>
<q-btn
icon="stop"
small
color="secondary"
round
@click="logout('admin')"
v-show="isAdmin"
>
<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
Exit Administrator Configuration Mode
</q-tooltip>
</q-btn>
<q-btn
class=""
icon="fas fa-key"
small
round
@click="pinpad.admin=!pinpad.admin"
v-show="isAuthenticated&&!isAdmin"
>
<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
Enter Configuration Mode - Requires Administrator Pin
</q-tooltip>
</q-btn>
<q-btn
icon="home"
small
round
color="secondary-1"
text-color="secondary-1"
to="/home"
>
<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
Home - Dashboard
</q-tooltip>
</q-btn>
</q-toolbar>
</q-header>
<!-- MENU -->
<q-drawer
v-if="this.isAuthenticated"
show-if-above
v-model="menuOpen"
side="left"
>
<q-drawer-menu
:menu="menu"
:heading="isAdmin ? 'Configuration':'Control'"
@active="(item) => active=item"
:access="isAdmin ? 2 : 1"
/>
</q-drawer>
<!-- main page -->
<q-page-container>
<router-view />
<!-- <router-view :key="$route.name" /> -->
<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
<q-btn fab icon="keyboard_arrow_up" />
</q-page-scroller>
</q-page-container>
<!-- modals -->
<q-dialog v-model="pinpad.admin">
<q-pin-pad
@validate="authenticate($event,'admin')"
message="Enter Pin for Adminstator Access"
title="Administrator Access"
/>
</q-dialog>
<q-dialog v-model="pinpad.user" persistent>
<q-pin-pad
@validate="authenticate($event,'user')"
message="Enter Pin for System Access"
title="System Access"
/>
</q-dialog>
<!-- footer toolbar -->
<q-footer elevated v-if="this.isAuthenticated">
<q-toolbar>
<div style="padding-right: 1em">
Status:
</div>
<q-spinner-hourglass v-if="get('footer.spinner')" />
<q-toolbar-title>
{{ get('footer.message') || '' }}
</q-toolbar-title>
<q-btn
glossy
:class="cstatus('state')"
>
{{ cstatus('state') }}
<q-tooltip
anchor="bottom middle"
self="top middle"
:offset="[0, 20]"
>
System Controller Status
</q-tooltip>
</q-btn>
<q-item class="etime">
{{ `uptime: ${cget('uptime') || '' }` }}
</q-item>
</q-toolbar>
</q-footer>
</q-layout>
</template>
<script>
import idleTimeout from 'idle-timeout'
import { openURL } from 'quasar'
// ----------- INTERNAL DEPENDENCIES ------------
// assests
import menu from 'assets/menu'
// components
import QDrawerMenu from 'src/components/DrawerMenu'
import QPinPad from 'src/components/PinPad.vue'
// MIXINS
// general mixins
import authenticate from 'src/mixins/authenticate' // maybe use an authentication api passed as a prop instead?
// store mixins
import state, { bindState } from 'src/mixins/state'
// database mixins
import docProp from 'src/mixins/doc-prop'
import database from 'src/mixins/database'
// controller websocket
import controller from 'src/mixins/controller'
// ----------- INTERNAL DEPENDENCIES ------------
export default {
data () {
return {
menuOpen: false,
menu: menu,
pinpad: { user: false, admin: false },
active: {} // last/active sidebar item
}
},
components: {
QDrawerMenu,
QPinPad
},
mixins: [database, controller, authenticate, state, docProp],
props: [], // must pass service name as prop in either route call or calling template
// warning: no computed values accessing the feathers-vuex store
computed: {
readonly () {
return (!this.appDBLive || !this.appActive ||
!this.isAdmin || !this.isAuthenticated)
},
appName: function () {
return 'APP'
// return this.getConfigDocProp('name') || 'UCI Application'
}
},
watch: {
readonly: function (val) {
console.log('setting global readonly', val)
this.set('db.readonly', val)
},
userState: async function (state) {
// this.$router.push({ path: '/home' })
// this.connectController()
// } else {
// await this.removeControllerListeners()
// await this.$socket.disonnect()
// this.$q.notify({ color: 'negative', message: 'socket to controller has been closed' })
// console.log('unload the store here')
// }
}
},
methods: {
openURL,
pageName () {
const rname = this.$route.name || this.$route.params.name
if (this.active ? this.active.name : false) {
const a = this.active
if (this.menu.items.find(item => item.name === rname)) return a.label ? a.label : a.name[0].toUpperCase() + a.name.slice(1)
}
return rname[0].toUpperCase() + rname.slice(1)
}
},
async beforeCreate () {
},
created () {
// set site load defaults
this.set('appNameSpace', '_application')
bindState(this, this.get('appNameSpace'), 'app') // for cget and cset
this.set('db.locked', false) // unlock after authentication
this.set('db.ready', false) // connected and all loaded
this.cset('state', 'unavailable') // controller application state
this.cset('db.live', true) // if controller application is listening for database changes
// to logout the user on idle
const idle = idleTimeout(this.logout, { element: document, timeout: 1000 * 60, loop: true })
idle.pause()
},
async beforeMount () {
},
async mounted () {
await this.initDatabase() // will be pushed to database page if any issues
await this.loadCollections()
await this.connectController()
console.log('authenticated?', this.isAuthenticated)
if (!this.isAuthenticated) this.pinpad.user = true
this.$router.push({ path: '/home' })
},
beforeDestroy () {
}
}
</script>
<style lang="stylus">
.etime
background transparent
</style>
I’ve apparently overridden some css?