Create ToDo App - Step 1

wtsang11 commented 3 years ago

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

wtsang11 commented 3 years ago

Add Page Navigation to Sidebar (Drawer)

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.

wtsang11 commented 3 years ago

Tab Navigation for Mobile

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

wtsang11 commented 3 years ago

Put Navigation Data in an Array

layouts/Layout.vue

q-item

<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-section> </q-item>

Footer

<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>

Array of navigation data

data() {
    return {
      leftDrawerOpen: this.$q.platform.is.desktop,
      // essentialLinks: linksData,
      navs: [
        { label: 'Todo', icon: 'list', to: '/' },
        { label: 'Settings', icon: 'settings', to: '/settings' },
      ],
    };
  },

wtsang11 commented 3 years ago

Only Show Drawer on Desktop and Only Show Tabs on Mobile

layouts/Layout.vue

Show Left QDrawer only at a minimum width 768 px

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">

Show Footer when width is smaller than 768 px

No Quasar support, but @media query can be used:

<style scoped>
@media screen and (min-width: 768px) {
  .q-footer {
    display: none;
  }
}
</style>

wtsang11 commented 3 years ago

Add Style to make Layout Look Less Generic

layouts/Layout.vue

Using the Layout Builder to get the 11 char format string for the view property of q-layout

<q-layout view="hHh lpR fFf">

https://quasar.dev/layout/layout#layout-builder

Replace and delete generic text in header

Apply absolute-center style

https://quasar.dev/style/positioning#introduction

Delete the unneeded q-btn hamburger button

Reduce the width of the Drawer to 250 px

:width="250"

Set color for the Drawer

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;
}

wtsang11 commented 3 years ago

Add SCSS Support to make styling easier to modify and maintain

Just add lang="scss" to the

wtsang11 / TechExplore