In this lesson, we will refactor the ui/src/layouts/MainLayout.vue component and extract the data for our menu into a separate file. We will also improve the TypeScript types for the menu. Notably, we will add some router links to the menus.

Let's start by creating a new branch for our repo:

# Make sure you are within your project
git checkout -b 06-refactoring-the-main-layout-file

Open ui/src/types/index.ts and add the Menu interface at the bottom:

export interface Menu {
  icon: string;
  text: string;
  to?: string | { name: string; params?: { [index: string]: string | number } };
}

The Menu interface will be imported into our menu data file and used to adequately type the menu data. It defines three properties for each menu item. The icon and text properties are mandatory while the to property is optional. The to property is used to define the router navigation path or route object. The index.ts file should be like this snapshot when you are done.

Create and open a new file: ui/src/data/useMenu.ts. We are moving all the arrays in ui/src/layouts/MainLayout.vue which are used for creating our menus into this file. Copy-and-paste the following:

import { Menu } from "src/types";

export const drawerMenuGroupOne: Array<Menu> = [
  { icon: "person", text: "Contacts", to: { name: "home" } },
  { icon: "groups", text: "Groups" },
  { icon: "history", text: "Frequently contacted" },
  { icon: "auto_fix_high", text: "Merge and fix" },
];

export const drawerMenuGroupTwo: Array<Menu> = [
  { icon: "archive", text: "Other contacts" },
  { icon: "delete", text: "Bin" },
];

export const drawerMenuGroupThree: Array<Menu> = [
  { icon: "cloud_upload", text: "Import" },
  { icon: "cloud_download", text: "Export" },
  { icon: "print", text: "Print" },
];

export const createMenu: Array<Menu> = [
  { icon: "person_add", text: "Contact", to: { name: "new_contact" } },
  { icon: "group_add", text: "Group" },
];

This file exports for arrays of Menu items. They are the same arrays defined in the return statement of the setup function in ui/src/layouts/MainLayout.vue. The minor addition is that we've added the to property in two of the Menu items to define the route object. The Menu type is also used to type all the four arrays.

Your useMenu.ts file should look like this file.

Open ui/src/layouts/MainLayout.vue file and make the following changes to add router navigation links:

1. On Line 94, add the to prop (:to="menu.to") to q-btn > q-menu > q-list > q-item

             <q-item
               v-for="menu in createMenu"
               :key="menu.text"
               clickable
               v-close-popup
               :to="menu.to"
               clickable
               aria-hidden="true"
             >
             ...
   

   On Line 173, add the to prop (:to="link.to") to q-drawer > q>scroll-area > q-list > q-item

       <q-item
         v-for="link in links1"
         v-for="link in drawerMenuGroupOne"
         :key="link.text"
         :to="link.to"
         clickable
         class="GPL__drawer-item"
       >
       ...
   

   Repeat this Line 190 and 207.

In the script section, add the import statement:

import {
  drawerMenuGroupOne,
  drawerMenuGroupTwo,
  drawerMenuGroupThree,
  createMenu,
} from "../data/useMenu";

From Line 266, replace the arrays: links1, links2, links3, and createMenu with the imported arrays.

Your return statement should look like this:

    return {
      leftDrawerOpen,
      search,
      drawerMenuGroupOne,
      drawerMenuGroupTwo,
      drawerMenuGroupThree,
      createMenu,
      toggleLeftDrawer,
      toggleMobileSearchInput,
      showHeaderToolbarTitle,
    };

Your ui/src/layouts/MainLayout.vue file should look like this snapshot.

Save all your files, commit and merge with the master branch.

git add .
git commit -m "refactor(ui): move menu arrays outside MainLayout.vue"
git push --set-upstream origin 06-refactoring-the-main-layout-file
git checkout master
git merge master 06-refactoring-the-main-layout-file
git push