Breadcrumb.vue

<template>
  <div class="fm-breadcrumb">
    <nav aria-label="breadcrumb">
      <ol
        class="breadcrumb"
        v-bind:class="[
          manager === activeManager ? 'active-manager' : 'bg-light',
        ]"
      >
        <li class="breadcrumb-item" v-on:click="selectMainDirectory">
          <span class="badge badge-secondary">
            <i class="far fa-hdd" />
          </span>
        </li>
        <li
          class="breadcrumb-item text-truncate"
          v-for="(item, index) in breadcrumb"
          v-bind:key="index"
          v-bind:class="[breadcrumb.length === index + 1 ? 'active' : '']"
          v-on:click="selectDirectory(index)"
        >
          <span>{{ item }}</span>
        </li>
      </ol>
    </nav>
  </div>
</template>

<script>
export default {
  name: "Breadcrumb",
  props: {
    manager: { type: String, required: true },
  },
  computed: {
    /**
     * Active manager name
     * @returns {default.computed.activeManager|(function())|string|activeManager}
     */
    activeManager() {
      return this.$store.state.fm.activeManager;
    },

    /**
     * Selected Disk for this manager
     * @returns {default.computed.selectedDisk|(function())|default.selectedDisk|null}
     */
    selectedDisk() {
      return this.$store.state.fm[this.manager].selectedDisk;
    },

    /**
     * Selected directory for this manager
     * @returns {default.computed.selectedDirectory|(function())|default.selectedDirectory|null}
     */
    selectedDirectory() {
      return this.$store.state.fm[this.manager].selectedDirectory;
    },

    /**
     * Breadcrumb
     * @returns {*}
     */
    breadcrumb() {
      return this.$store.getters[`fm/${this.manager}/breadcrumb`];
    },
  },
  methods: {
    /**
     * Load selected directory
     * @param index
     */
    selectDirectory(index) {
      const path = this.breadcrumb.slice(0, index + 1).join("/");

      // only if this path not selected
      if (path !== this.selectedDirectory) {
        // load directory
        this.$store.dispatch(`fm/${this.manager}/selectDirectory`, {
          path,
          history: true,
        });
      }
    },

    /**
     * Select main directory
     */
    selectMainDirectory() {
      if (this.selectedDirectory) {
        this.$store.dispatch(`fm/${this.manager}/selectDirectory`, {
          path: null,
          history: true,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.fm-breadcrumb {
  .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    padding: 0.2rem 0.3rem;
    margin-bottom: 0.5rem;
    @include font-size($breadcrumb-font-size);
    list-style: none;
    background-color: $breadcrumb-bg;
    @include border-radius($breadcrumb-border-radius);

    .breadcrumb-item {
      // The separator between breadcrumbs (by default, a forward-slash: "/")
      + .breadcrumb-item {
        padding-left: $breadcrumb-item-padding;

        &::before {
          float: left; // Suppress inline spacings and underlining of the separator
          padding-right: $breadcrumb-item-padding;
          color: $breadcrumb-divider-color;
          content: escape-svg($breadcrumb-divider);
        }
      }

      // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
      // without `<ul>`s. The `::before` pseudo-element generates an element
      // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
      //
      // To trick IE into suppressing the underline, we give the pseudo-element an
      // underline and then immediately remove it.
      + .breadcrumb-item:hover::before {
        text-decoration: underline;
      }
      // stylelint-disable-next-line no-duplicate-selectors
      + .breadcrumb-item:hover::before {
        text-decoration: none;
      }

      &.active {
        color: $breadcrumb-active-color;
      }
    }

    &.active-manager {
      background-color: #c2e5eb;
    }

    .breadcrumb-item:not(.active):hover {
      cursor: pointer;
      font-weight: normal;
      color: #6d757d;
    }
  }
}
</style>