Creating the top bar component

In this part, we will create the top-bar component that will be used in the layout of our page:

1. In the src/components folder, create a file named TopBar.vue and open it.
2. In the <script> section of the single file component, we will export a default JavaScript object, with the name property defined as TopBar:

<script>
export default {
  name: 'TopBar',
};
</script>

3. Inside the <template> section, create a v-app-bar component with the app, dark, and dense attributes defined as true, and the color attribute defined as primary:

<v-app-bar
 color="primary"
  app
  dark
  dense
></v-app-bar>

4. Inside the component, create a v-app-bar-nav-icon component with an event listener on the click event, sending an event 'open-drawer' when the button is clicked:

<v-app-bar-nav-icon
  @click="$emit('open-drawer')"
/>

5. Finally, as a sibling of the v-app-bar-nav-icon component, add a v-toolbar...