bfg-common 1.0.21 → 1.0.23

package/components/common/mainNavigationPanel/MainNavigationPanel.vue

@@ -1,343 +1,343 @@
-<template>
-  <div
-    :class="['main-navigation-panel', { pinned: menuPined }]"
-    @mouseenter="mainMenuHovered = true"
-    @mouseleave="mainMenuHovered = false"
-  >
-    <div
-      v-show="showMenu"
-      :class="['nav-context', { collapsed: menuCollapsed }]"
-    >
-      <div class="category-wrap">
-        <div class="clr-vertical-nav">
-          <button
-            v-if="menuPined"
-            id="nav-trigger"
-            class="nav-trigger"
-            @click="collapseMenu"
-          >
-            <span class="nav-trigger-icon">
-              <atoms-the-icon name="doubleArrows" />
-            </span>
-          </button>
-          <div class="nav-content">
-            <template v-for="(item, key) in navigationItems" :key="key">
-              <nuxt-link
-                v-for="(item2, key2) in item"
-                :id="`nav-item-${key}-${key2}`"
-                :key="item2.id"
-                class="nav-link"
-                active-class="active"
-                :to="item2.to"
-                :title="item2.title"
-                @click="hideMainMenu"
-              >
-                <span class="nav-text">
-                  <span
-                    :class="['clr-flex-shrink-0 category-icon', item2.iconName]"
-                  />
-                  <span class="category-text" :title="item2.title">{{
-                    item2.title
-                  }}</span>
-                </span>
-              </nuxt-link>
-              <div
-                v-show="key !== navigationItems.length - 1"
-                class="nav-divider"
-              />
-            </template>
-          </div>
-        </div>
-      </div>
-
-      <div v-show="!menuCollapsed" class="pin-wrap">
-        <div class="clr-checkbox-wrapper">
-          <input
-            id="pin-menu-control"
-            v-model="menuPined"
-            type="checkbox"
-            @change="changeMenuPin"
-          />
-          <label for="pin-menu-control">{{ localization.pinMenu }}</label>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/models/interfaces'
-import { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/models/types'
-
-const props = defineProps<{
-  mainMenuStatus: boolean
-  navigationItems: UI_I_NavigationItem[][]
-  parentStatus: UI_T_ParentStatus
-}>()
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-}>()
-
-const { $store } = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const route = useRoute()
-
-const showMenu = computed<boolean>(
-  () => props.mainMenuStatus || menuPined.value
-)
-
-const menuPined = ref<boolean>(false)
-const changeMenuPin = (): void => {
-  useLocalStorage('menuPined', menuPined.value)
-}
-
-const menuCollapsed = ref<boolean>(false)
-const collapseMenu = (): void => {
-  menuCollapsed.value = !menuCollapsed.value
-  useLocalStorage('menuCollapsed', menuCollapsed.value)
-}
-
-const mainMenuHovered = ref<boolean>(false)
-
-const clickWindow = (event: Event): void => {
-  const target = event.target as any
-  if (
-    menuPined.value ||
-    mainMenuHovered.value ||
-    target.className.baseVal?.includes('menu-icon') ||
-    target.className.baseVal?.includes('clr-i-outline')
-  ) {
-    return
-  }
-
-  emits('toggle', false)
-}
-
-const mountedReady = ref<boolean>(false)
-onMounted(() => {
-  mountedReady.value = true
-  window.addEventListener('click', clickWindow)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('click', clickWindow)
-})
-
-watch(
-  [mountedReady, route, () => props.parentStatus],
-  ([mountedReadyNewValue, routeNewValue, parentStatusNewValue]: [
-    boolean,
-    any,
-    UI_T_ParentStatus
-  ]): void => {
-    if (parentStatusNewValue === 1) return;
-
-    const name = location.pathname.split('/')[1]
-
-    if (!mountedReadyNewValue || name === 'auth') return
-
-    setSidebarOptions()
-    useLocalStorage('navigationHistoryRoute', routeNewValue.fullPath)
-  },
-  { immediate: true, deep: true }
-)
-
-const setSidebarOptions = (): void => {
-  menuPined.value = useLocalStorage('menuPined')
-  menuCollapsed.value = useLocalStorage('menuCollapsed')
-
-  if (menuPined.value) {
-    emits('toggle', true)
-  }
-}
-
-const hideMainMenu = (): void => {
-  emits('toggle', false)
-}
-</script>
-
-<style scoped lang="scss">
-.main-navigation-panel {
-  display: flex;
-  flex: 1 1 auto;
-  &.pinned {
-    .nav-context {
-      position: relative;
-    }
-  }
-  .nav-context {
-    position: absolute;
-    z-index: 1001;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--vertical-nav-bg-color);
-    border-right: 0.05rem solid var(--vertical-border-color);
-    &.collapsed {
-      .category-wrap .clr-vertical-nav {
-        width: 48px;
-        .nav-trigger {
-          svg {
-            transform: rotate(90deg);
-          }
-        }
-        .nav-content {
-          overflow-y: hidden;
-
-          &:hover {
-            overflow-y: auto;
-          }
-          .nav-link {
-            display: flex;
-            padding: 2px 0.6rem 2px 0.7rem;
-            width: fit-content;
-            .category-text {
-              opacity: 0;
-            }
-          }
-        }
-      }
-    }
-    .nav-trigger {
-      margin-top: 0;
-      outline: none;
-      .nav-trigger-icon {
-        height: 16px;
-        svg {
-          fill: var(--arrows-icon);
-          width: 16px;
-          height: 16px;
-          transform: rotate(-90deg);
-        }
-      }
-    }
-    .category-wrap {
-      overflow: hidden;
-      flex: 1 1 auto;
-      .clr-vertical-nav {
-        padding-top: 0;
-        background: none;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-      }
-      .nav-content {
-        padding-top: 12px;
-        height: 100%;
-        .nav-link {
-          padding: 2px 12px;
-          font-weight: 400;
-          height: auto;
-          line-height: 21px;
-          flex-basis: auto;
-          &.active {
-            background-color: var(--row-selected-bg-color);
-            border-bottom: 1px solid transparent;
-            .nav-text {
-              .category-icon {
-                &.icon-lifecycle-manager {
-                  background-image: url('assets/img/icons/icon-life-m-light.svg');
-
-                  html.dark-theme & {
-                    background-image: url('assets/img/icons/icon-life-m-dark.svg');
-                  }
-                }
-                &.icon-realize-operations {
-                  background-image: url('assets/img/icons/icon-ro-light.svg');
-                  html.dark-theme & {
-                    background-image: url('assets/img/icons/icon-ro-dark.svg');
-                  }
-                }
-              }
-              .category-text {
-                color: var(--vertical-nav-active-item-color);
-              }
-            }
-          }
-
-          &:hover:not(.active) {
-            margin-bottom: -1px;
-            border-bottom: 1px solid var(--row-hover-border-color);
-            background-color: var(--row-hover-bg-color);
-            color: #454545;
-          }
-          .nav-text {
-            display: flex;
-            .category-icon {
-              margin: 1px 4px 0 0;
-              min-width: 16px;
-              display: inline-block;
-              &.icon-hybrid-cloud-services {
-                background: url('assets/img/icons/icon-hcs.svg');
-                width: 16px;
-                height: 16px;
-                min-height: 16px;
-              }
-              &.icon-realize-operations,
-              &.icon-cloud-provider-services,
-              &.icon-lifecycle-manager {
-                background-size: contain;
-                background-repeat: no-repeat;
-                width: 18px;
-                height: 18px;
-                display: inline-block;
-                vertical-align: text-bottom;
-              }
-              &.icon-lifecycle-manager {
-                background-image: url('assets/img/icons/icon-life-m-light.svg');
-                html.dark-theme & {
-                  background-image: url('assets/img/icons/icon-life-m-dark.svg');
-                }
-              }
-              &.icon-cloud-provider-services {
-                background-image: url('assets/img/icons/icon-cps.png');
-                html.dark-theme & {
-                  background-image: url('assets/img/icons/icon-cps-dark-mode.png');
-                }
-              }
-              &.icon-realize-operations {
-                background-image: url('assets/img/icons/icon-ro-light.svg');
-                html.dark-theme & {
-                  background-image: url('assets/img/icons/icon-ro-dark.svg');
-                }
-              }
-            }
-            .category-text {
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              font-size: 13px;
-            }
-          }
-        }
-      }
-    }
-    .pin-wrap {
-      padding: 6px 4px 5px 12px;
-      border-top: 0.05rem solid var(--vertical-nav-divider-border-color);
-      label {
-        font-size: 13px;
-      }
-    }
-  }
-}
-</style>
-
-<style>
-:root {
-  --vertical-nav-bg-color: rgba(232, 232, 232, 0.85);
-  --vertical-nav-item-color: #565656;
-  --vertical-nav-active-item-color: #fff;
-  --vertical-nav-divider-border-color: #ccc;
-  --vertical-border-color: tranparent;
-}
-:root.dark-theme {
-  --vertical-nav-bg-color: #17242b;
-  --vertical-nav-item-color: #e9ecef;
-  --vertical-nav-active-item-color: #000;
-  --vertical-nav-divider-border-color: #495865;
-  --vertical-border-color: #495865;
-}
-</style>
+<template>
+  <div
+    :class="['main-navigation-panel', { pinned: menuPined }]"
+    @mouseenter="mainMenuHovered = true"
+    @mouseleave="mainMenuHovered = false"
+  >
+    <div
+      v-show="showMenu"
+      :class="['nav-context', { collapsed: menuCollapsed }]"
+    >
+      <div class="category-wrap">
+        <div class="clr-vertical-nav">
+          <button
+            v-if="menuPined"
+            id="nav-trigger"
+            class="nav-trigger"
+            @click="collapseMenu"
+          >
+            <span class="nav-trigger-icon">
+              <atoms-the-icon name="doubleArrows" />
+            </span>
+          </button>
+          <div class="nav-content">
+            <template v-for="(item, key) in navigationItems" :key="key">
+              <nuxt-link
+                v-for="(item2, key2) in item"
+                :id="`nav-item-${key}-${key2}`"
+                :key="item2.id"
+                class="nav-link"
+                active-class="active"
+                :to="item2.to"
+                :title="item2.title"
+                @click="hideMainMenu"
+              >
+                <span class="nav-text">
+                  <span
+                    :class="['clr-flex-shrink-0 category-icon', item2.iconName]"
+                  />
+                  <span class="category-text" :title="item2.title">{{
+                    item2.title
+                  }}</span>
+                </span>
+              </nuxt-link>
+              <div
+                v-show="key !== navigationItems.length - 1"
+                class="nav-divider"
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="!menuCollapsed" class="pin-wrap">
+        <div class="clr-checkbox-wrapper">
+          <input
+            id="pin-menu-control"
+            v-model="menuPined"
+            type="checkbox"
+            @change="changeMenuPin"
+          />
+          <label for="pin-menu-control">{{ localization.pinMenu }}</label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/models/interfaces'
+import { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/models/types'
+
+const props = defineProps<{
+  mainMenuStatus: boolean
+  navigationItems: UI_I_NavigationItem[][]
+  parentStatus: UI_T_ParentStatus
+}>()
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+}>()
+
+const { $store } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const route = useRoute()
+
+const showMenu = computed<boolean>(
+  () => props.mainMenuStatus || menuPined.value
+)
+
+const menuPined = ref<boolean>(false)
+const changeMenuPin = (): void => {
+  useLocalStorage('menuPined', menuPined.value)
+}
+
+const menuCollapsed = ref<boolean>(false)
+const collapseMenu = (): void => {
+  menuCollapsed.value = !menuCollapsed.value
+  useLocalStorage('menuCollapsed', menuCollapsed.value)
+}
+
+const mainMenuHovered = ref<boolean>(false)
+
+const clickWindow = (event: Event): void => {
+  const target = event.target as any
+  if (
+    menuPined.value ||
+    mainMenuHovered.value ||
+    target.className.baseVal?.includes('menu-icon') ||
+    target.className.baseVal?.includes('clr-i-outline')
+  ) {
+    return
+  }
+
+  emits('toggle', false)
+}
+
+const mountedReady = ref<boolean>(false)
+onMounted(() => {
+  mountedReady.value = true
+  window.addEventListener('click', clickWindow)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', clickWindow)
+})
+
+watch(
+  [mountedReady, route, () => props.parentStatus],
+  ([mountedReadyNewValue, routeNewValue, parentStatusNewValue]: [
+    boolean,
+    any,
+    UI_T_ParentStatus
+  ]): void => {
+    if (parentStatusNewValue === 1) return;
+
+    const name = location.pathname.split('/')[1]
+
+    if (!mountedReadyNewValue || name === 'auth') return
+
+    setSidebarOptions()
+    useLocalStorage('navigationHistoryRoute', routeNewValue.fullPath)
+  },
+  { immediate: true, deep: true }
+)
+
+const setSidebarOptions = (): void => {
+  menuPined.value = useLocalStorage('menuPined')
+  menuCollapsed.value = useLocalStorage('menuCollapsed')
+
+  if (menuPined.value) {
+    emits('toggle', true)
+  }
+}
+
+const hideMainMenu = (): void => {
+  emits('toggle', false)
+}
+</script>
+
+<style scoped lang="scss">
+.main-navigation-panel {
+  display: flex;
+  flex: 1 1 auto;
+  &.pinned {
+    .nav-context {
+      position: relative;
+    }
+  }
+  .nav-context {
+    position: absolute;
+    z-index: 1001;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--vertical-nav-bg-color);
+    border-right: 0.05rem solid var(--vertical-border-color);
+    &.collapsed {
+      .category-wrap .clr-vertical-nav {
+        width: 48px;
+        .nav-trigger {
+          svg {
+            transform: rotate(90deg);
+          }
+        }
+        .nav-content {
+          overflow-y: hidden;
+
+          &:hover {
+            overflow-y: auto;
+          }
+          .nav-link {
+            display: flex;
+            padding: 2px 0.6rem 2px 0.7rem;
+            width: fit-content;
+            .category-text {
+              opacity: 0;
+            }
+          }
+        }
+      }
+    }
+    .nav-trigger {
+      margin-top: 0;
+      outline: none;
+      .nav-trigger-icon {
+        height: 16px;
+        svg {
+          fill: var(--arrows-icon);
+          width: 16px;
+          height: 16px;
+          transform: rotate(-90deg);
+        }
+      }
+    }
+    .category-wrap {
+      overflow: hidden;
+      flex: 1 1 auto;
+      .clr-vertical-nav {
+        padding-top: 0;
+        background: none;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+      }
+      .nav-content {
+        padding-top: 12px;
+        height: 100%;
+        .nav-link {
+          padding: 2px 12px;
+          font-weight: 400;
+          height: auto;
+          line-height: 21px;
+          flex-basis: auto;
+          &.active {
+            background-color: var(--row-selected-bg-color);
+            border-bottom: 1px solid transparent;
+            .nav-text {
+              .category-icon {
+                &.icon-lifecycle-manager {
+                  background-image: url('assets/img/icons/icon-life-m-light.svg');
+
+                  html.dark-theme & {
+                    background-image: url('assets/img/icons/icon-life-m-dark.svg');
+                  }
+                }
+                &.icon-realize-operations {
+                  background-image: url('assets/img/icons/icon-ro-light.svg');
+                  html.dark-theme & {
+                    background-image: url('assets/img/icons/icon-ro-dark.svg');
+                  }
+                }
+              }
+              .category-text {
+                color: var(--vertical-nav-active-item-color);
+              }
+            }
+          }
+
+          &:hover:not(.active) {
+            margin-bottom: -1px;
+            border-bottom: 1px solid var(--row-hover-border-color);
+            background-color: var(--row-hover-bg-color);
+            color: #454545;
+          }
+          .nav-text {
+            display: flex;
+            .category-icon {
+              margin: 1px 4px 0 0;
+              min-width: 16px;
+              display: inline-block;
+              &.icon-hybrid-cloud-services {
+                background: url('assets/img/icons/icon-hcs.svg');
+                width: 16px;
+                height: 16px;
+                min-height: 16px;
+              }
+              &.icon-realize-operations,
+              &.icon-cloud-provider-services,
+              &.icon-lifecycle-manager {
+                background-size: contain;
+                background-repeat: no-repeat;
+                width: 18px;
+                height: 18px;
+                display: inline-block;
+                vertical-align: text-bottom;
+              }
+              &.icon-lifecycle-manager {
+                background-image: url('assets/img/icons/icon-life-m-light.svg');
+                html.dark-theme & {
+                  background-image: url('assets/img/icons/icon-life-m-dark.svg');
+                }
+              }
+              &.icon-cloud-provider-services {
+                background-image: url('assets/img/icons/icon-cps.png');
+                html.dark-theme & {
+                  background-image: url('assets/img/icons/icon-cps-dark-mode.png');
+                }
+              }
+              &.icon-realize-operations {
+                background-image: url('assets/img/icons/icon-ro-light.svg');
+                html.dark-theme & {
+                  background-image: url('assets/img/icons/icon-ro-dark.svg');
+                }
+              }
+            }
+            .category-text {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              font-size: 13px;
+            }
+          }
+        }
+      }
+    }
+    .pin-wrap {
+      padding: 6px 4px 5px 12px;
+      border-top: 0.05rem solid var(--vertical-nav-divider-border-color);
+      label {
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>
+
+<style>
+:root {
+  --vertical-nav-bg-color: rgba(232, 232, 232, 0.85);
+  --vertical-nav-item-color: #565656;
+  --vertical-nav-active-item-color: #fff;
+  --vertical-nav-divider-border-color: #ccc;
+  --vertical-border-color: tranparent;
+}
+:root.dark-theme {
+  --vertical-nav-bg-color: #17242b;
+  --vertical-nav-item-color: #e9ecef;
+  --vertical-nav-active-item-color: #000;
+  --vertical-nav-divider-border-color: #495865;
+  --vertical-border-color: #495865;
+}
+</style>