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

In this lesson, we will improve the user experience of the header of our Google Contacts clone app.

At the end of the lesson, your app should look like the video below. The header should be as responsive as in the video.

Open ui/layouts/MainLayout.vue. The changes with the template section of the component file is much. Pasting the codes here will be counterproductive. So, refer to this snapshot, then copy and paste the entire code into your MainLayout.vue file. I will explain the changes that were made. Please follow along.

Start by creating a new branch of your project.

git checkout -b 02-header-customisation

The q-toolbar component (Line 4) found under q-layout > q-header components was completely restructured. You will notice that all the components which were directly under the q-toolbar have been moved inside a template wrapper which is conditioned to be rendered only when showHeaderToolbarTitle is true. When not true, a q-input component (which provides search functionality for small screens) is rendered (see Line 111). The q-input component has styled with a width of 100vw so that it spans the entire width of the viewport.

You can jump to any line by press CTRL+G in your code editor and entering the line number.

The showHeaderToolbarTitle is a computed property (see Line 235) is ensures that the q-input component on Line 111 is only rendered when the mobile search (for small screens) is not visible and the screen is not less than the sm breakpoint.

...
const showHeaderToolbarTitle = computed(
      () =>
        !isMobileSearchVisible.value ||
        (isMobileSearchVisible.value && !$q.screen.lt.sm)
    );
...

Note, for you to use the $q object within the script section, you have to import it from the quasar library. But within the template section, it is already globally injected by the Quasar library.

<script>
...
import { useQuasar } from "quasar";
...

export default {
  name: "GoogleContactsLayout",
  setup() {
    const $q = useQuasar();
    ...
   }
}
</script>

The toggleMobileSearchInput function is used to toggle the visibility of the mobile search and default toolbar.

 function toggleMobileSearchInput() {
      if ($q.screen.lt.sm) {
        isMobileSearchVisible.value = !isMobileSearchVisible.value;
      }
    }

At Line 16, the q-toolbar-title is further constrained with v-if="$q.screen.gt.xs" and will be rendered when the screen size is greater than the extra small (xs) breakpoint.

<q-toolbar-title shrink class="row items-center no-wrap">
            <q-btn
              v-if="$q.screen.gt.xs"
              round
              unelevated
              color="primary"
              icon="person"
            />
            <span
              :class="[
                $q.screen.gt.xs && 'q-ml-sm',
                $q.screen.lt.xs && 'hidden',
              ]"
              >Contacts</span
            >
          </q-toolbar-title>

At Line 35, the q-input component which provides the default search function will not render when the breakpoint is less than sm.

<q-input
            v-if="!$q.screen.lt.sm"
            class="GPL__toolbar-input"
            dense
            standout="bg-primary"
            v-model="search"
            placeholder="Search"
          >
            <template v-slot:prepend>
              <q-icon
                v-if="search"
                name="clear"
                class="cursor-pointer"
                @click="search = ''"
              />
            </template>
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>

At Line 58, a q-btn component is provided for toggling the visibility of the mobile search input via the toggleMobileSearchInput function. It is only rendered by the breakpoint is less than sm.

<q-btn
            v-if="$q.screen.lt.sm"
            @click="toggleMobileSearchInput"
            flat
            round
            ripple
            icon="search"
            class="q-ml-sm q-mr-md"
          />

Save the file, commit and merge with the master branch.

git add .
git commit -m "feat(ui): complete header customisation"
git push --set-upstream origin 02-header-customisation
git checkout master
git merge master 02-header-customisation
git push

In the next lesson, we will begin to build the components to be rendered within the router-view component.