{"version":3,"sources":["webpack:///./src/modules/account/Account.vue?4760","webpack:///src/modules/account/Account.vue","webpack:///./src/modules/account/Account.vue?e79c","webpack:///./src/modules/account/Account.vue","webpack:///./src/modules/account/Account.vue?468f"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","isLayoutFlat","_e","class","opened","isMobileMenuOpened","_v","active","on","$event","toggleMenu","attrs","preventDefault","logout","staticRenderFns","name","data","computed","methods","$store","commit","dispatch","$router","push","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,YAAY,qBAAqB,CAAGN,EAAIO,aAAgqBP,EAAIQ,KAAtpBJ,EAAG,MAAM,CAACE,YAAY,YAAYG,MAAM,CAAEC,OAAQV,EAAIW,qBAAsB,CAACP,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,KAAK,CAACJ,EAAIY,GAAG,aAAaR,EAAG,SAAS,CAACK,MAAM,CAAEI,OAAQb,EAAIW,oBAAqBG,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOf,EAAIgB,gBAAgB,CAACZ,EAAG,YAAYA,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,cAAc,CAACE,YAAY,UAAUW,MAAM,CAAC,GAAK,qBAAqB,CAACjB,EAAIY,GAAG,aAAaR,EAAG,cAAc,CAACE,YAAY,eAAeW,MAAM,CAAC,GAAK,0BAA0B,CAACjB,EAAIY,GAAG,kBAAkBR,EAAG,IAAI,CAACE,YAAY,SAASW,MAAM,CAAC,KAAO,IAAIH,GAAG,CAAC,MAAQ,SAASC,GAAgC,OAAxBA,EAAOG,iBAAwBlB,EAAImB,YAAY,CAACnB,EAAIY,GAAG,aAAa,KAAcR,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAACF,EAAG,gBAAgB,QAC93BgB,EAAkB,G,wBC2BtB,GACEC,KAAM,UACNC,KAAM,WAAR,UAGEC,SAAU,OAAZ,OAAY,CAAZ,GACA,uDAEEC,QAAS,CACPR,WADJ,WAEMf,KAAKwB,OAAOC,OAAO,sBAAuBzB,KAAKU,qBAEjDQ,OAJJ,WAKMlB,KAAKwB,OAAOE,SAAS,eACrB1B,KAAK2B,QAAQC,KAAK,aC1CwU,I,wBCQ5VC,EAAY,eACd,EACA/B,EACAqB,GACA,EACA,KACA,WACA,MAIa,aAAAU,E,6CCnBf,yBAA6jB,EAAG,G","file":"js/chunk-f381692e.ddebf0be.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"account-container\"},[(!_vm.isLayoutFlat)?_c('div',{staticClass:\"side-menu\",class:{ opened: _vm.isMobileMenuOpened }},[_c('div',{staticClass:\"nav-header\"},[_c('h2',[_vm._v(\"Account\")]),_c('button',{class:{ active: _vm.isMobileMenuOpened },on:{\"click\":function($event){return _vm.toggleMenu()}}},[_c('span')])]),_c('div',{staticClass:\"menu-items\"},[_c('router-link',{staticClass:\"profile\",attrs:{\"to\":\"/account/profile\"}},[_vm._v(\"Profile\")]),_c('router-link',{staticClass:\"subscription\",attrs:{\"to\":\"/account/subscription\"}},[_vm._v(\"Subscription\")]),_c('a',{staticClass:\"logout\",attrs:{\"href\":\"\"},on:{\"click\":function($event){$event.preventDefault();return _vm.logout()}}},[_vm._v(\"Logout\")])],1)]):_vm._e(),_c('div',{staticClass:\"account-content\"},[_c('router-view')],1)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <div class=\"account-container\">\n      <div v-if=\"!isLayoutFlat\" class=\"side-menu\" v-bind:class=\"{ opened: isMobileMenuOpened }\">\n        <div class=\"nav-header\">\n          <h2>Account</h2>\n          <button @click=\"toggleMenu()\" v-bind:class=\"{ active: isMobileMenuOpened }\">\n            <span></span>\n          </button>\n        </div>\n\n        <div class=\"menu-items\">\n          <router-link class=\"profile\" to=\"/account/profile\">Profile</router-link>\n          <router-link class=\"subscription\" to=\"/account/subscription\">Subscription</router-link>\n          <a href=\"\" @click.prevent=\"logout()\" class=\"logout\">Logout</a>\n        </div>\n      </div>\n\n      <div class=\"account-content\">\n        <router-view />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { mapState } from 'vuex';\n\nexport default {\n  name: 'Account',\n  data: () => ({\n\n  }),\n  computed: {\n    ...mapState(['isMobileMenuOpened', 'isLayoutFlat']),\n  },\n  methods: {\n    toggleMenu() {\n      this.$store.commit('setMobileMenuState', !this.isMobileMenuOpened);\n    },\n    logout() {\n      this.$store.dispatch('auth/logout');\n      this.$router.push('/login');\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n .account-container {\n    display: flex;\n    margin: 60px 0;\n\n    .side-menu {\n      width: 270px;\n      flex-grow: 0;\n      flex-shrink: 0;\n      border-right: 1px solid #595959;\n\n      .nav-header {\n        display: flex;\n        justify-content: space-between;\n\n        h2 {\n          font-size: 2rem;\n          margin: 0;\n          color: #fff;\n        }\n\n        button {\n          display: none;\n          border: none;\n          background: none;\n          width: 30px;\n          height: 24px;\n          padding: 0;\n          align-items: center;\n          outline: none;\n          position: relative;\n          align-self: center;\n\n          span, span::before, span::after {\n            position: absolute;\n            display: block;\n            height: 3px;\n            width: 100%;\n            background-color: #fff;\n            transition: 0.3s;\n          }\n\n          span::before {\n            content: '';\n            top: -10px;\n          }\n\n          span::after {\n            content: '';\n            top: 10px;\n          }\n\n          &.active {\n            span {\n              transform: rotate(45deg);\n\n              &::before {\n                top: 0;\n                transform: rotate(0);\n              }\n\n              &::after {\n                top: 0;\n                transform: rotate(90deg);\n              }\n            }\n          }\n        }\n      }\n\n      .menu-items {\n        margin-top: 85px;\n\n        a {\n          font-size: 1.5rem;\n          color: #777;\n          font-weight: 400;\n          padding-left: 55px;\n          display: block;\n          margin-bottom: 48px;\n          position: relative;\n          transition: 0.3s;\n\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 26px;\n            mask-repeat: no-repeat;\n            mask-position: 50% 50%;\n            background-color: #ddd;\n          }\n\n          &:hover {\n            color: #7ce7f2;\n\n            &::before {\n              background-color: #7ce7f2;\n            }\n          }\n\n          &.profile::before {\n            mask-image: url('../../assets/images/profile-icon.svg');\n          }\n\n          &.subscription::before {\n            mask-image: url('../../assets/images/subscription-icon.svg');\n          }\n\n          &.logout::before {\n            mask-image: url('../../assets/images/logout-icon.svg');\n          }\n\n          &.active {\n            color: #fff;\n            position: relative;\n\n            &::before {\n              background-color: #7ce7f2;\n            }\n\n            &::after {\n              content: '';\n              display: block;\n              position: absolute;\n              width: 3px;\n              height: 100%;\n              top: 0;\n              right: -2px;\n              background-color: #7ce7f2;\n            }\n          }\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n        }\n      }\n    }\n\n    .account-content {\n      padding: 0 130px;\n      width: 100%;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .account-container {\n      flex-direction: column;\n      margin: 40px 0;\n\n      .side-menu {\n        width: 100%;\n        border-right: none;\n\n        .nav-header {\n          button {\n            display: flex;\n          }\n        }\n\n        .menu-items {\n          margin-top: 16px;\n\n          a {\n            margin-bottom: 24px;\n            font-size: 1rem;\n            line-height: 24px;\n\n            &:not(.active) {\n              display: none;\n            }\n\n            &:last-child {\n              margin-bottom: 24px;\n            }\n          }\n        }\n\n        &.opened {\n          .menu-items {\n            a {\n              display: block;\n            }\n          }\n        }\n      }\n\n      .account-content {\n        padding: 0;\n        margin-top: 24px;\n      }\n    }\n  }\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Account.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Account.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Account.vue?vue&type=template&id=02a55dda&scoped=true&\"\nimport script from \"./Account.vue?vue&type=script&lang=js&\"\nexport * from \"./Account.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Account.vue?vue&type=style&index=0&id=02a55dda&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"02a55dda\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Account.vue?vue&type=style&index=0&id=02a55dda&lang=less&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Account.vue?vue&type=style&index=0&id=02a55dda&lang=less&scoped=true&\""],"sourceRoot":""}