<template>
  <div class="view-option">
    <div class="menu-info">
      <span class="info" v-if="activeRoute.meta">
        {{ titleCase(activeRoute.meta.title.toLowerCase()) }}
      </span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "view-option",
  props: {
    activeRoute: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      optionData: {},
    };
  },
  computed: {
    ...mapGetters(["deliveryNo"]),
  },
  created() {
    // console.log(this.activeRoute, "activeRoute");
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.view-option {
  width: 100%;
  height: 50px;
  line-height: 40px;
  font-size: 0.88rem;
  border-bottom: 1px solid $fedexBorder;
  background-color: #fff;
  z-index: 999;
}

.menu-info {
  height: 50px;
  line-height: 50px;
  font-size: 0.88rem;
  border-bottom: 1px solid $fedexBorder;
  background-color: #fff;
  margin-left: 230px;

  .info {
    font-weight: 600;
  }
}
</style>