{"version":3,"sources":["webpack:///./src/components/NavList.vue?d6e6","webpack:///src/components/NavList.vue","webpack:///./src/components/NavList.vue?58f8","webpack:///./src/components/NavList.vue?fad4","webpack:///./src/components/NavList.vue?05bd"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","active","_l","item","index","domProps","_s","label","attrs","type","on","$event","scrollTo","id","staticRenderFns","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,WAAWC,MAAM,CAACC,OAAQR,EAAIQ,SAAS,CAACJ,EAAG,KAAK,CAACE,YAAY,kBAAkBN,EAAIS,GAAIT,EAAO,IAAE,SAASU,EAAKC,GAAO,OAAOP,EAAG,KAAK,CAACA,EAAG,OAAO,CAACE,YAAY,kBAAkBM,SAAS,CAAC,UAAYZ,EAAIa,GAAGH,EAAKI,UAAUV,EAAG,SAAS,CAACE,YAAY,iBAAiBS,MAAM,CAAC,YAAYL,EAAKM,MAAMC,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOlB,EAAImB,SAAST,EAAKU,OAAO,CAAChB,EAAG,OAAO,CAACQ,SAAS,CAAC,UAAYZ,EAAIa,GAAGF,YAAgB,MAC1gBU,EAAkB,G,YCYtB,GACE,KAAF,WAEE,MAAF,CACI,OAAJ,SAGE,KAPF,WAQI,MAAJ,CACM,IAAN,QAIE,QAAF,CACI,SADJ,SACA,GACM,IAAN,+EAEM,OAAN,UACQ,IAAR,iDACQ,SAAR,WAEM,KAAN,cAGI,UAXJ,SAWA,QACA,eACQ,KAAR,iBACU,MAAV,gBACU,SAAV,aACU,OAAV,QACU,MAAV,4BC3CiV,I,wBCQ7UC,EAAY,eACd,EACAvB,EACAsB,GACA,EACA,KACA,WACA,MAIa,aAAAC,E,oECnBf,yBAAiiB,EAAG","file":"src/assets/js/chunk-2ca410e4.7cdf1d15.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"nav-list\",class:{active: _vm.active}},[_c('ul',{staticClass:\"nav-list__wrap\"},_vm._l((_vm.nav),function(item,index){return _c('li',[_c('span',{staticClass:\"nav-list__label\",domProps:{\"innerHTML\":_vm._s(item.label)}}),_c('button',{staticClass:\"nav-list__item\",attrs:{\"data-type\":item.type},on:{\"click\":function($event){return _vm.scrollTo(item.id)}}},[_c('span',{domProps:{\"innerHTML\":_vm._s(index)}})])])}),0)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template lang=\"pug\">\n    .nav-list(:class='{active: active}')\n        ul.nav-list__wrap\n            li(v-for='(item, index) in nav')\n                span.nav-list__label(v-html='item.label')\n                button.nav-list__item(@click='scrollTo(item.id)', :data-type='item.type')\n                    span(v-html='index')\n\n</template>\n\n<script>\nimport data from '@/assets/data/data.json';\n\nexport default {\n    name: 'nav-list',\n\n    props: {\n        active: Boolean\n    },\n\n    data() {\n        return {\n            nav: data.nav\n        };\n    },\n\n    methods: {\n        scrollTo(id) {\n            const top = document.querySelector('#' + id).getBoundingClientRect().top + window.pageYOffset;\n\n            window.scrollTo({\n                top: top - document.querySelector('.header').clientHeight,\n                behavior: 'smooth'\n            });\n            this.trackItem(id);\n        },\n\n        trackItem(id) {\n            if (this.$gtm !== undefined) {\n                this.$gtm.trackEvent({\n                    event: 'eventTracking',\n                    category: 'Navigation',\n                    action: 'click',\n                    label: `Scroll to ${id}`\n                });\n            }\n        }\n    }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../assets/css/vars.scss';\n\n.nav-list {\n    transition: opacity 0.2s ease, transform 0.2s ease;\n\n    &:not(.active) {\n        @media (--viewport-tablet) {\n            opacity: 0;\n            transform: translateY(-2em);\n            pointer-events: none;\n        }\n    }\n\n    &__wrap {\n        display: flex;\n\n        @media (--viewport-tablet) {\n            flex-direction: column;\n            background-color: var(--color-main-bg);\n            padding: 2.5em 0.5em 0.5em;\n            transform: translateY(100%);\n            box-shadow: 0 0 10px rgba(200, 200, 200, 0.7);\n        }\n\n        li {\n            position: relative;\n            flex-shrink: 0;\n            margin-right: 1.5em;\n            font-size: 0.6em;\n\n            @media (--viewport-tablet) {\n                margin-right: 0;\n                margin-bottom: 1.5em;\n            }\n\n            &:last-child {\n                margin-right: 0;\n\n                @media (--viewport-tablet) {\n                    margin-bottom: 0;\n                }\n\n                .nav-list__label {\n                    opacity: 1;\n                    transition: transform 0.2s ease;\n\n                    @media (--viewport-tablet) {\n                        opacity: 0;\n                    }\n                }\n\n                &:hover {\n                    .nav-list__label {\n                        transform: translateX(0.2em);\n                    }\n                }\n            }\n\n            &:hover {\n                z-index: 10;\n\n                .nav-list__label {\n                    opacity: 1;\n\n                    @media (--viewport-tablet) {\n                        opacity: 0;\n                    }\n                }\n            }\n        }\n    }\n\n    &__label {\n        position: absolute;\n        top: 10%;\n        left: 0.5em;\n        display: flex;\n        white-space: nowrap;\n        color: var(--color-theme);\n        align-items: center;\n        height: 80%;\n        padding: 0 1em 0 2em;\n        background-color: var(--color-main-bg);\n        box-shadow: 0 0 10px rgba(200, 200, 200, 0.7);\n        opacity: 0;\n    }\n\n    &__item {\n        position: relative;\n        color: var(--color-theme);\n        height: 2em;\n        width: 2em;\n        border-radius: 100%;\n        box-shadow: 0 0 10px rgba(200, 200, 200, 0.7);\n        background-color: var(--color-main-bg);\n\n        &[data-type='check'] {\n            background-color: var(--color-theme);\n\n            span {\n                opacity: 0;\n            }\n\n            &:after {\n                content: '';\n                position: absolute;\n                left: 50%;\n                top: 50%;\n                width: 0.5em;\n                height: 0.8em;\n                border: solid var(--color-main-bg);\n                border-width: 0 2px 2px 0;\n                transform: translate(-50%, -50%) rotate(45deg);\n\n                @media (--viewport-tablet) {\n                    border-width: 0 2px 2px 0;\n                }\n            }\n        }\n\n        &[data-type='arrow'] {\n            span {\n                opacity: 0;\n            }\n\n            &:after {\n                content: '';\n                position: absolute;\n                left: 50%;\n                top: 50%;\n                width: 65%;\n                height: 65%;\n                transform: translate(-50%, -50%);\n                background-image: url('../assets/img/arrow.svg');\n\n                @media (--viewport-tablet) {\n                    border-width: 0 2px 2px 0;\n                }\n            }\n        }\n    }\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--11-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!./NavList.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--11-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!./NavList.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./NavList.vue?vue&type=template&id=6fed5d63&scoped=true&lang=pug&\"\nimport script from \"./NavList.vue?vue&type=script&lang=js&\"\nexport * from \"./NavList.vue?vue&type=script&lang=js&\"\nimport style0 from \"./NavList.vue?vue&type=style&index=0&id=6fed5d63&lang=scss&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  \"6fed5d63\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/index.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NavList.vue?vue&type=style&index=0&id=6fed5d63&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/index.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NavList.vue?vue&type=style&index=0&id=6fed5d63&lang=scss&scoped=true&\""],"sourceRoot":""}