base_ui/components/other/TheSidebarItem.vue

<template>
  <li
    class="mb-1"
    @mouseenter="emitCustomEvent($event, 'in')"
    @mouseleave="emitCustomEvent($event, 'out')"
    v-for="(item, key, index) in menuItem"
    :class="['color-' + item.color]"
  >
    <div v-if="item?.subMenu?.length">
      <RouterLink :to="{ name: item.link }" class="has-sub-items gl-link">
        <i class="nav-icon-container" :class="item.icon"></i>
        <span class="nav-item-name">
          {{ item.title }}
        </span>
      </RouterLink>

      <ul class="sidebar-sub-level-items" :id="item.link">
        <li class="fly-out-top-item active gl-link">
          <span class="fly-out-top-item-container">
            <strong class="fly-out-top-item-name">
              {{ item.title }}
            </strong>
          </span>
        </li>
        <li class="divider fly-out-top-item"></li>

        <li
          @click.prevent="navigateTo(subMenu)"
          v-for="(subMenu, j) in item.subMenu"
          :key="j"
        >
          <RouterLink
            tag="span"
            :disabled="true"
            exact
            :to="{ name: subMenu.link }"
            :title="subMenu.title"
            class="gl-link btn sub-level-item"
          >
            <i class="nav-icon-container " :class="subMenu.icon">
              <span class="path1"></span><span class="path2"></span>
            </i>
            <span class="nav-item-name gl-link mr-1">
              {{ subMenu.title }}
            </span>
          </RouterLink>
        </li>
      </ul>
    </div>

    <RouterLink
      v-else
      exact
      :to="{ name: item.link }"
      :title="item.title"
      class="gl-link"
    >
      <i class="nav-icon-container" :class="item.icon">
        <span class="path1"></span><span class="path2"></span
      ></i>
      <span class="nav-item-name">
        {{ item.title }}
      </span>
    </RouterLink>
  </li>
