The Left Drawer | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)

In this lesson, we will customise the contents of the left drawer and also work on its responsiveness in mobile and desktop views.

Throughout this series, we'll make use of git intensively. This might be an opportunity to learn how to use git for software development.

Make sure that you have setup your workspace with the project repository cloned to your local machine. See:

On your terminal, create and checkout a new branch of the project as below:

git checkout -b 01-the-left-drawer

At the end of this lesson, your MainLayout.vue should be the same as this file.

In the mobile view, the left drawer should float over the header without any layout shift when opened. While in the desktop view, the drawer will shift the q-page-container. Also, the drawer should show by default in desktop view but hidden by default in mobile view. Also, the drawer will have a logo at the top in mobile view but none in desktop view. The video below shows the desktop and mobile experiences of the left drawer.

In Chrome, you can switch to mobile view by pressing CTRL+Shift+I on your keyboard. This will launch the DevTools. Click Toggle Device Toolbar (the second icon from the top left of the DevTools). Then on the top of the page, select Pixel 2 (or any other mobile device).

You will begin by editing the content of the left drawer which can be toggled by clicking the menu button on the top-left corner of the window. It currently contains some placeholders. We want it to look like the drawer in the video above.

Open ui/layouts/MainLayout.vue. And make the following changes.

On Line 15, remove the v-if directive so that the q-toolbar-title component is always displayed irrespective of the screen size. $q.screen is a Quasar global object available in your templates. Read more about this here.

-        <q-toolbar-title
-          v-if="$q.screen.gt.sm"
-          shrink
-         class="row items-center no-wrap"
-      >
+        <q-toolbar-title shrink class="row items-center no-wrap">
          <q-btn round unelevated color="primary" icon="person" />
          <span class="q-ml-sm">Contacts</span>
        </q-toolbar-title>

From Line 90:

1. Make the show-if-above prop to be effective when the screen is greater than the small (sm) breakpoint. This prop ensures that drawer is shown by default when rendered.
2. Add the behavior prop to q-drawer to make it behave as a mobile drawer (that is display above the header) when the screen is less than the medium (md) breakpoint.
3. Add a q-toolbar component which wraps the q-toolbar-title containing the logo. The q-toolbar component will only be rendered when the screen is less than the md breakpoint.

-      show-if-above
+     :show-if-above="$q.screen.gt.sm"
      bordered
      :width="300"
      :breakpoint="500"
+      :behavior="$q.screen.lt.md ? 'mobile' : 'default'"
      @click="leftDrawerOpen = false"
    >
      <q-scroll-area class="fit">
+        <q-toolbar
+          v-if="$q.screen.lt.md"
+          class="GPL__toolbar flex-center"
+          style="height: 64px"
+        >
+          <q-toolbar-title shrink class="row items-center no-wrap">
+            <img
+              src="https://cdn.quasar.dev/img/layout-gallery/logo-google.svg"
+            />
+            <span class="q-ml-sm q-mb-xs">Contacts</span>
+          </q-toolbar-title>
+        </q-toolbar>

Remove Line 148 to 163.

-          <q-separator class="q-my-md" />

-          <q-item
-            clickable
-            class="GPL__drawer-item GPL__drawer-item--storage fixed-bottom"
-          >
-            <q-item-section avatar>
-              <q-icon name="cloud" />
-            </q-item-section>
-            <q-item-section top>
-              <q-item-label>Storage</q-item-label>
-              <q-linear-progress :value="storage" class="q-my-sm" />
-              <q-item-label caption>2.6 GB of 15 GB</q-item-label>
-            </q-item-section>
-          </q-item>

Replace the array, links, with the following:

links1: [
        { icon: "person", text: "Contacts" },
        { icon: "groups", text: "Groups" },
        { icon: "history", text: "Frequently contacted" },
        { icon: "auto_fix_high", text: "Merge and fix" },
      ],
      links2: [
        { icon: "archive", text: "Other contacts" },
        { icon: "delete", text: "Bin" },
      ],
      links3: [
        { icon: "cloud_upload", text: "Import" },
        { icon: "cloud_download", text: "Export" },
        { icon: "print", text: "Print" },
      ],
      createMenu: [
        { icon: "person_add", text: "Contact" },
        { icon: "group_add", text: "Group" },
      ],

Open ui/quasar.conf.js. On Line 87, add the screen object to framework object.

-    config: {},
+    config: {
+      screen: {
+        bodyClasses: true,
+      },
+    },

Save the two files. Now, your UI should like the video above. If you want to copy and paste codes, copy from the snapshot.

Commit the changes and push the branch to your origin repo.

git add .
git commit -m "feat(ui): customise left drawer"
git push --set-upstream origin 01-the-left-drawer

The git add . adds all modified files and makes them commitable.

Merge the current branch into the masterbranch:

git checkout master
git merge master 01-the-left-drawer
git push

To merge a branch into another branch, you must checkout (switch to) that branch you are merging into.

That all for now. In the next lesson, we'll customise the header a little bit more before we start building out the pages.