Creating the top-bar component

In the layout wrapper, we will have a top-bar component that will hold the breadcrumbs for where the user currently is. Now we will create the top-bar component and make it available for the layout:

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

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

3. In the <style> section of the single file component, we will make the <style> section scoped and create a class named header-bread. Now, background-color will be defined as #f0f2f5 with a class named bread-menu with the margin defined as 16px 0:

<style scoped>
  .header-bread {
    background-color: #f0f2f5;
  }

  .bread-menu {
    margin: 16px 0;
  }
</style>

4. In the <template> section of the single file component, we will create an a-layout...