The category menu

You can begin to build the product listing page and implement the categories menu as depicted in this diagram by following these next steps:

1. Create the folder /src/components/market.
2. Implement the CategoryMenyItem component:
   1. Create the file /src/components/market/CategoryMenuItem.vue
   2. Write the following code:

<template>
  <div class="container" @click="onSelected" :class="{selected: checked}">
    <span>{{ categoryName }}</span>
  </div>
</template>

<script>
export default {
  name: 'CategoryMenuItem',
  props: {
    categoryName: String,
    checked: Boolean,
  },
  methods: {
    onSelected: function() {
      this.$emit('selected', this.categoryName);
    },
  },
}
</script>

<style scoped>
.container {
  display: inline;
  padding: 5px 3px 5px 3px;
  border: 1px solid black;
  padding: 2px 5px 2px 5px;
  cursor: pointer;
}

.container:hover {
  background-color: lightgray;
}

.selected { 
  background-color: bisque...