adata-ui 0.3.53 → 0.3.56

package/src/components/Header/ChildLinks.vue

@@ -0,0 +1,120 @@
+<template>
+  <ul class="child-links">
+    <li v-for="(link, i) in links.children" :key="i">
+      <component
+          class="child-links__item"
+          exact-active-class="active"
+          :is="module === links.key? 'nuxt-link': 'a'"
+          :href="module === links.key ? null: `${links[mode]}${link.to}`"
+          :to="module === links.key ? link.to: null"
+      >
+        <span v-html="serviceIcons[link.icon]" class="child-links__icon"></span>
+        <p>
+          <span class="child-links__name">{{ link.name }}</span>
+          <span class="child-links__subtitle">{{ link.subtitle }}</span>
+        </p>
+      </component>
+      <span class="child-links__arrow">
+        <svg width="24" height="24" class="ic-24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 18L15 12L9 6" stroke="#007AFF" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      </span>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { serviceIcons } from "@/configs/icons";
+export default {
+  name: "ChildLinks",
+  props: {
+    links: {
+      type: Object,
+      default: () => ({})
+    },
+    module: {
+      type: String,
+      default: 'counterparty'
+    },
+    mode: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      serviceIcons
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.child-links {
+  position: absolute;
+  left: 0;
+  background: #FFFFFF;
+  padding: 16px;
+  box-shadow: 0 10px 70px rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  $self: &;
+  &__arrow {
+    visibility: hidden;
+    svg {
+      transition: none;
+    }
+  }
+  .active {
+    background: rgba(189, 199, 206, 0.2);
+  }
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    .ic-24 {
+      min-width: 24px;
+      height: 24px;
+    }
+    #{ $self }__icon {
+      display: grid;
+      place-content: center;
+      width: 40px;
+      height: 40px;
+      min-width: 40px;
+      background: rgba(189, 199, 206, 0.2);
+      border-radius: 4px;
+    }
+    #{ $self }__item {
+      text-transform: none;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      min-width: 336px;
+      padding: 14px 8px;
+      border-radius: 8px;
+      transition: 0.2s ease;
+      &:hover {
+        background: rgba(189, 199, 206, 0.2);
+        & ~ span {
+          visibility: visible;
+        }
+      }
+      #{ $self }__name {
+        display: block;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 20px;
+        color: #2C3E50;
+      }
+      #{ $self }__subtitle {
+        display: block;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+        color: #9DA3AC;
+      }
+    }
+  }
+}
+</style>