Open wtsang11 opened 3 years ago
layouts/Layout.vue
Modify the Layout.vue for navigation to different pages.
Drawer icons can be found at https://material-ui.com/components/material-icons/ The drawer is a list of list items. See List and List Items https://quasar.dev/vue-components/list-and-list-items
note: Add the 'exact' attribute to q-item to make it highlighted only when it is active.
layouts/Layout.vue
In mobile devices, put page links in footer.
Header and Footer https://quasar.dev/layout/header-and-footer#qheader-api
Connecting to view router https://quasar.dev/vue-components/tabs#connecting-to-vue-router
layouts/Layout.vue
<q-item v-for="nav in navs" exact :key="nav.label" :to="nav.to" clickable> <q-item-section avatar> <q-icon :icon="nav.icon" /> </q-item-section> <q-item-section> <q-item-label>{{ nav.label }}</q-item-label> <!-- <q-item-label caption>Todo</q-item-label> --> </q-item-section> </q-item>
<q-footer> <q-tabs> <q-route-tab v-for="nav in navs" :key="nav.label" :to="nav.to" :icon="nav.icon" :label="nav.label" /> </q-tabs> </q-footer>
data() { return { leftDrawerOpen: this.$q.platform.is.desktop, // essentialLinks: linksData, navs: [ { label: 'Todo', icon: 'list', to: '/' }, { label: 'Settings', icon: 'settings', to: '/settings' }, ], }; },
layouts/Layout.vue
QDrawer API https://quasar.dev/layout/drawer#qdrawer-api, Behaviour > Breakpoint Breakpoint widith set to 767 px
<q-drawer v-model="leftDrawerOpen" :breakpoint="767" show-if-above bordered content-class="bg-grey-1">
No Quasar support, but @media query can be used:
<style scoped> @media screen and (min-width: 768px) { .q-footer { display: none; } } </style>
layouts/Layout.vue
<q-layout view="hHh lpR fFf">
https://quasar.dev/layout/layout#layout-builder
https://quasar.dev/style/positioning#introduction
:width="250"
Pick a color for the drawer to match the header "bg-primary" https://quasar.dev/style/color-palette#color-list content-class="bg-primary" in q-drawer tag
what is dark mode? https://quasar.dev/style/dark-mode#introduction
Set text color in drawer to match the text color of the header
Look for a class name (q-router-link--exact-active) when a drawer link is active, example: /settings
<a data-v-2ab51da9="" href="#/settings" class="q-item q-item-type row no-wrap text-grey-4 q-router-link--exact-active q-router-link--active q-item--clickable q-link cursor-pointer q-focusable q-hoverable" tabindex="0" aria-current="page"><div tabindex="-1" class="q-focus-helper"></div><div data-v-2ab51da9="" class="q-item__section column q-item__section--avatar q-item__section--side justify-center"><i data-v-2ab51da9="" aria-hidden="true" role="presentation" class="material-icons q-icon notranslate">settings</i></div><div data-v-2ab51da9="" class="q-item__section column q-item__section--main justify-center"><div data-v-2ab51da9="" class="q-item__label">Settings</div></div></a> Override the default color: .q-drawer .q-router-link--exact-active { color: white !important; }
Just add lang="scss" to the
Create Pages and Routes
https://quasar.dev/layout/routing-with-layouts-and-pages
Modify router/routes.js Add the required pages in pages folder Downgrade by merging EssentialLink component by merging it in the layout file: layouts/Layout.vue (renamed from MainKayout.vue).
note: vue's router-view is used https://quasar.dev/layout/layout#usage