smartproc-fe/src/components/side-nav-menu.vue

<template>
  <div
    class="side-navigation-menu"
    @click="forwardClick"
  >
    <slot />
    <div v-for="item in menus" :key="item.id" class="relative-view">
      <img :src="item.icon" alt="icon" @click="handleIconClick(item.text)" :class="selectedMenus === item.text ? 'active-icons' : 'icons'">

      <div ref="expandRef" v-if="item.text === selectedMenus" class="absolute-view">
        <div class="expand-title">
          <p>{{item.text}}</p>
        </div>

        <dx-scroll-view ref="scrollViewRef" :class="checkLength(item.items) ? 'expand-menu-height' : 'expand-menu'">
          <div v-for="it in item.items" :key="it.id" class="no-wrap">
            <p :class="route.path === it.path ? 'pointer-active' : 'pointer'" @click="handleItemClick(item.text,it.path)">
              {{it.text}}
            </p>
          </div>
        </dx-scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
import DxScrollView from "devextreme-vue/scroll-view";
import { sizes } from '../utils/media-query';
import navigation from '../app-navigation';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'; 
import auth from "../auth";

export default {
  props: {
    compactMode: Boolean
  },
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();

    const menus = ref("");
    const selectedMenus = ref("")

    auth.getUser().then((e) => {
      const listMenu = e.data.menus.filter((it) => it.text !== "Home")
      menus.value = listMenu
      });
    //console.log(navigation);
    console.log(menus);

    const isLargeScreen = sizes()['screen-large'];
    const items = navigation.map((item) => {
      if(item.path && !(/^\//.test(item.path))){ 
        item.path = `/${item.path}`;
      }
      return {...item, expanded: isLargeScreen} 
    });

    const expandRef = ref(null)
    const treeViewRef = ref(null);
    const scrollViewRef = ref(null);

    function forwardClick (...args) {
      context.emit("click", args);
    }

    function handleItemClick(text, path) {
      if (!path) {
        return;
      }
      router.push(path);
      selectedMenus.value = text
    }

    function handleIconClick(text) {
      if(text === selectedMenus.value) {
        selectedMenus.value = ""
        return
      }
      selectedMenus.value = text 
    }

    function updateSelection () {
      if(route.path === "/home") {
        selectedMenus.value = "Home"
        selectedMenus.value = ""
      }
    }

    function checkLength(it) {
      return it.length > 4
    }

    onMounted(() => { 
      updateSelection();
      if (props.compactMode) {
        treeViewRef.value.instance.collapseAll();
      }
    });
    

    watch(
      () => route.path,
      () => {
        updateSelection();
      }
    );
    
    watch(
      () => props.compactMode,
      () => {
        if (props.compactMode) {
          treeViewRef.value.instance.collapseAll();
        } else {
          updateSelection();
        }
      }
    );

    return {
      treeViewRef,
      items,
      forwardClick,
      handleItemClick,
      updateSelection,
      menus,
      route,
      selectedMenus,
      handleIconClick,
      scrollViewRef,
      checkLength,
      expandRef
    };
  },components: {
    DxScrollView
  }
};
</script>

<style lang="scss">
@import "../dx-styles.scss";
@import "../themes/generated/variables.additional.scss";
@import "../themes/generated/variables.base.scss";

.side-navigation-menu {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  width: $side-bar-width !important;
  box-shadow: $base-shadow-color 4px 100px 10px 0px !important;
  padding-top: 25px !important;
  background-color: white;
  padding-left: 9px;
  
  .relative-view {
    position: relative;

    .icons {
      border-radius: 4px !important;
      width: $side-bar-icon-size !important;
      height: $side-bar-icon-size !important;
      border: 1px solid $base-border-color !important;
      margin-bottom: 24px;
      cursor: pointer;
    }

    .active-icons {
      border-radius: 4px !important;
      width: $side-bar-icon-size !important;
      height: $side-bar-icon-size !important;
      border: 1px solid $datagrid-columnchooser-item-color !important;
      margin-bottom: 24px;
      cursor: pointer;
    }
    
    .absolute-view {
      position: absolute;
      top: 0;
      z-index: 1;
      background: transparent;
      left: $side-bar-expand-left;
      width: $side-bar-expand-width;

        .pointer {
          cursor: pointer;
          width: 100%;
          background: white;
          padding: 4px 38px;
          color: $base-text-color;
        }

        .pointer-active {
          cursor: pointer;
          width: 100%;
          background: white;
          padding: 4px 38px;
          color: $datagrid-columnchooser-item-color;
        }

        .expand-title {
          border-radius: 0px 8px 0px 0px !important;
          background: $datagrid-columnchooser-item-color;
          margin: 0 !important;
          color: white;
          padding: 1px 22px;
          font-size: 18px;
          font-weight: 600;
        }

        .expand-menu {
          background: white;
          margin-top: 0px !important;
          padding: 8px 0px;
          border-radius: 0px 0px 8px 0px !important;
        }

        .expand-menu-height {
          background: white;
          margin-top: 0px !important;
          padding: 8px 0px;
          border-radius: 0px 0px 8px 0px !important;
          height: 200px;
        }

        .no-wrap {
          white-space: nowrap;
        }
      }
  }


}
</style>