</template>
<script>
import { mapState, mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { useAuthStore } from "~/stores/authStore";
export default {
  props: ["menuItem"],

  data() {
    return {
      topico: [],
      botico: [],
      top: 0,
      menuColor: 1,
    };
  },
  computed: {
    ...mapState(useCommonStore,["isSidebarCollapsed", "isDesktop", "isMobile"]),
  },

  methods: {
    navigateTo(route) {
      this.menuColor = route.color;
      this.$router.push({ name: route.link }).catch(() => {});
    },
    toggleSidebarMenu() {
      this.$store.commit("TOGGLE_SIDEBAR_MENU");
    },
    emitCustomEvent(event, type) {
      const posY = event.pageY - event.offsetY;
      event.target.lastChild.style.top = posY + "px";
    },
  },
  
};
</script>

<style lang="scss">
.gl-link {
  font-size: 0.875rem;
  color: #333238;

  .tavasi {
    font-size: 1.1rem;
  }
}

.square.s16,
svg.s16 {
  width: 16px;
  height: 16px;
}

svg.s12 {
  width: 12px;
  height: 12px;
}
svg.s18 {
  width: 18px;
  height: 18px;
}
</style>
<style scoped lang="scss">
.nav-sidebar {
  position: fixed;
  bottom: 0;
  right: 0;
  transition: width 0.2s, left 0.2s;
  z-index: 600;
  width: var(--sidebar-width);
  top: var(--header-height, 48px);
  background-color: #fbfafd;
  border-left: 1px solid #e9e9e9;

  .has-sub-items.RouterLink-exact-active.RouterLink-active {
    background-color: #fbfafd !important;
    font-weight: bold;
    & + .sidebar-sub-level-items {
      display: none;
    }
  }

  .has-sub-items.RouterLink-exact-active.RouterLink-active
    + .sidebar-sub-level-items {
    opacity: 1;
    display: block;
    position: static;
    box-shadow: none;
    border-style: none;
    visibility: hidden;
    visibility: visible;
    padding-right: 0.4em;

    .fly-out-top-item {
      display: none;
    }
  }

  &.sidebar-expanded-mobile {
    right: 0 !important;
  }
  li.active > a,
  li:hover > a {
    background-color: #d8f8fd;
  }

  li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
    background-color: rgba(121, 248, 222, 0.301);
  }

  li > a,
  li > .fly-out-top-item-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    width: auto;
    line-height: 1rem;
    transition: none;
    margin: 1px 8px;
    text-decoration: none;
  }

  .nav-sidebar-inner-scroll {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    .sidebar-top-level-items {
      margin-bottom: 60px;

      li {
        white-space: nowrap;
        position: relative;

        .context-header {
          position: relative;
          margin-left: 2px;
          // width: 256px;
          width: var(--sidebar-width);
        }

        &:hover > .sidebar-sub-level-items {
          visibility: visible;
          opacity: 1;
          transition: all 300ms ease-out;
        }

        .nav-icon-container {
          display: flex;
          margin-left: 8px;
        }

        @media (min-width: 576px) {
          a.has-sub-items + .sidebar-sub-level-items {
            min-width: 150px;
          }
        }

        .sidebar-sub-level-items {
          list-style: none;
          position: fixed;
          // margin-right: 0.5rem;
          margin-right: 0;
          margin-top: 0;
          padding-left: 0;
          padding-right: 0;
          padding-bottom: 0.25rem;
          padding-top: 0;
          background-color: #fbfafd;
          box-shadow: 0 0.25rem 1rem rgba(31, 30, 36, 0.24),
            0 0 0.125rem rgba(31, 30, 36, 0.24);
          border-style: none;
          border-radius: 4px;
          visibility: hidden;
          opacity: 0;
          // right: 0;
          // right: 3.5em;
          right: calc(var(--sidebar-width) - 1px);

          li {
            margin-bottom: 0.2em;

            &:not(.fly-out-top-item) {
              padding: 0 0.4em;
            }

            &:hover {
              cursor: pointer;
            }

            .fly-out-top-item-container {
              margin: 0;
              border-radius: 0;
              background-color: rgba(41, 41, 97, 0.08);
            }
          }

          .sub-level-item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            border-radius: 0.5rem;
            width: 100%;
            opacity: 1 !important;
          }
        }
      }

      .nav-icon-container {
        margin-left: 0;
      }

      .badge.badge-pill:not(.fly-out-badge),
      .nav-item-name {
        // border: 0;
        // clip: rect(0, 0, 0, 0);
        // height: 1px;
        // margin: -1px;
        // overflow: hidden;
        // padding: 0;
        // position: absolute;
        // white-space: nowrap;
        // width: 1px;

        text-align: right;
        text-align: start;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      li:not(.fly-out-top-item) > .RouterLink-exact-active.RouterLink-active {
        background-color: #bdf6ff63;
      }

      li:not(.fly-out-top-item):hover > .sub-level-item {
        background-color: rgba(97, 41, 69, 0.08);
      }
    }

    .toggle-sidebar-button,
    .close-nav-button {
      transition: width 0.2s;
      height: 48px;
      padding: 0 16px;
      background-color: #fbfafd;
      border: 0;
      color: #737278;
      display: flex;
      align-items: center;
      background-color: #fbfafd;
      position: fixed;
      bottom: 0;
      // width: 255px;
      width: calc(var(--sidebar-width) - 1px);
    }
  }
  &.js-sidebar-collapsed {
    .nav-sidebar-inner-scroll {
      .sidebar-top-level-items {
        li {
          .context-header {
          }

          &:hover > .sidebar-sub-level-items {
            visibility: visible;
            opacity: 1;
            transition: all 300ms ease-out;
          }

          &.fly-out-top-item {
            display: block;
          }

          .nav-icon-container {
          }

          @media (min-width: 576px) {
            a.has-sub-items + .sidebar-sub-level-items {
            }
          }

          .sidebar-sub-level-items {
            position: fixed;
            padding-right: 0;
            box-shadow: 0 0.25rem 1rem rgba(31, 30, 36, 0.24),
              0 0 0.125rem rgba(31, 30, 36, 0.24);
            border-style: none;
            visibility: hidden;
            opacity: 0;
            right: calc(var(--sidebar-collapsed-width) - 1px);

            li {
              &:not(.fly-out-top-item) {
              }

              &:hover {
              }

              .fly-out-top-item-container {
              }
            }

            .sub-level-item {
            }
          }
        }

        .nav-icon-container {
        }

        .badge.badge-pill:not(.fly-out-badge),
        .nav-item-name {
        }

        li:not(.fly-out-top-item)
          > .RouterLink-exact-active.RouterLink-active {
          background-color: #bdf6ff63;
        }
      }
    }

    .has-sub-items.RouterLink-exact-active.RouterLink-active
      + .sidebar-sub-level-items {
      .fly-out-top-item {
        display: block;
      }
    }
  }

  &.sidebar-collapsed-desktop {
    width: var(--sidebar-collapsed-width);
    .nav-sidebar-inner-scroll {
      .sidebar-top-level-items {
        .sidebar-sub-level-items {
          right: calc(var(--sidebar-collapsed-width) - 5px);
        }
      }

      .toggle-sidebar-button {
        width: calc(var(--sidebar-collapsed-width) - 1px);
        padding: 0 21px;

        .collapse-text {
          text-decoration: none;
          display: none;
        }
      }
    }
  }
  &.sidebar-expanded-mobile {
    right: 0 !important;
  }
  .toggle-sidebar-button,
  .close-nav-button {
    transition: width 0.2s;
    height: 48px;
    padding: 0 16px;
    background-color: #fbfafd;
    border: 0;
    color: #737278;
    display: flex;
    align-items: center;
    background-color: #fbfafd;
    position: fixed;
    bottom: 0;
    // width: 255px;
    width: calc(var(--sidebar-width) - 1px);
  }
}
</style>