@eturnity/eturnity_reusable_components 8.13.13-EPDM-9631.0 → 8.13.13-EPDM-12459.0

package/src/components/sideMenu/index.vue

@@ -1,325 +1,325 @@
-<template>
-  <PageContainer :is-loading="!tabsData.length">
-    <SpinnerContainer v-if="!tabsData.length">
-      <Spinner />
-    </SpinnerContainer>
-    <ListContainer v-else>
-      <template v-for="(item, idx) in tabsData">
-        <ListItem
-          v-if="!item.children"
-          :key="idx"
-          :data-id="`sub_menu_settings_${item.key}`"
-          :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
-          :is-active="activeTab === item.key || activeParentTab === item.key"
-          @click="$emit('tab-click', { activeKey: item.key })"
-        >
-          <IconContainer :is-active="activeTab === item.key">
-            <Icon
-              :color="
-                activeTab === item.key ? theme.semanticColors.purple[500] : ''
-              "
-              cursor="pointer"
-              :fill-type="item.fillType"
-              :name="item.icon"
-              size="18px"
-            />
-          </IconContainer>
-          <ListText :is-active="activeTab === item.key">{{
-            $gettext(item.label)
-          }}</ListText>
-        </ListItem>
-        <CollapseWrapper v-else :key="idx + item.key">
-          <CollapseContainer
-            :data-id="`sub_menu_settings_${item.key}`"
-            :is-active="activeParentTab === item.key"
-            @click="toggleActiveDropdown(item.key)"
-          >
-            <IconContainer :is-active="activeParentTab === item.key">
-              <Icon
-                :color="
-                  activeParentTab === item.key
-                    ? theme.semanticColors.purple[500]
-                    : ''
-                "
-                cursor="pointer"
-                :name="item.icon"
-                size="18px"
-              />
-            </IconContainer>
-            <ListText :is-active="activeTab === item.key">{{
-              $gettext(item.label)
-            }}</ListText>
-            <ArrowContainer>
-              <Icon
-                :color="theme.semanticColors.grey[800]"
-                :name="
-                  activeDropdown === item.key
-                    ? 'arrow_up_unfilled'
-                    : 'arrow_down_unfilled'
-                "
-                size="10px"
-              />
-            </ArrowContainer>
-          </CollapseContainer>
-          <template v-if="activeDropdown === item.key">
-            <SubRouter
-              v-for="subItem in item.children"
-              :key="subItem.key"
-              :data-id="`sub_menu_settings_${subItem.key}`"
-              :is-active="activeTab === subItem.key"
-              @click="
-                $emit('tab-click', {
-                  activeKey: subItem.key,
-                  parentKey: item.key,
-                })
-              "
-            >
-              {{ $gettext(subItem.label) }}
-            </SubRouter>
-          </template>
-        </CollapseWrapper>
-      </template>
-    </ListContainer>
-    <BottomSection v-if="hasLogout">
-      <IconContainer
-        data-id="button_settings_logout"
-        :is-active="false"
-        :is-button="true"
-        @click="$emit('on-logout')"
-      >
-        <RotateIcon
-          :color="theme.semanticColors.teal[800]"
-          cursor="pointer"
-          name="initial_situation"
-          size="18px"
-        />
-      </IconContainer>
-      <AppVersion>{{ appVersion }}</AppVersion>
-    </BottomSection>
-  </PageContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import Icon from '../icon'
-  import Spinner from '../spinner'
-  import theme from '@/assets/theme.js'
-
-  const PageAttrs = { isLoading: Boolean }
-  const PageContainer = styled('div', PageAttrs)`
-    background-color: ${(props) => props.theme.semanticColors.grey[100]};
-    padding: 14px 12px;
-    min-width: 220px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  `
-
-  const ListContainer = styled.div`
-    display: grid;
-    grid-gap: 6px;
-  `
-
-  const IconAttrs = { isActive: Boolean, isButton: Boolean, fillType: String }
-
-  const ListItem = styled('div', IconAttrs)`
-    display: grid;
-    align-items: center;
-    grid-template-columns: auto 1fr;
-    grid-gap: 20px;
-    cursor: pointer;
-    padding: 4px;
-    border-radius: 4px;
-    background-color: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
-    color: ${(props) =>
-      props.isActive
-        ? props.theme.semanticColors.purple[500]
-        : props.theme.semanticColors.teal[800]};
-
-    :hover {
-      background-color: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]};
-      svg path:not(.fix) {
-        ${(props) => props.fillType}: ${(props) =>
-          props.theme.semanticColors.purple[500]};
-      }
-    }
-  `
-
-  const ListTextAttrs = { isActive: Boolean }
-  const ListText = styled('div', ListTextAttrs)`
-    font-size: 14px;
-    font-weight: 400;
-  `
-
-  const IconContainer = styled('div', IconAttrs)`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
-
-    ${({ isButton = false }) =>
-      isButton &&
-      `
-        cursor: pointer;
-        &:hover {
-          background-color: ${(props) =>
-            props.theme.semanticColors.purple[100]};
-        `}
-  `
-
-  const SpinnerContainer = styled.div`
-    margin-top: 30px;
-  `
-
-  const BottomSection = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  `
-
-  const RotateIcon = styled(Icon)`
-    transform: rotate(-90deg);
-  `
-
-  const AppVersion = styled.p`
-    font-size: 11px;
-    line-height: 13px;
-    color: ${(props) => props.theme.semanticColors.teal[800]};
-    margin-right: 6px;
-  `
-
-  const SubRouter = styled('div', IconAttrs)`
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 10px;
-    align-items: center;
-    justify-items: flex-start;
-    cursor: pointer;
-    margin-left: 65px;
-    padding: 8px;
-    border-radius: 4px;
-    color: ${(props) =>
-      props.isActive
-        ? props.theme.semanticColors.purple[500]
-        : props.theme.semanticColors.teal[800]};
-    font-weight: 400;
-    font-size: 14px;
-    background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
-
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
-    }
-  `
-
-  const CollapseContainerAttrs = { isActive: Boolean }
-  const CollapseContainer = styled('div', CollapseContainerAttrs)`
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    grid-gap: 20px;
-    padding: 4px;
-    padding-right: 13px;
-    border-radius: 6px;
-    align-items: center;
-    cursor: pointer;
-    background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
-
-    div {
-      color: ${(props) =>
-        props.isActive ? props.theme.semanticColors.purple[500] : ''};
-    }
-
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]};
-      svg path:not(.fix) {
-        fill: ${(props) => props.theme.semanticColors.purple[500]};
-      }
-    }
-  `
-
-  const CollapseWrapper = styled.div`
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 10px;
-    user-select: none;
-    margin-bottom: 2px;
-  `
-
-  const ArrowContainer = styled.div`
-    padding-bottom: 5px;
-  `
-
-  export default {
-    name: 'SideMenu',
-    components: {
-      PageContainer,
-      ListContainer,
-      ListItem,
-      ListText,
-      Icon,
-      IconContainer,
-      Spinner,
-      SpinnerContainer,
-      BottomSection,
-      RotateIcon,
-      AppVersion,
-      CollapseWrapper,
-      CollapseContainer,
-      SubRouter,
-      ArrowContainer,
-    },
-    props: {
-      tabsData: {
-        required: true,
-      },
-      activeTab: {
-        required: true,
-      },
-      activeParentTab: {
-        required: false,
-      },
-      hasLogout: {
-        required: false,
-        default: true,
-      },
-      appVersion: {
-        required: false,
-        type: String,
-      },
-    },
-    data() {
-      return {
-        activeDropdown: null,
-        theme,
-      }
-    },
-    watch: {
-      activeTab: {
-        // once active tab is received, check if any parent
-        // tab is active and if so open according dropdown
-        handler() {
-          if (this.activeParentTab) {
-            this.activeDropdown = this.activeParentTab
-          }
-        },
-        once: true,
-      },
-    },
-    methods: {
-      toggleActiveDropdown(value) {
-        if (this.activeDropdown === value) {
-          this.activeDropdown = null
-        } else {
-          this.activeDropdown = value
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer :is-loading="!tabsData.length">
+    <SpinnerContainer v-if="!tabsData.length">
+      <Spinner />
+    </SpinnerContainer>
+    <ListContainer v-else>
+      <template v-for="(item, idx) in tabsData">
+        <ListItem
+          v-if="!item.children"
+          :key="idx"
+          :data-id="`sub_menu_settings_${item.key}`"
+          :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
+          :is-active="activeTab === item.key || activeParentTab === item.key"
+          @click="$emit('tab-click', { activeKey: item.key })"
+        >
+          <IconContainer :is-active="activeTab === item.key">
+            <Icon
+              :color="
+                activeTab === item.key ? theme.semanticColors.purple[500] : ''
+              "
+              cursor="pointer"
+              :fill-type="item.fillType"
+              :name="item.icon"
+              size="18px"
+            />
+          </IconContainer>
+          <ListText :is-active="activeTab === item.key">{{
+            $gettext(item.label)
+          }}</ListText>
+        </ListItem>
+        <CollapseWrapper v-else :key="idx + item.key">
+          <CollapseContainer
+            :data-id="`sub_menu_settings_${item.key}`"
+            :is-active="activeParentTab === item.key"
+            @click="toggleActiveDropdown(item.key)"
+          >
+            <IconContainer :is-active="activeParentTab === item.key">
+              <Icon
+                :color="
+                  activeParentTab === item.key
+                    ? theme.semanticColors.purple[500]
+                    : ''
+                "
+                cursor="pointer"
+                :name="item.icon"
+                size="18px"
+              />
+            </IconContainer>
+            <ListText :is-active="activeTab === item.key">{{
+              $gettext(item.label)
+            }}</ListText>
+            <ArrowContainer>
+              <Icon
+                :color="theme.semanticColors.grey[800]"
+                :name="
+                  activeDropdown === item.key
+                    ? 'arrow_up_unfilled'
+                    : 'arrow_down_unfilled'
+                "
+                size="10px"
+              />
+            </ArrowContainer>
+          </CollapseContainer>
+          <template v-if="activeDropdown === item.key">
+            <SubRouter
+              v-for="subItem in item.children"
+              :key="subItem.key"
+              :data-id="`sub_menu_settings_${subItem.key}`"
+              :is-active="activeTab === subItem.key"
+              @click="
+                $emit('tab-click', {
+                  activeKey: subItem.key,
+                  parentKey: item.key,
+                })
+              "
+            >
+              {{ $gettext(subItem.label) }}
+            </SubRouter>
+          </template>
+        </CollapseWrapper>
+      </template>
+    </ListContainer>
+    <BottomSection v-if="hasLogout">
+      <IconContainer
+        data-id="button_settings_logout"
+        :is-active="false"
+        :is-button="true"
+        @click="$emit('on-logout')"
+      >
+        <RotateIcon
+          :color="theme.semanticColors.teal[800]"
+          cursor="pointer"
+          name="initial_situation"
+          size="18px"
+        />
+      </IconContainer>
+      <AppVersion>{{ appVersion }}</AppVersion>
+    </BottomSection>
+  </PageContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import Icon from '../icon'
+  import Spinner from '../spinner'
+  import theme from '@/assets/theme.js'
+
+  const PageAttrs = { isLoading: Boolean }
+  const PageContainer = styled('div', PageAttrs)`
+    background-color: ${(props) => props.theme.semanticColors.grey[100]};
+    padding: 14px 12px;
+    min-width: 220px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  `
+
+  const ListContainer = styled.div`
+    display: grid;
+    grid-gap: 6px;
+  `
+
+  const IconAttrs = { isActive: Boolean, isButton: Boolean, fillType: String }
+
+  const ListItem = styled('div', IconAttrs)`
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr;
+    grid-gap: 20px;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
+
+    :hover {
+      background-color: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      svg path:not(.fix) {
+        ${(props) => props.fillType}: ${(props) =>
+          props.theme.semanticColors.purple[500]};
+      }
+    }
+  `
+
+  const ListTextAttrs = { isActive: Boolean }
+  const ListText = styled('div', ListTextAttrs)`
+    font-size: 14px;
+    font-weight: 400;
+  `
+
+  const IconContainer = styled('div', IconAttrs)`
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+
+    ${({ isButton = false }) =>
+      isButton &&
+      `
+        cursor: pointer;
+        &:hover {
+          background-color: ${(props) =>
+            props.theme.semanticColors.purple[100]};
+        `}
+  `
+
+  const SpinnerContainer = styled.div`
+    margin-top: 30px;
+  `
+
+  const BottomSection = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  `
+
+  const RotateIcon = styled(Icon)`
+    transform: rotate(-90deg);
+  `
+
+  const AppVersion = styled.p`
+    font-size: 11px;
+    line-height: 13px;
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+    margin-right: 6px;
+  `
+
+  const SubRouter = styled('div', IconAttrs)`
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 10px;
+    align-items: center;
+    justify-items: flex-start;
+    cursor: pointer;
+    margin-left: 65px;
+    padding: 8px;
+    border-radius: 4px;
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
+    font-weight: 400;
+    font-size: 14px;
+    background: ${(props) =>
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+
+    &:hover {
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
+    }
+  `
+
+  const CollapseContainerAttrs = { isActive: Boolean }
+  const CollapseContainer = styled('div', CollapseContainerAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-gap: 20px;
+    padding: 4px;
+    padding-right: 13px;
+    border-radius: 6px;
+    align-items: center;
+    cursor: pointer;
+    background: ${(props) =>
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+
+    div {
+      color: ${(props) =>
+        props.isActive ? props.theme.semanticColors.purple[500] : ''};
+    }
+
+    &:hover {
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      svg path:not(.fix) {
+        fill: ${(props) => props.theme.semanticColors.purple[500]};
+      }
+    }
+  `
+
+  const CollapseWrapper = styled.div`
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 10px;
+    user-select: none;
+    margin-bottom: 2px;
+  `
+
+  const ArrowContainer = styled.div`
+    padding-bottom: 5px;
+  `
+
+  export default {
+    name: 'SideMenu',
+    components: {
+      PageContainer,
+      ListContainer,
+      ListItem,
+      ListText,
+      Icon,
+      IconContainer,
+      Spinner,
+      SpinnerContainer,
+      BottomSection,
+      RotateIcon,
+      AppVersion,
+      CollapseWrapper,
+      CollapseContainer,
+      SubRouter,
+      ArrowContainer,
+    },
+    props: {
+      tabsData: {
+        required: true,
+      },
+      activeTab: {
+        required: true,
+      },
+      activeParentTab: {
+        required: false,
+      },
+      hasLogout: {
+        required: false,
+        default: true,
+      },
+      appVersion: {
+        required: false,
+        type: String,
+      },
+    },
+    data() {
+      return {
+        activeDropdown: null,
+        theme,
+      }
+    },
+    watch: {
+      activeTab: {
+        // once active tab is received, check if any parent
+        // tab is active and if so open according dropdown
+        handler() {
+          if (this.activeParentTab) {
+            this.activeDropdown = this.activeParentTab
+          }
+        },
+        once: true,
+      },
+    },
+    methods: {
+      toggleActiveDropdown(value) {
+        if (this.activeDropdown === value) {
+          this.activeDropdown = null
+        } else {
+          this.activeDropdown = value
+        }
+      },
+    },
+  }
+</script>