{"version":3,"sources":["webpack:///./src/assets/img/icons/white-arr-right.png","webpack:///./src/views/Home.vue?bb86","webpack:///./src/components/mainHeader.vue?eae6","webpack:///./src/assets/img/home/Payment-Information.gif","webpack:///./src/views/Home.vue","webpack:///./node_modules/vue-writer/dist/vue-writer.esm.js","webpack:///./src/components/mainHeader.vue","webpack:///./src/components/mainHeader.vue?6464","webpack:///./src/views/Home.vue?c772"],"names":["module","exports","class","src","alt","show","loading","onloader","array","delay","user","$router","push","bannerImg","script","name","props","type","Array","required","eraseSpeed","Number","default","typeSpeed","intervals","start","caret","String","data","typeValue","typeStatus","arrayIndex","charIndex","methods","typewriter","this","length","charAt","setTimeout","eraser","substring","created","_ctx","_cache","$props","$setup","$data","$options","$slots","typing","render","entry_esm","installable","install","app","component","href","to","payoutLogo","activeSidebar","login","toggleSidebar","components","currentUserAvatar","setup","store","getters","value","dispatch","__exports__","NModal","VueWriter","PageSpinner","MainHeader","MainFooter","query","_globalLoading","getStarted","token","commit","ssoToken","payload","then","response","includes","responseCode","location","assign","catch"],"mappings":"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","file":"js/chunk-2dbf8758.3ce9b535.js","sourcesContent":["module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB5SURBVHgBzVJRDYAgFDycAYxABCvQwAbaRBsYyQgSQROgCZ7n4FMHOt247dhj7O7Y7QF/QURG0pH11XsR0a9kRU53BrH0QTxcPgZlGJpEj4XU8B0YxWPm5flXAHuKNYcuUdCG5I00SAVD+lel5SeMreeOUI5SyuJLHJstiu/+05SjAAAAAElFTkSuQmCC\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Home.vue?vue&type=style&index=0&id=488a8aa0&lang=scss&scoped=true\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./mainHeader.vue?vue&type=style&index=0&id=6031a0f0&lang=scss&scoped=true\"","module.exports = __webpack_public_path__ + \"img/Payment-Information.3e5e18c8.gif\";","<template>\r\n  <div class=\"xpress-home-page\">\r\n    <!-- preload -->\r\n    <n-modal v-model:show=\"loading\">\r\n      <page-spinner :onloader=\"'flex'\" />\r\n    </n-modal>\r\n\r\n    <!--header section  -->\r\n    <main-header />\r\n\r\n    <!--main section  -->\r\n    <main class=\"xpress-home-content\">\r\n      <section>\r\n        <div>\r\n          <h1>Make Bulk &amp; Single payments <span class=\"xpress-animated-text\">\r\n            <vue-writer\r\n              class=\"d-inline\"\r\n              :array=\"['with ease', 'quickly', 'securely']\"\r\n              :delay=\"2000\"\r\n            />\r\n          </span></h1>\r\n          <p>\r\n            With XpressPayout, you can make bulk or single payments on the go from multiple accounts and multiple banks. Transfer funds through the web securely &amp; with ease.\r\n          </p>\r\n          <div v-if=\"!user\">\r\n            <button\r\n              @click=\"$router.push('/register')\"\r\n              class=\"xpress-get-started-btn\"\r\n            >\r\n              <span>Get started</span>\r\n              <img src=\"../assets/img/icons/white-arr-right.png\" alt=\"arrow icon\">\r\n            </button>\r\n          </div>\r\n        </div>\r\n        <figure class=\"xpress-banner-image-box\">\r\n          <img :src=\"bannerImg\" alt=\"Payment information Image\">\r\n        </figure>\r\n      </section>\r\n    </main>\r\n    <!-- ------------- -->\r\n    <MainFooter />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { computed, onBeforeMount } from '@vue/runtime-core'\r\nimport { useRoute } from 'vue-router'\r\nimport { useStore } from 'vuex'\r\nimport { NModal } from 'naive-ui'\r\nimport VueWriter from 'vue-writer'\r\n\r\nimport MainHeader from '@/components/mainHeader.vue'\r\nimport MainFooter from '@/components/mainFooter.vue'\r\nimport PageSpinner from '@/components/PageSpinner.vue'\r\n\r\nexport default {\r\n  name: 'Home',\r\n  components: {\r\n    NModal,\r\n    VueWriter,\r\n    PageSpinner,\r\n    MainHeader,\r\n    MainFooter\r\n  },\r\n  setup () {\r\n    const query = useRoute().query\r\n    const store = useStore()\r\n\r\n    const loading = computed(() => store.getters._globalLoading)\r\n    const user = computed(() => store.getters['users/_user'])\r\n\r\n    const bannerImg = require('@/assets/img/home/Payment-Information.gif')\r\n\r\n    // fetch access token\r\n    const getStarted = async () => {\r\n      if (query.token) {\r\n        store.commit('LOADING', true)\r\n\r\n        // const ssoToken_ = atob(query.token)\r\n        // const ssoToken = ssoToken_.substring(0, (ssoToken_.length - 4))\r\n        const ssoToken = query.token\r\n\r\n        const payload = { ssoToken }\r\n\r\n        await store.dispatch('users/AuthenticateUser', payload)\r\n          .then(response => {\r\n            // success response\r\n            if ([0, '0', '00'].includes(response?.responseCode)) {\r\n              store.commit('LOADING', false)\r\n\r\n              location.assign('/dashboard')\r\n            } else {\r\n              store.commit('LOADING', false)\r\n            }\r\n          })\r\n          .catch(() => {\r\n            store.commit('LOADING', false)\r\n          })\r\n      }\r\n    }\r\n\r\n    onBeforeMount(getStarted())\r\n\r\n    // ---------------------------------\r\n    return {\r\n      bannerImg,\r\n      loading,\r\n      user\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n  div.xpress-home-page {\r\n    padding-left: 64px;\r\n    padding-right: 64px;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    row-gap: 27px;\r\n    background-image: url(../assets/img/home/bg-home.png);\r\n    background-repeat: no-repeat;\r\n    background-size: 890px auto;\r\n    background-position: right -10px;\r\n    background-color: #ffffff;\r\n\r\n    // &>*:first-child {}\r\n\r\n    &>main.xpress-home-content {\r\n      &> section {\r\n        // height: 80vh;\r\n        height: 70vh;\r\n        display: grid;\r\n        grid-template: auto / auto auto;\r\n        align-items: flex-start;\r\n\r\n        // text\r\n        &>div {\r\n          // width: 580px;\r\n          width: 630px;\r\n          height: 430px;\r\n          position: relative;\r\n          top: 10px;\r\n\r\n          h1 {\r\n            font-family: 'Gelion-Bold-Black';\r\n            font-style: normal;\r\n            font-weight: bold;\r\n            font-size: 60px;\r\n            line-height: 70px;\r\n            color: $xpress-dark-green;\r\n\r\n            // animated text\r\n            &>span.xpress-animated-text {\r\n              color: $xpress-orange;\r\n            }\r\n          }\r\n          &>p {\r\n            // margin-top: 48px;\r\n            margin-top: 30px;\r\n            margin-bottom: 40px;\r\n            font-weight: normal;\r\n            font-size: 28px;\r\n            line-height: 34px;\r\n            text-align: justify;\r\n            letter-spacing: 0.003em;\r\n            color: #545454;\r\n          }\r\n          // get started button\r\n          &>div {\r\n            &>button.xpress-get-started-btn {\r\n              width: 186px;\r\n              height: 61px;\r\n              display: flex;\r\n              flex-direction: row;\r\n              justify-content: center;\r\n              align-items: center;\r\n              column-gap: 21px;\r\n              border: transparent;\r\n              border-radius: 5px;\r\n              transition: all 0.3s;\r\n              background: $xpress-light-green;\r\n              color: #FFFFFF;\r\n\r\n              // hover\r\n              &:hover {\r\n                filter: brightness(0.8);\r\n              }\r\n              // active\r\n              &:active {\r\n                filter: brightness(1);\r\n              }\r\n\r\n              // button text\r\n              span {\r\n                // font-family: 'Gelion-Medium';\r\n                font-weight: lighter;\r\n                font-size: 24px;\r\n                line-height: 29px;\r\n                text-transform: capitalize;\r\n              }\r\n              // arrow icon\r\n              // img {}\r\n            }\r\n          }\r\n        }\r\n        // banner image\r\n        &>figure.xpress-banner-image-box {\r\n          width: 100%;\r\n          height: 80%;\r\n\r\n          &>img {\r\n            // width: 112%;\r\n            width: 90%;\r\n            height: auto;\r\n            // height: 100%;\r\n            margin-top: -50px;\r\n            margin-left: -15px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  // MEDIA QUERY\r\n\r\n  // XX-SM (<251px)\r\n  @media (max-width: 250.9px) {\r\n    div.xpress-home-page {\r\n      padding-left: 1%;\r\n      padding-right: 1%;\r\n\r\n      &>main.xpress-home-content {\r\n        &> section {\r\n          width: 100%;\r\n          height: 100%;\r\n          display: flex;\r\n          flex-direction: column-reverse;\r\n          align-items: center;\r\n\r\n          // text\r\n          &>div {\r\n            width: 100%;\r\n            height: fit-content;\r\n            position: static;\r\n            top: 0;\r\n            word-wrap: break-word;\r\n\r\n            h1 {\r\n              font-size: 25px;\r\n              line-height: 30px;\r\n\r\n              // animated text\r\n              // &>span.xpress-animated-text {}\r\n            }\r\n            &>p {\r\n              margin-top: 20px;\r\n              margin-bottom: 20px;\r\n              font-size: 15px;\r\n              line-height: 20px;\r\n              letter-spacing: normal;\r\n            }\r\n            // get started button\r\n            &>div {\r\n              margin-bottom: 20px;\r\n\r\n              &>button.xpress-get-started-btn {\r\n                width: 120px;\r\n                min-width: 101px;\r\n                height: 40px;\r\n                column-gap: 5px;\r\n\r\n                // button text\r\n                span {\r\n                  font-size: 18px;\r\n                  line-height: 20px;\r\n                }\r\n                // arrow icon\r\n                img {\r\n                  display: none;\r\n                }\r\n              }\r\n            }\r\n          }\r\n          // banner image\r\n          &>figure.xpress-banner-image-box {\r\n            width: 100%;\r\n            height: fit-content;\r\n\r\n            &>img {\r\n              width: 100%;\r\n              height: auto;\r\n              margin-top: 0;\r\n              margin-left: 0;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // XX-SM\r\n  @media (min-width: 251px) and (max-width: 350.9px) {\r\n    div.xpress-home-page {\r\n      padding-left: 1%;\r\n      padding-right: 1%;\r\n\r\n      &>main.xpress-home-content {\r\n        &> section {\r\n          width: 100%;\r\n          height: 100%;\r\n          display: flex;\r\n          flex-direction: column-reverse;\r\n          align-items: center;\r\n\r\n          // text\r\n          &>div {\r\n            width: 100%;\r\n            height: fit-content;\r\n            position: static;\r\n            word-wrap: break-word;\r\n\r\n            h1 {\r\n              font-size: 25px;\r\n              line-height: 30px;\r\n\r\n              // animated text\r\n              // &>span.xpress-animated-text {}\r\n            }\r\n            &>p {\r\n              margin-top: 20px;\r\n              margin-bottom: 20px;\r\n              font-size: 15px;\r\n              line-height: 20px;\r\n              letter-spacing: normal;\r\n            }\r\n            // get started button\r\n            &>div {\r\n              margin-bottom: 20px;\r\n\r\n              &>button.xpress-get-started-btn {\r\n                width: 120px;\r\n                min-width: 101px;\r\n                height: 40px;\r\n                column-gap: 5px;\r\n\r\n                // button text\r\n                span {\r\n                  font-size: 18px;\r\n                  line-height: 20px;\r\n                }\r\n                // arrow icon\r\n                img {\r\n                  display: none;\r\n                }\r\n              }\r\n            }\r\n          }\r\n          // banner image\r\n          &>figure.xpress-banner-image-box {\r\n            width: 100%;\r\n            height: fit-content;\r\n\r\n            &>img {\r\n              width: 100%;\r\n              height: auto;\r\n              margin-top: 0;\r\n              margin-left: 0;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // X-SM\r\n  @media (min-width: 351px) and (max-width: 575.9px) {\r\n    div.xpress-home-page {\r\n      padding-left: 2%;\r\n      padding-right: 2%;\r\n\r\n      &>main.xpress-home-content {\r\n        &> section {\r\n          width: 100%;\r\n          height: 100%;\r\n          display: flex;\r\n          flex-direction: column-reverse;\r\n          align-items: center;\r\n\r\n          // text\r\n          &>div {\r\n            width: 100%;\r\n            height: fit-content;\r\n            position: static;\r\n            word-wrap: break-word;\r\n\r\n            h1 {\r\n              font-size: 40px;\r\n              line-height: 37px;\r\n\r\n              // animated text\r\n              // &>span.xpress-animated-text {}\r\n            }\r\n            &>p {\r\n              margin-top: 20px;\r\n              margin-bottom: 30px;\r\n              font-size: 18px;\r\n              line-height: 20px;\r\n              letter-spacing: normal;\r\n            }\r\n            // get started button\r\n            &>div {\r\n              margin-bottom: 30px;\r\n\r\n              &>button.xpress-get-started-btn {\r\n                width: 140px;\r\n                min-width: 101px;\r\n                height: 50px;\r\n                column-gap: 5px;\r\n\r\n                // button text\r\n                span {\r\n                  font-size: 18px;\r\n                  line-height: 20px;\r\n                }\r\n                // arrow icon\r\n                // img {}\r\n              }\r\n            }\r\n          }\r\n          // banner image\r\n          &>figure.xpress-banner-image-box {\r\n            width: 100%;\r\n            height: fit-content;\r\n\r\n            &>img {\r\n              width: 100%;\r\n              height: auto;\r\n              margin-top: 0;\r\n              margin-left: 0;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // SM\r\n  @media (min-width: 576px) and (max-width: 767.9px) {\r\n    div.xpress-home-page {\r\n      padding-left: 5%;\r\n      padding-right: 5%;\r\n\r\n      &>main.xpress-home-content {\r\n        &> section {\r\n          width: 100%;\r\n          height: 100%;\r\n          display: flex;\r\n          flex-direction: column-reverse;\r\n          align-items: center;\r\n\r\n          // text\r\n          &>div {\r\n            width: 100%;\r\n            height: fit-content;\r\n            position: static;\r\n            word-wrap: break-word;\r\n\r\n            h1 {\r\n              font-size: 45px;\r\n              line-height: 40px;\r\n\r\n              // animated text\r\n              // &>span.xpress-animated-text {}\r\n            }\r\n            &>p {\r\n              margin-top: 20px;\r\n              margin-bottom: 35px;\r\n              font-size: 19.5px;\r\n              line-height: 20px;\r\n              letter-spacing: normal;\r\n            }\r\n            // get started button\r\n            &>div {\r\n              margin-bottom: 30px;\r\n\r\n              &>button.xpress-get-started-btn {\r\n                width: 145px;\r\n                min-width: 101px;\r\n                height: 50px;\r\n                column-gap: 8px;\r\n\r\n                // button text\r\n                span {\r\n                  font-size: 19px;\r\n                  line-height: 20px;\r\n                }\r\n                // arrow icon\r\n                // img {}\r\n              }\r\n            }\r\n          }\r\n          // banner image\r\n          &>figure.xpress-banner-image-box {\r\n            width: 100%;\r\n            height: fit-content;\r\n\r\n            &>img {\r\n              width: 100%;\r\n              height: auto;\r\n              margin-left: 0;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // MD\r\n  @media (min-width: 768px) and (max-width: 991.9px) {\r\n    div.xpress-home-page {\r\n      padding-left: 7%;\r\n      padding-right: 7%;\r\n\r\n      &>main.xpress-home-content {\r\n        &> section {\r\n          width: 100%;\r\n          height: 100%;\r\n          display: flex;\r\n          flex-direction: column-reverse;\r\n          align-items: center;\r\n\r\n          // text\r\n          &>div {\r\n            width: 100%;\r\n            height: fit-content;\r\n            position: static;\r\n            word-wrap: break-word;\r\n\r\n            h1 {\r\n              font-size: 48px;\r\n              line-height: 40px;\r\n\r\n              // animated text\r\n              // &>span.xpress-animated-text {}\r\n            }\r\n            &>p {\r\n              margin-top: 20px;\r\n              margin-bottom: 35px;\r\n              font-size: 19.5px;\r\n              line-height: 20px;\r\n              letter-spacing: normal;\r\n            }\r\n            // get started button\r\n            &>div {\r\n              margin-bottom: 30px;\r\n\r\n              &>button.xpress-get-started-btn {\r\n                width: 145px;\r\n                min-width: 101px;\r\n                height: 50px;\r\n                column-gap: 8px;\r\n\r\n                // button text\r\n                span {\r\n                  font-size: 19px;\r\n                  line-height: 20px;\r\n                }\r\n                // arrow icon\r\n                // img {}\r\n              }\r\n            }\r\n          }\r\n          // banner image\r\n          &>figure.xpress-banner-image-box {\r\n            width: 100%;\r\n            height: fit-content;\r\n\r\n            &>img {\r\n              width: 100%;\r\n              height: auto;\r\n              margin-top: 0;\r\n              margin-left: 0;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // LG\r\n  @media (min-width: 992px) and (max-width: 1200.9px) {\r\n    div.xpress-home-page {\r\n      &>main.xpress-home-content {\r\n        &> section {\r\n          width: 100%;\r\n          // text\r\n          &>div {\r\n            width: 450px;\r\n            height: 430px;\r\n\r\n            h1 {\r\n              font-size: 50px;\r\n              line-height: 45px;\r\n            }\r\n            &>p {\r\n              margin-top: 30px;\r\n              margin-bottom: 30px;\r\n              font-size: 22px;\r\n              line-height: 24px;\r\n            }\r\n            // get started button\r\n            &>div {\r\n              &>button.xpress-get-started-btn {\r\n                width: 180px;\r\n                height: 55px;\r\n                column-gap: 15px;\r\n\r\n                // button text\r\n                span {\r\n                  font-size: 22px;\r\n                  line-height: 29px;\r\n                }\r\n                // arrow icon\r\n                // img {}\r\n              }\r\n            }\r\n          }\r\n          // banner image\r\n          &>figure.xpress-banner-image-box {\r\n            width: auto;\r\n            height: 80%;\r\n\r\n            &>img {\r\n              // width: 100%;\r\n              height: auto;\r\n              margin-left: 0;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n  }\r\n  // XL\r\n  // @media (max-width: 1201px) {}\r\n</style>\r\n","import { defineComponent, openBlock, createBlock, renderSlot, createVNode, toDisplayString } from 'vue';\n\nvar script = defineComponent({\n  name: \"VueWriter\",\n  props: {\n    array: {\n      type: Array,\n      required: true\n    },\n    eraseSpeed: {\n      type: Number,\n      default: 100\n    },\n    typeSpeed: {\n      type: Number,\n      default: 200\n    },\n    delay: {\n      type: Number,\n      default: 2000\n    },\n    intervals: {\n      type: Number,\n      default: 500\n    },\n    start: {\n      type: Number,\n      default: 0\n    },\n    caret: {\n      type: String,\n      default: 'cursor'\n    }\n  },\n  data: function data() {\n    return {\n      typeValue: \"\",\n      typeStatus: false,\n      arrayIndex: 0,\n      charIndex: 0\n    };\n  },\n  methods: {\n    typewriter: function typewriter() {\n      if (this.charIndex < this.array[this.arrayIndex].length) {\n        if (!this.typeStatus) this.typeStatus = true;\n        this.typeValue += this.array[this.arrayIndex].charAt(this.charIndex);\n        this.charIndex += 1;\n        setTimeout(this.typewriter, this.typeSpeed);\n      } else {\n        this.typeStatus = false;\n        setTimeout(this.eraser, this.delay);\n      }\n    },\n    eraser: function eraser() {\n      if (this.charIndex > 0) {\n        if (!this.typeStatus) this.typeStatus = true;\n        this.typeValue = this.array[this.arrayIndex].substring(0, this.charIndex - 1);\n        this.charIndex -= 1;\n        setTimeout(this.eraser, this.eraseSpeed);\n      } else {\n        this.typeStatus = false;\n        this.arrayIndex += 1;\n        if (this.arrayIndex >= this.array.length) this.arrayIndex = 0;\n        setTimeout(this.typewriter, this.typeSpeed + this.intervals);\n      }\n    }\n  },\n  created: function created() {\n    setTimeout(this.typewriter, this.start);\n  }\n});\n\nvar _hoisted_1 = {\n  class: \"is-typed\"\n};\nvar _hoisted_2 = {\n  class: \"typed\"\n};\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  return openBlock(), createBlock(\"div\", _hoisted_1, [renderSlot(_ctx.$slots, \"default\"), createVNode(\"span\", _hoisted_2, toDisplayString(_ctx.typeValue), 1), createVNode(\"span\", {\n    class: _ctx.caret + ' ' + {\n      typing: _ctx.typeStatus\n    }\n  }, \" \", 2)]);\n}\n\nscript.render = render;\n\n// Import vue component\n// IIFE injects install function into component, allowing component\n// to be registered via Vue.use() as well as Vue.component(),\n\nvar entry_esm = /*#__PURE__*/(function () {\n  // Get component instance\n  var installable = script; // Attach install function executed by Vue.use()\n\n  installable.install = function (app) {\n    app.component('VueWriter', installable);\n  };\n\n  return installable;\n})(); // It's possible to expose named exports when writing components that can\n// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';\n// export const RollupDemoDirective = directive;\n\nexport default entry_esm;\n","<template>\r\n  <header>\r\n    <nav>\r\n      <!-- navbar logo -->\r\n      <div class=\"xpress-logo\">\r\n        <router-link to=\"/home\">\r\n          <img :src=\"payoutLogo\" alt=\"Payout Logo\">\r\n        </router-link>\r\n      </div>\r\n      <!-- navbar links -->\r\n      <ul\r\n        :class=\"['xpress-nav-lnk', activeSidebar?'sidebar-shown':'']\"\r\n      >\r\n        <li>\r\n          <router-link to=\"/home\">Home</router-link>\r\n        </li>\r\n        <li>\r\n          <a href=\"https://www.xpresspayments.com/about.php\">About</a>\r\n        </li>\r\n        <li>\r\n          <a href=\"https://www.xpresspayments.com/contact.php\">Contact Us</a>\r\n        </li>\r\n        <li>\r\n          <router-link to=\"/api/get-started\">Docs</router-link>\r\n        </li>\r\n        <li v-if=\"user\">\r\n          <current-user-avatar />\r\n        </li>\r\n        <li v-else>\r\n          <a @click.prevent=\"login\" href=\"/login\">Login</a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n    <!--toggle button  -->\r\n    <div class=\"xpress-sb-toggle-btn d-md-none\">\r\n      <div\r\n        :class=\"['sb-nav-toggle', activeSidebar ? 'sb-is-active' : '']\"\r\n        @click=\"toggleSidebar\"\r\n      >\r\n        <span></span>\r\n        <span></span>\r\n        <span></span>\r\n      </div>\r\n    </div>\r\n  </header>\r\n</template>\r\n\r\n<script>\r\nimport { ref } from '@vue/reactivity'\r\nimport { useStore } from 'vuex'\r\nimport 'bootstrap/dist/css/bootstrap.min.css'\r\nimport Logo from '../assets/logo.png'\r\nimport { computed } from '@vue/runtime-core'\r\nimport currentUserAvatar from './currentUserAvatar.vue'\r\n\r\nexport default {\r\n  components: { currentUserAvatar },\r\n  name: 'Main Header',\r\n  setup () {\r\n    const store = useStore()\r\n\r\n    const payoutLogo = ref(Logo)\r\n    const activeSidebar = ref(false)\r\n    const user = computed(() => store.getters['users/_user'])\r\n\r\n    // methods\r\n    const toggleSidebar = () => {\r\n      activeSidebar.value = !activeSidebar.value\r\n    }\r\n\r\n    const login = () => store.dispatch('users/UserLogin')\r\n\r\n    return {\r\n      payoutLogo,\r\n      activeSidebar,\r\n      user,\r\n      toggleSidebar,\r\n      login\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n  * {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-sizing: border-box;\r\n  }\r\n  // --------------------------------\r\n\r\n  header {\r\n    width: 100%;\r\n    height: fit-content;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background-repeat: no-repeat;\r\n    background-size: 890px auto;\r\n    background-position: right -10px;\r\n\r\n    &>nav {\r\n      width: 100%;\r\n      height: 101px;\r\n      position: relative;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n\r\n      // navbar logo\r\n      &>div.xpress-logo {\r\n        width: 195px;\r\n        height: 64px;\r\n        display: flex;\r\n        align-items: center;\r\n\r\n        &>a {\r\n          width: inherit;\r\n          height: fit-content;\r\n          display: inline-block;\r\n\r\n          &>img {\r\n            width: auto;\r\n            height: auto;\r\n          }\r\n        }\r\n      }\r\n      // navbar links\r\n      &>ul.xpress-nav-lnk {\r\n        width: 700px;\r\n        height: 44px;\r\n        list-style-type: none;\r\n        padding-left: 34.5px;\r\n        padding-right: 34.5px;\r\n        display: inline-flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        transition: all 0.4s;\r\n\r\n        &>li {\r\n          width: fit-content;\r\n          display: inline-flex;\r\n          align-items: center;\r\n\r\n          &:not(:last-child) {\r\n            margin-right: 64px;\r\n          }\r\n\r\n          &>a {\r\n            text-decoration: none;\r\n            font-weight: normal;\r\n            font-size: 20px;\r\n            line-height: 24px;\r\n            transition: all 0.4s;\r\n            color: #000000;\r\n\r\n            // active navigation\r\n            &.router-link-exact-active {\r\n              font-weight: 600;\r\n            }\r\n\r\n            // &:hover:not(.router-link-exact-active) {}\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  // MEDIA QUERY\r\n\r\n  // XX-SM (<251px)\r\n  @media (max-width: 250.9px) {\r\n    header {\r\n      align-items: center;\r\n      position: sticky;\r\n      top: 0;\r\n      background-image: url(../assets/img/home/bg-home.png);\r\n\r\n      &>nav {\r\n        width: 70vw;\r\n        height: 50px;\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        z-index: 10;\r\n\r\n        // navbar logo\r\n        &>div.xpress-logo {\r\n          width: 100%;\r\n          height: 100%;\r\n          z-index: 2;\r\n\r\n          &>a {\r\n            width: 100%;\r\n            height: fit-content;\r\n            display: flex;\r\n            align-items: flex-start;\r\n\r\n            &>img {\r\n              width: 90%;\r\n              height: auto;\r\n              margin-top: -5px;\r\n            }\r\n          }\r\n        }\r\n        // navbar links\r\n        &>ul.xpress-nav-lnk {\r\n          width: 100%;\r\n          height: 100vh;\r\n          position: fixed;\r\n          left: -1000px;\r\n          top: 0px;\r\n          bottom: 0;\r\n          padding-top: 60px;\r\n          padding-left: 2%;\r\n          padding-right: 2%;\r\n          display: flex;\r\n          flex-flow: column nowrap;\r\n          justify-content: flex-start;\r\n          align-items: flex-start;\r\n          background-color: #ffffff;\r\n          z-index: -1;\r\n\r\n          &>li {\r\n            width: 100%;\r\n            display: block;\r\n            padding: 7px 0;\r\n\r\n            &:not(:last-child) {\r\n              margin-right: 0;\r\n            }\r\n\r\n            &>a {\r\n              width: fit-content;\r\n              font-size: 15px;\r\n              line-height: 24px;\r\n            }\r\n          }\r\n\r\n          // sidebar on mobile devices\r\n          &.sidebar-shown {\r\n            left: 0;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // XX-SM\r\n  @media (min-width: 251px) and (max-width: 350.9px) {\r\n    header {\r\n      align-items: center;\r\n      position: sticky;\r\n      top: 0;\r\n      background-image: url(../assets/img/home/bg-home.png);\r\n\r\n      &>nav {\r\n        width: 70vw;\r\n        height: 50px;\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        z-index: 10;\r\n\r\n        // navbar logo\r\n        &>div.xpress-logo {\r\n          width: 100%;\r\n          height: 100%;\r\n          z-index: 2;\r\n\r\n          &>a {\r\n            width: 100%;\r\n            height: fit-content;\r\n            display: flex;\r\n            align-items: flex-start;\r\n\r\n            &>img {\r\n              width: auto;\r\n              height: auto;\r\n            }\r\n          }\r\n        }\r\n        // navbar links\r\n        &>ul.xpress-nav-lnk {\r\n          width: 100%;\r\n          height: 100vh;\r\n          position: fixed;\r\n          left: -1000px;\r\n          top: 0px;\r\n          bottom: 0;\r\n          padding-top: 60px;\r\n          padding-left: 2%;\r\n          padding-right: 2%;\r\n          padding-bottom: 20px;\r\n          display: flex;\r\n          flex-flow: column nowrap;\r\n          justify-content: flex-start;\r\n          align-items: flex-start;\r\n          background-color: #ffffff;\r\n          z-index: -1;\r\n\r\n          &>li {\r\n            width: 100%;\r\n            display: block;\r\n            padding: 7px 0;\r\n\r\n            &:not(:last-child) {\r\n              margin-right: 0;\r\n            }\r\n\r\n            &>a {\r\n              width: fit-content;\r\n              font-size: 15px;\r\n              line-height: 24px;\r\n            }\r\n          }\r\n\r\n          // sidebar on mobile devices\r\n          &.sidebar-shown {\r\n            left: 0;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // X-SM\r\n  @media (min-width: 351px) and (max-width: 575.9px) {\r\n    header {\r\n      align-items: center;\r\n      position: sticky;\r\n      top: 0;\r\n      background-image: url(../assets/img/home/bg-home.png);\r\n\r\n      &>nav {\r\n        width: 70vw;\r\n        height: 70px;\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        z-index: 10;\r\n\r\n        // navbar logo\r\n        &>div.xpress-logo {\r\n          width: 70%;\r\n          height: 100%;\r\n          z-index: 2;\r\n\r\n          &>a {\r\n            width: 100%;\r\n            height: fit-content;\r\n            display: flex;\r\n            align-items: flex-start;\r\n\r\n            &>img {\r\n              width: auto;\r\n              height: auto;\r\n              margin-top: 0px;\r\n            }\r\n          }\r\n        }\r\n        // navbar links\r\n        &>ul.xpress-nav-lnk {\r\n          width: 250px;\r\n          height: 100vh;\r\n          position: fixed;\r\n          left: -1000px;\r\n          top: 0px;\r\n          bottom: 0;\r\n          padding-top: 80px;\r\n          padding-left: 3%;\r\n          padding-right: 3%;\r\n          padding-bottom: 20px;\r\n          display: flex;\r\n          flex-flow: column nowrap;\r\n          justify-content: flex-start;\r\n          align-items: flex-start;\r\n          background-color: #ffffff;\r\n          z-index: -1;\r\n\r\n          &>li {\r\n            width: 100%;\r\n            display: block;\r\n            padding: 7px 0;\r\n\r\n            &:not(:last-child) {\r\n              margin-right: 0;\r\n            }\r\n\r\n            &>a {\r\n              width: fit-content;\r\n              font-size: 17px;\r\n              line-height: 24px;\r\n            }\r\n          }\r\n\r\n          // sidebar on mobile devices\r\n          &.sidebar-shown {\r\n            left: 0;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // SM\r\n  @media (min-width: 576px) and (max-width: 767.9px) {\r\n    header {\r\n      align-items: center;\r\n      position: sticky;\r\n      top: 0;\r\n      background-image: url(../assets/img/home/bg-home.png);\r\n\r\n      &>nav {\r\n        width: 50vw;\r\n        height: 90px;\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        z-index: 10;\r\n\r\n        // navbar logo\r\n        &>div.xpress-logo {\r\n          width: 100%;\r\n          height: 100%;\r\n          z-index: 2;\r\n\r\n          &>a {\r\n            width: 100%;\r\n            height: fit-content;\r\n            display: flex;\r\n            align-items: flex-start;\r\n\r\n            &>img {\r\n              width: auto;\r\n              height: auto;\r\n              margin-top: 0px;\r\n            }\r\n          }\r\n        }\r\n        // navbar links\r\n        &>ul.xpress-nav-lnk {\r\n          width: 300px;\r\n          height: 100vh;\r\n          position: fixed;\r\n          left: -1000px;\r\n          top: 0px;\r\n          bottom: 0;\r\n          padding-top: 100px;\r\n          padding-left: 5%;\r\n          padding-right: 5%;\r\n          padding-bottom: 20px;\r\n          display: flex;\r\n          flex-flow: column nowrap;\r\n          justify-content: flex-start;\r\n          align-items: flex-start;\r\n          background-color: #ffffff;\r\n          z-index: -1;\r\n\r\n          &>li {\r\n            width: 100%;\r\n            display: block;\r\n            padding: 10px 0;\r\n\r\n            &:not(:last-child) {\r\n              margin-right: 0;\r\n            }\r\n\r\n            &>a {\r\n              width: fit-content;\r\n              // font-size: 17px;\r\n              line-height: 24px;\r\n            }\r\n          }\r\n\r\n          // sidebar on mobile devices\r\n          &.sidebar-shown {\r\n            left: 0;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // MD\r\n  @media (min-width: 768px) and (max-width: 991.9px) {\r\n    header {\r\n      &>nav {\r\n        height: 100px;\r\n\r\n        // navbar logo\r\n        // &>div.xpress-logo {}\r\n\r\n        // navbar links\r\n        &>ul.xpress-nav-lnk {\r\n          // width: 400px;\r\n          width: fit-content;\r\n          padding: 0;\r\n\r\n          &>li {\r\n            &:not(:last-child) {\r\n              margin-right: 25px;\r\n            }\r\n\r\n            &>a {\r\n              font-size: 18px;\r\n\r\n              // active navigation\r\n              // &.router-link-exact-active {}\r\n\r\n              // &:hover:not(.router-link-exact-active) {}\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // LG\r\n  @media (min-width: 992px) and (max-width: 1200.9px) {\r\n    header {\r\n      &>nav {\r\n        // navbar logo\r\n        // &>div.xpress-logo {}\r\n\r\n        // navbar links\r\n        &>ul.xpress-nav-lnk {\r\n          width: 600px;\r\n\r\n          &>li {\r\n            &:not(:last-child) {\r\n              margin-right: 30px;\r\n            }\r\n\r\n            // &>a {}\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  // XL\r\n  // @media (min-width: 1201px) {}\r\n</style>\r\n","import { render } from \"./mainHeader.vue?vue&type=template&id=6031a0f0&scoped=true\"\nimport script from \"./mainHeader.vue?vue&type=script&lang=js\"\nexport * from \"./mainHeader.vue?vue&type=script&lang=js\"\n\nimport \"./mainHeader.vue?vue&type=style&index=0&id=6031a0f0&lang=scss&scoped=true\"\n\nimport exportComponent from \"C:\\\\Users\\\\augustine.ibe\\\\Desktop\\\\AustinXP\\\\payout-fe\\\\node_modules\\\\@vue\\\\cli-service\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-6031a0f0\"]])\n\nexport default __exports__","import { render } from \"./Home.vue?vue&type=template&id=488a8aa0&scoped=true\"\nimport script from \"./Home.vue?vue&type=script&lang=js\"\nexport * from \"./Home.vue?vue&type=script&lang=js\"\n\nimport \"./Home.vue?vue&type=style&index=0&id=488a8aa0&lang=scss&scoped=true\"\n\nimport exportComponent from \"C:\\\\Users\\\\augustine.ibe\\\\Desktop\\\\AustinXP\\\\payout-fe\\\\node_modules\\\\@vue\\\\cli-service\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-488a8aa0\"]])\n\nexport default __exports__"],"sourceRoot":""}