├── .gitignore ├── README.md ├── babel.config.js ├── dist ├── favicon.ico ├── index.html └── js │ ├── app.3f7188c4.js │ ├── app.3f7188c4.js.map │ ├── chunk-2d0c8403.5d43a989.js │ ├── chunk-2d0c8403.5d43a989.js.map │ ├── chunk-2d0cfad0.ab3ad773.js │ ├── chunk-2d0cfad0.ab3ad773.js.map │ ├── chunk-2d0d3a59.117500cd.js │ ├── chunk-2d0d3a59.117500cd.js.map │ ├── chunk-2d0e1d50.61a65b7e.js │ ├── chunk-2d0e1d50.61a65b7e.js.map │ ├── chunk-vendors.1497b8a5.js │ └── chunk-vendors.1497b8a5.js.map ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.scss ├── App.vue ├── assets │ ├── black-asphalt.jpg │ ├── flight-landscape-nature-sky-36717.jpg │ ├── logo.png │ ├── photography-of-body-of-water-and-mountains-1544880.jpg │ ├── red-dahlia-flower-60597.jpg │ ├── red_gerbera_daisy_flower.jpg │ ├── shield.svg │ ├── sunset_silhouette_mountains-2560x1440.jpg │ ├── texture1.jpg │ ├── texture2.jpg │ └── users.json ├── components │ ├── Avatar.vue │ ├── Badge.vue │ ├── Tree │ │ ├── Tree.vue │ │ ├── TreeItem.vue │ │ ├── index.js │ │ └── style.scss │ ├── actions │ │ ├── Button.vue │ │ └── HamburgerMenu.vue │ ├── bars │ │ └── Toolbar.vue │ ├── containers │ │ ├── Card.vue │ │ ├── Drawer.vue │ │ └── style.scss │ ├── form │ │ └── InputSearch.vue │ ├── icons │ │ ├── Addon.vue │ │ ├── ArrowDown.vue │ │ ├── ArrowRight.vue │ │ ├── Bell.vue │ │ ├── Calendar.vue │ │ ├── DIcon.vue │ │ ├── Dashboard.vue │ │ ├── Document.vue │ │ ├── Error.vue │ │ ├── Gift.vue │ │ ├── Info.vue │ │ ├── LineChart.vue │ │ ├── Logout.vue │ │ ├── Message.vue │ │ ├── Palette.vue │ │ ├── Person.vue │ │ ├── Place.vue │ │ ├── Search.vue │ │ ├── Settings.vue │ │ ├── SuperMarket.vue │ │ ├── Warning.vue │ │ └── index.js │ └── lists │ │ ├── List.vue │ │ ├── ListItem.vue │ │ ├── index.js │ │ └── style.scss ├── directives │ └── expand.js ├── layout │ ├── Footer.vue │ ├── Header.vue │ ├── MainContent.vue │ ├── SideBar.vue │ ├── Wrapper.vue │ └── style.scss ├── main.js ├── routes │ └── index.js ├── store │ ├── index.js │ └── modules │ │ └── auth.js ├── styles │ ├── animations.scss │ └── style.scss ├── utils │ ├── EventBus.js │ └── getContrastColor.js └── views │ ├── ComingSoon.vue │ ├── Dashboard1.vue │ ├── Dashboard2.vue │ └── Dashboard3.vue └── vue.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Pro Sidebar 2 | 3 | A responsive sidebar template version of the [HTML pro side bar](https://github.com/azouaoui-med/pro-sidebar-template) 4 | which has a configuration of files structure and Vue ecosystem including Vuex and Vue-router (with [code splitting feature](https://webpack.js.org/guides/code-splitting-async/)) 5 | it's developed using Vue-cli 3, it's serves as starter and saves your time when you launch a new project. 6 | 7 | Original versions made by [Azouaoui Mohamed](https://github.com/azouaoui-med/) 8 | Check [HTML version](https://github.com/azouaoui-med/pro-sidebar-template) 9 | And [Angular version](https://github.com/azouaoui-med/angular-pro-sidebar) 10 | 11 | And [React version](https://github.com/bRIMOs/react-pro-sidebar/) developed by [bRIMOs](https://github.com/bRIMOs/) 12 | 13 | ## Screenshots 14 | 15 | ![Vue Pro Sidebar 1](https://i.imgur.com/sTXOnj2.png) 16 | 17 | ![Vue Pro Sidebar 2](https://i.imgur.com/G1QaTSy.png) 18 | 19 | ## Demo 20 | 21 | [Live Demo](http://boussadjra.github.io/vue-pro-sidebar) 22 | 23 | ## Quick start 24 | 25 | Clone the project and go to its root and run 26 | 27 | ``` 28 | npm install 29 | 30 | npm run serve 31 | ``` 32 | 33 | Navigate to `http://127.0.0.1:8080/`. 34 | 35 | ## Resources 36 | 37 | This app doesn't use any CSS framework or assets provider. 38 | 39 | ## Directory structure 40 | 41 | ```js 42 | -src 43 | |_@use // it contains composition functions (from composition api plugin) 44 | |_assets // it contains images, fonts ... 45 | |_components // reusable components like buttons, dropdowns ... 46 | |_directives // where you define your custom directives 47 | |_layout // the page layout which contains header,sidebar and main content 48 | |_routes // where you define the router and the different navigation routes 49 | |_store // it contains the global Vuex store 50 | |_styles // it contains the CSS and SCSS files 51 | |_utils // where you define the global function helpers 52 | |_views // the pages and routes which should be shown in the main content 53 | |_app.scss // it contains common and global style 54 | |_app.vue // the root component 55 | |_main.js // it defines the vue instance and uses the different plugin 56 | 57 | ``` 58 | 59 | ## License 60 | 61 | This code is released under the [MIT]() license. 62 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | presets: [ 4 | '@vue/cli-plugin-babel/preset' 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/dist/favicon.ico -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | vue-pro-sidebar
-------------------------------------------------------------------------------- /dist/js/app.3f7188c4.js: -------------------------------------------------------------------------------- 1 | (function(A){function t(t){for(var a,n,s=t[0],o=t[1],l=t[2],c=0,p=[];cdiv>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.vps-sidebar-search{height:100%;width:100%;border-bottom:1px solid #94959d}.vps-sidebar-menu{margin:0;padding-top:20px}.vps-sidebar-menu-header{padding:16px 20px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;color:#d4d2d2}.vps-sidebar-menu-item{min-height:40px;cursor:pointer;width:100%}.vps-sidebar-menu-item:hover{background:inherit;-webkit-filter:saturate(.8);filter:saturate(.8)}.vps-sidebar-menu-item-content{display:grid;grid-template-columns:32px auto auto 16px;padding:8px;padding-left:20px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.vps-sidebar-menu-item-content-expanded{padding:12px 8px;padding-left:20px;-webkit-transition:padding .2s ease-in-out;transition:padding .2s ease-in-out;-webkit-box-shadow:0 3px 4px var(--header-bg-color);box-shadow:0 3px 4px var(--header-bg-color)}.vps-sidebar-menu-item-content-icon,.vps-sidebar-menu-item-content-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.vps-sidebar-menu-item-content:hover{border-left:2px solid #fff}.vps-sidebar-menu-item-content-details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-right:6px}.vps-sidebar-sub-menu{margin:10px;display:grid;grid-gap:5px;-webkit-box-align:end;-ms-flex-align:end;align-items:end;width:100%}.vps-sidebar-sub-menu-item{margin-left:24px}.vps-sidebar-sub-menu-item-label{font-size:.9em;padding:4px 24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;color:inherit;-webkit-filter:brightness(.8);filter:brightness(.8)}.vps-sidebar-sub-menu-item-label:before{content:"";height:8px;left:8px;width:8px;border:1px solid;position:absolute;margin-right:8px;border-radius:50%;top:8px}.vps-sidebar-arrow{grid-column-start:4}.vps-sidebar-arrow,.vps-sidebar-rotate-arrow{-webkit-transition:-webkit-transform .4s;transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s}.vps-sidebar-rotate-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.vps-sidebar-closed{width:0;-webkit-transition:width .4s;transition:width .4s}.vps-header{grid-area:header;background:var(--header-bg-color);color:var(--header-color);width:100%;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:64px auto 280px;background-repeat:no-repeat;background-size:cover}.vps-header,.vps-header-extended{-webkit-transition:all .4s;transition:all .4s}.vps-header-extended{width:auto}.vps-header .vps-toolbar{-webkit-filter:none;filter:none}.vps-main-content{grid-area:main;padding:12px;position:relative}.vps-footer{grid-area:footer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-shadow:0 -2px 2px #d1d1d1;box-shadow:0 -2px 2px #d1d1d1;height:48px}.vps-footer,.vps-toolbar{position:-webkit-sticky;position:sticky;bottom:0;z-index:4000;background:inherit;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.vps-toolbar{display:grid;grid-template-columns:repeat(4,1fr);height:100%}.vps-toolbar>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.vps-toolbar-messages{position:relative}.vps-toolbar-messages .vps-dropdown{left:-70px}.vps-toolbar-notifications .vps-dropdown,.vps-toolbar-settings .vps-dropdown{left:0}',""]),A.exports=t},"332d":function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 512 512","xml:space":"preserve"}},[e("path",{attrs:{d:"M498.791,161.127c-17.545-17.546-46.094-17.545-63.645,0.004c-5.398,5.403-39.863,39.896-45.128,45.166V87.426\n\t\t\tc0-12.02-4.681-23.32-13.181-31.819L334.412,13.18C325.913,4.68,314.612,0,302.592,0H45.018c-24.813,0-45,20.187-45,45v422\n\t\t\tc0,24.813,20.187,45,45,45h300c24.813,0,45-20.187,45-45V333.631L498.79,224.767C516.377,207.181,516.381,178.715,498.791,161.127\n\t\t\tz M300.019,30c2.834,0,8.295-0.491,13.18,4.393l42.426,42.427c4.76,4.761,4.394,9.978,4.394,13.18h-60V30z M360.018,467\n\t\t\tc0,8.271-6.728,15-15,15h-300c-8.271,0-15-6.729-15-15V45c0-8.271,6.729-15,15-15h225v75c0,8.284,6.716,15,15,15h75v116.323\n\t\t\tc0,0-44.254,44.292-44.256,44.293l-21.203,21.204c-1.646,1.646-2.888,3.654-3.624,5.863l-21.214,63.64\n\t\t\tc-1.797,5.39-0.394,11.333,3.624,15.35c4.023,4.023,9.968,5.419,15.35,3.624l63.64-21.213c2.209-0.736,4.217-1.977,5.863-3.624\n\t\t\tl1.82-1.82V467z M326.378,312.427l21.213,21.213l-8.103,8.103l-31.819,10.606l10.606-31.82L326.378,312.427z M368.8,312.422\n\t\t\tl-21.213-21.213c11.296-11.305,61.465-61.517,72.105-72.166l21.213,21.213L368.8,312.422z M477.573,203.558l-15.463,15.476\n\t\t\tl-21.213-21.213l15.468-15.481c5.852-5.849,15.366-5.848,21.214,0C483.426,188.19,483.457,197.673,477.573,203.558z"}}),e("path",{attrs:{d:"M285.018,150h-210c-8.284,0-15,6.716-15,15s6.716,15,15,15h210c8.284,0,15-6.716,15-15S293.302,150,285.018,150z"}}),e("path",{attrs:{d:"M225.018,210h-150c-8.284,0-15,6.716-15,15s6.716,15,15,15h150c8.284,0,15-6.716,15-15S233.302,210,225.018,210z"}}),e("path",{attrs:{d:"M225.018,270h-150c-8.284,0-15,6.716-15,15s6.716,15,15,15h150c8.284,0,15-6.716,15-15S233.302,270,225.018,270z"}}),e("path",{attrs:{d:"M225.018,330h-150c-8.284,0-15,6.716-15,15s6.716,15,15,15h150c8.284,0,15-6.716,15-15S233.302,330,225.018,330z"}}),e("path",{attrs:{d:"M285.018,422h-90c-8.284,0-15,6.716-15,15s6.716,15,15,15h90c8.284,0,15-6.716,15-15S293.302,422,285.018,422z"}})])},r=[],i={name:"document",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},"45bd":function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,".vps-list{display:grid;padding:10px;grid-gap:8px;min-width:240px}.vps-list>div{border-bottom:1px solid #f1e9e9}.vps-list-item{display:grid;padding:4px;grid-template-columns:48px 1fr;grid-template-rows:16px 1fr;grid-gap:4px 12px}.vps-list-item-title{font-weight:700;grid-column-start:2;overflow:hidden;color:#6f8090}.vps-list-item-title-no-content{color:#414346}.vps-list-item-content{font-size:11pt;color:#878}.vps-list-item-left{grid-row-start:1;grid-row-end:3}.vps-list-item-left,.vps-list-item-left-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.vps-list-item-left-icon{background:#eee;height:48px;width:48px;border-radius:50%}.vps-list-item-left-no-content{grid-row-end:2;padding-top:4px}.vps-list-item-left-no-content-icon{height:auto;width:auto;border-radius:unset;background:inherit}",""]),A.exports=t},4620:function(A,t,e){var a=e("0916");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("7c8a4856",a,!0,{sourceMap:!1,shadowMode:!1})},"47ea":function(A,t,e){var a=e("757f");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("939e7ccc",a,!0,{sourceMap:!1,shadowMode:!1})},4804:function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,".move-enter-active,.move-input-enter-active,.move-input-leave-active,.move-leave-active{-webkit-transition:all .8s;transition:all .8s}.move-enter,.move-leave-to{-webkit-transform:translate(var(--toolbar-tran-x),var(--toolbar-tran-y));transform:translate(var(--toolbar-tran-x),var(--toolbar-tran-y))}.move-input-enter,.move-input-leave-to{-webkit-transform:translate(-610px,154px);transform:translate(-610px,154px)}",""]),A.exports=t},5224:function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{staticStyle:{transform:"rotate(180deg)"},attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"}},[e("path",{attrs:{d:"M277 213v86h-42v-86h42zM277 128v43h-42v-43h42zM21 64l235 405l235 -405h-470z"}})])},r=[],i={name:"warning",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},"529a":function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 512 512","xml:space":"preserve"}},[e("path",{attrs:{d:"M505.664,243.739l-54.783-38.622c-9.926-6.997-23.645,0.128-23.645,12.26v23.622H164.196\n\t\t\tc-8.284,0-15.001,6.716-15.001,15.001S155.912,271,164.196,271h263.038v23.621c0,12.212,13.792,19.204,23.644,12.26l54.783-38.622\n\t\t\tC514.027,262.365,514.196,249.767,505.664,243.739z"}}),e("path",{attrs:{d:"M430.471,352.317c-7.169-4.146-16.347-1.698-20.496,5.474c-35.236,60.916-101.103,101.811-176.372,101.811\n\t\t\tc-112.266,0-203.602-91.336-203.602-203.602S121.337,52.398,233.603,52.398c75.319,0,141.156,40.933,176.371,101.809\n\t\t\tc4.148,7.172,13.328,9.619,20.496,5.474c7.171-4.148,9.621-13.325,5.474-20.496C395.418,69.127,319.729,22.397,233.603,22.397\n\t\t\tC104.49,22.397,0,126.876,0,256c0,129.113,104.479,233.603,233.603,233.603c86.163,0,161.833-46.763,202.342-116.79\n\t\t\tC440.092,365.642,437.642,356.466,430.471,352.317z"}})])},r=[],i={name:"logout",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},"541f":function(A,t,e){"use strict";var a=e("92bb"),r=e.n(a);r.a},"56d7":function(A,t,e){"use strict";e.r(t);e("e260"),e("e6cf"),e("cca6"),e("a79d");var a=e("2b0e"),r=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{attrs:{id:"app"}},[e("wrapper")],1)},i=[],n=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{class:A.classObject},[e("side-bar",{scopedSlots:A._u([A.sidebarOpen?{key:"toolbar",fn:function(){return[e("toolbar",{attrs:{isIntop:!1}})]},proxy:!0}:null,A.sidebarOpen?{key:"search",fn:function(){return[e("input-search")]},proxy:!0}:null],null,!0)}),e("vps-header",{scopedSlots:A._u([{key:"search",fn:function(){return[e("transition",{attrs:{name:"move-input"}},[A.sidebarOpen?A._e():e("input-search")],1)]},proxy:!0},{key:"toolbar",fn:function(){return[e("transition",{attrs:{name:"move"}},[A.sidebarOpen?A._e():e("toolbar",{attrs:{isIntop:!0}})],1)]},proxy:!0}])}),e("main-content"),e("vps-footer")],1)},s=[],o=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("aside",{staticClass:"vps-sidebar",class:{"vps-sidebar-closed":!A.isOpen}},[A._m(0),e("div",{staticClass:"vps-sidebar-user"},[e("div",{staticClass:"vps-sidebar-user--details"},[e("div",{staticClass:"vps-sidebar-user-avatar"},[e("avatar")],1),A._m(1),e("div",{staticClass:"vps-sidebar-user-role"},[A._v("Administrator")]),e("div",{staticClass:"vps-sidebar-user-status",style:{"--status-color":"#06ef61"}},[A._v("Online")])])]),e("div",{staticClass:"vps-sidebar-search"},[A._t("search")],2),e("ul",{staticClass:"vps-sidebar-menu"},[A._m(2),A._l(A.items,(function(t,a){return e("li",{key:t.label,staticClass:"vps-sidebar-menu-item",on:{click:function(t){return A.expand(a)}}},[e("div",{staticClass:"vps-sidebar-menu-item-content",class:{"vps-sidebar-menu-item-content-expanded":A.expandedIndex===a}},[e("icon",{staticClass:"vps-sidebar-menu-item-content-icon",attrs:{name:t.icon?t.icon:"Addon",height:"16px",width:"16px"}}),e("div",{staticClass:"vps-sidebar-menu-item-content-label"},[A._v(" "+A._s(t.label)+" ")]),t.details?e("div",{staticClass:"vps-sidebar-menu-item-content-details"},[e("badge",{attrs:{color:t.details.color,text:t.details.text}})],1):A._e(),e("icon",{staticClass:"vps-sidebar-arrow",class:{"vps-sidebar-rotate-arrow":A.expandedIndex===a},attrs:{name:"ArrowRight",height:"12px",width:"12px"}})],1),e("ul",{directives:[{name:"expand",rawName:"v-expand",value:a===A.expandedIndex,expression:"index===expandedIndex"}],staticClass:"vps-sidebar-sub-menu expand"},A._l(t.children,(function(a,r){return e("li",{key:r,staticClass:"vps-sidebar-sub-menu-item"},[e("div",{staticClass:"vps-sidebar-sub-menu-item-label"},[e("router-link",{attrs:{to:a.to?a.to:"/coming-soon"}},[A._v(A._s(t.label))])],1)])})),0)])})),A._m(3),A._l(A.extraItems,(function(t,a){return e("li",{key:t.label,staticClass:"vps-sidebar-menu-item"},[e("div",{staticClass:"vps-sidebar-menu-item-content"},[e("icon",{staticClass:"vps-sidebar-menu-item-content-icon",attrs:{name:t.icon?t.icon:"Addon",height:"16px",width:"16px"}}),e("div",{staticClass:"vps-sidebar-menu-item-content-label"},[A._v(A._s(t.label))]),t.details?e("div",{staticClass:"vps-sidebar-menu-item-content-details"},[e("badge",{attrs:{color:t.details.color,text:t.details.text}})],1):A._e()],1)])}))],2),A._t("toolbar")],2)},l=[function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-logo"},[e("h3",[A._v("VUE PRO SIDE")])])},function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-sidebar-user-name"},[A._v(" John "),e("b",[A._v("Smith")])])},function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("li",{staticClass:"vps-sidebar-menu-header"},[e("h4",[A._v("General")])])},function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("li",{staticClass:"vps-sidebar-menu-header"},[e("h4",[A._v("Extra")])])}],c={inserted:function(A,t){if(null!==t.value){var e=function(){var t=A.getAttribute("aria-expanded");A.classList.add("u-no-transition"),A.removeAttribute("aria-expanded"),A.style.height=null,A.style.height=A.clientHeight+"px",A.setAttribute("aria-expanded",t),setTimeout((function(){A.classList.remove("u-no-transition")}))};A.classList.add("expand"),A.setAttribute("aria-expanded",t.value?"true":"false"),e(),window.addEventListener("resize",e)}},update:function(A,t){A.style.height&&null!==t.value&&A.setAttribute("aria-expanded",t.value?"true":"false")}},d=c;a["a"].directive("expand",c);e("4160"),e("d81d"),e("13d5"),e("b0c0"),e("b64b"),e("d3b7"),e("ac1f"),e("5319"),e("159b"),e("ddb0");var p=e("3835"),u=e("9cd1"),h=u.keys().map((function(A){return[A.replace(/(^.\/)|(\.vue$)/g,""),u(A)]})).reduce((function(A,t){var e=Object(p["a"])(t,2),a=e[0],r=e[1];return A[a]=r.default||r,A}),{});Object.keys(h).forEach((function(A){a["a"].component(A,h[A])}));var f,b,m,v,x={name:"icon",props:["name","height","width","fill"],render:function(A){return A(this.name,{props:this.$props})},mounted:function(){}},g=x,w=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("img",{staticClass:"img-responsive img-rounded",attrs:{height:"64",width:"64",src:"data:image/jpeg;base64,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",alt:"User "}})},y=[],C={name:"avatar"},k=C,z=e("2877"),O=Object(z["a"])(k,w,y,!1,null,null,null),_=O.exports,M=function(){var A=this,t=A.$createElement,e=A._self._c||t;return A.circle&&A.text?e("div",{staticClass:"vps-badge vps-badge-circle",style:{background:A.color?A.color:"#ff1100",color:A.adjustedColor}},[A._v(A._s(A.text))]):void 0==A.text?e("div",{staticClass:"vps-badge vps-badge-circle vps-badge-circle-empty",style:{background:A.color?A.color:"#ff1100",color:A.adjustedColor}}):e("div",{staticClass:"vps-badge",style:{background:A.color?A.color:"#ff1100",color:A.adjustedColor}},[A._v(A._s(A.text))])},E=[];e("fb6a"),e("466d");function B(A){return"light"===j(A)?"#333":"#eee"}function j(A){return A.match(/^rgb/)?(A=A.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/),f=A[1],b=A[2],m=A[3]):(A=+("0x"+A.slice(1).replace(A.length<5&&/./g,"$&$&")),f=A>>16,b=A>>8&255,m=255&A),v=Math.sqrt(f*f*.299+b*b*.587+m*m*.114),v>175?"light":"dark"}var S={name:"badge",props:["text","color","circle"],computed:{adjustedColor:function(){return B(this.color)}}},D=S,L=(e("7915"),Object(z["a"])(D,M,E,!1,null,null,null)),I=L.exports,V=new a["a"],F=V,W={name:"side-bar",data:function(){return{isOpen:!0,items:[{label:"Dashboard",icon:"dashboard",details:{text:"New",color:"#ffff11"},children:[{label:"Dashboard 1",to:"/dashboard1"},{label:"Dashboard 2",to:"/dashboard2"},{label:"Dashboard 3",to:"/dashboard3"}]},{label:"Ecommerce",icon:"super-market",details:{text:"3",color:"#ff4444"},children:[{label:"Products"},{label:"Credit card "},{label:"Orders "}]},{label:"Components",icon:"addon",children:[{label:"Button"},{label:"Table"},{label:"Card"},{label:"Alert"}]},{label:"Charts",icon:"line-chart",children:[{label:"Line chart"},{label:"Pie chart"},{label:"Histogram"},{label:"Bar chart"}]},{label:"Maps",icon:"place",children:[{label:"Google Maps"},{label:"Open street Map"}]}],extraItems:[{label:"Documentation",icon:"document",details:{text:"Beta",color:"#1111ff"}},{label:"Calendar",icon:"calendar"},{label:"Examples",icon:"gift"}],expandedIndex:-1}},methods:{expand:function(A){this.expandedIndex=this.expandedIndex===A?-1:A}},components:{Icon:g,Avatar:_,Badge:I},directives:{expand:d},mounted:function(){var A=this;F.$on("toggle-sidebar",(function(t){A.isOpen=t}))}},Q=W,X=(e("a952"),Object(z["a"])(Q,o,l,!1,null,null,null)),T=X.exports,N=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("header",{ref:"header",staticClass:"vps-header",class:{"vps-header-extended":!A.sidebarOpen}},[e("hamburger-menu",{attrs:{open:A.sidebarOpen},on:{toggle:A.toggleSidebar}}),A._t("search"),A._t("toolbar")],2)},J=[],P=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-menu-icon-wrap",on:{click:A.toggle}},[e("div",{staticClass:"vps-menu-icon",class:{"vps-menu-icon-open":A.open}})])},U=[],Z={name:"hamburger-menu",props:{open:{type:Boolean,default:!0}},methods:{toggle:function(){this.$emit("toggle")}}},q=Z,H=(e("fa36"),Object(z["a"])(q,P,U,!1,null,null,null)),$=H.exports,G={name:"vps-header",data:function(){return{sidebarOpen:!0}},components:{HamburgerMenu:$},methods:{toggleSidebar:function(){this.sidebarOpen=!this.sidebarOpen,F.$emit("toggle-sidebar",this.sidebarOpen)}}},R=G,K=(e("0d66"),Object(z["a"])(R,N,J,!1,null,null,null)),Y=K.exports,AA=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("footer",{staticClass:"vps-footer"},[e("div",{staticClass:"copyright"},[A._v(" Ⓒ "+A._s((new Date).getFullYear())+", made with "),e("span",{staticClass:"vps-heart-char"},[A._v("❤")]),A._v(" by "),A._m(0)])])},tA=[function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("i",[e("b",[A._v("@Boussadjra Brahim")])])}],eA={name:"vps-footer"},aA=eA,rA=(e("0d10"),Object(z["a"])(aA,AA,tA,!1,null,null,null)),iA=rA.exports,nA=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-main-content"},[e("div",{staticClass:"vps-theme-settings",class:A.drawerClasses},[e("vps-button",{nativeOn:{click:function(t){A.showThemeSettings=!A.showThemeSettings}}},[e("icon",{attrs:{name:"palette"}})],1),e("vps-drawer",[e("card",{scopedSlots:A._u([{key:"header",fn:function(){return[e("div",{staticClass:"vps-icon-text"},[e("icon",{attrs:{name:"palette",fill:"#222"}}),e("span",[A._v("Theme settings")])],1)]},proxy:!0},{key:"body",fn:function(){return[e("div",{staticClass:"vps-theme-colors"},A._l(A.colors,(function(t,a,r){return e("label",{key:r,staticClass:"vps-theme-color",on:{click:function(e){return A.chooseTheme(t)}}},[e("div",{staticClass:"color",style:{background:t.sidebarColor}}),e("div",{staticClass:"color",style:{background:t.headerColor}})])})),0)]},proxy:!0},{key:"footer",fn:function(){},proxy:!0}])})],1)],1),e("div",{staticClass:"vps-main"},[e("router-view")],1)])},sA=[],oA=e("ade3"),lA=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-list",style:A.style},[A._t("default")],2)},cA=[],dA=(e("a9e3"),{name:"list",props:{width:{type:String|Number,default:256}},computed:{style:function(){return{width:"string"===typeof this.width?this.width:"".concat(this.width,"px")}}}}),pA=dA,uA=(e("ea34"),Object(z["a"])(pA,lA,cA,!1,null,null,null)),hA=uA.exports,fA=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-list-item"},[e("div",{staticClass:"vps-list-item-title",class:{"vps-list-item-title-no-content":!A.content}},[A._v(A._s(A.title))]),e("div",{staticClass:"vps-list-item-left",class:{"vps-list-item-left-no-content":!A.content}},[e("div",{staticClass:"vps-list-item-left-icon",class:{"vps-list-item-left-no-content-icon":!A.content},style:{"background-color":A.iconBgColor}},[A._t("default")],2)]),A.content?e("div",{staticClass:"vps-list-item-content"},[A._v(A._s(A.content))]):A._e()])},bA=[],mA={name:"list-item",props:["title","content","iconBgColor"]},vA=mA,xA=Object(z["a"])(vA,fA,bA,!1,null,null,null),gA=xA.exports,wA=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-card",style:{width:A.width}},[e("div",{staticClass:"vps-card-header"},[A._t("header")],2),e("div",{staticClass:"vps-card-body"},[A._t("body")],2),e("div",{staticClass:"vps-card-footer"},[A._t("footer")],2)])},yA=[],CA={name:"card",props:{width:{type:String,default:"280px"}}},kA=CA,zA=(e("541f"),Object(z["a"])(kA,wA,yA,!1,null,null,null)),OA=zA.exports,_A=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-drawer"},[A._t("default")],2)},MA=[],EA={name:"vps-drawer",components:{}},BA=EA,jA=Object(z["a"])(BA,_A,MA,!1,null,null,null),SA=jA.exports,DA=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("button",{staticClass:"vps-button vps-button-primary"},[A._t("default")],2)},LA=[],IA={name:"vps-button"},VA=IA,FA=(e("ecb3"),Object(z["a"])(VA,DA,LA,!1,null,null,null)),WA=FA.exports,QA={data:function(){var A;return{showThemeSettings:!1,themeCol:"",colors:(A={theme1:{sidebarColor:"#004D40",headerColor:"#3aa996"},theme2:{sidebarColor:"#2e003e",headerColor:"#ccb5df"},theme3:{sidebarColor:"#05386B",headerColor:"#60e1c7"},theme4:{sidebarColor:"#022140",headerColor:"#65b4fd"},theme5:{sidebarColor:"#0c0023",headerColor:"#8463e5"},theme6:{sidebarColor:"#38003c",headerColor:"#e90052"},theme7:{sidebarColor:"#330136",headerColor:"#e79ac8"},theme8:{sidebarColor:"#191226",headerColor:"#F2355B"},theme9:{sidebarColor:"#702C8E",headerColor:"#ED1651"},theme10:{sidebarColor:"#2A4C59",headerColor:"#dd6f83"},theme11:{sidebarColor:"#103754",headerColor:"#D53D13"},theme12:{sidebarColor:"#332851",headerColor:"#CA3074"},theme13:{sidebarColor:"#2D4057",headerColor:"#4097AA"},theme14:{sidebarColor:"#214D72",headerColor:"#2C7695"},theme15:{sidebarColor:"#071E22",headerColor:"#EE2E31"},theme16:{sidebarColor:"#434858",headerColor:"#FC6453"},theme17:{sidebarColor:"#651e3e",headerColor:"#ce0c63"},theme18:{sidebarColor:"#0072ff",headerColor:"#00c6ff"},theme19:{sidebarColor:"#34495e",headerColor:"#41b883"},theme20:{sidebarColor:"#2b2d5c",headerColor:"#3465d8"},theme21:{sidebarColor:"#323E40",headerColor:"#D97D0D"},theme22:{sidebarColor:"#1D1D2C",headerColor:"#E40C2B"},theme23:{sidebarColor:"#1D1D2C",headerColor:"#C3002F"},theme24:{sidebarColor:"#306073",headerColor:"#F2385A"},theme25:{sidebarColor:"#0f256e",headerColor:"#01a168"},theme26:{sidebarColor:"#05004E",headerColor:"#fd5f00"},theme27:{sidebarColor:"#3e1063",headerColor:"#c0b6cc"},theme28:{sidebarColor:"#2F2440",headerColor:"#BA0F30"},theme29:{sidebarColor:"#0A7EA2",headerColor:"#f3a453"},theme30:{sidebarColor:"#1A1C29",headerColor:"#13B65B"},theme31:{sidebarColor:"#0011B2",headerColor:"#FFC700"},theme32:{sidebarColor:"#006bbb",headerColor:"#FFC872"},theme33:{sidebarColor:"#752092",headerColor:"#FFC872"},theme34:{sidebarColor:"#7A04DD",headerColor:"#5e87eb"},theme35:{sidebarColor:"#273253",headerColor:"#57B5ED"},theme36:{sidebarColor:"#254B62",headerColor:"#CFF532"},theme37:{sidebarColor:"#002E9D",headerColor:"#D38400"},theme38:{sidebarColor:"#343434",headerColor:"#FFC700"},theme39:{sidebarColor:"#303960",headerColor:"#ea9a96"}},Object(oA["a"])(A,"theme39",{sidebarColor:"#303960",headerColor:"#ea9a96"}),Object(oA["a"])(A,"theme40",{sidebarColor:"#120136",headerColor:"#fcbf1e"}),Object(oA["a"])(A,"theme41",{sidebarColor:"#2d334a",headerColor:"#00ec59"}),Object(oA["a"])(A,"theme42",{sidebarColor:"#454d66",headerColor:"#b8b74a"}),Object(oA["a"])(A,"theme43",{sidebarColor:"#30475e",headerColor:"#9e9e9e"}),A)}},computed:{drawerClasses:function(){return{"vps-theme-settings-hidden":!this.showThemeSettings,"vps-theme-settings-shown":this.showThemeSettings}}},methods:{chooseTheme:function(A){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];document.documentElement.style.setProperty("--side-bg-color",A.sidebarColor),document.documentElement.style.setProperty("--header-bg-color",A.headerColor),document.documentElement.style.setProperty("--sidebarColor",A.sidebarColor),document.documentElement.style.setProperty("--headerColor",A.headerColor),t&&localStorage.setItem("vpscolor",JSON.stringify(A))}},components:{List:hA,ListItem:gA,Card:OA,Icon:g,"vps-drawer":SA,"vps-button":WA},mounted:function(){var A={sidebarColor:"#0FA774",headerColor:"#a7a409"};try{var t=localStorage.getItem("vpscolor"),e=t?JSON.parse(t):A;this.chooseTheme(e,!1)}catch(a){this.chooseTheme(A,!1)}}},XA=QA,TA=(e("c5ac"),Object(z["a"])(XA,nA,sA,!1,null,null,null)),NA=TA.exports,JA=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-toolbar"},[e("div",{staticClass:"vps-toolbar-notifications",on:{click:function(t){return A.toggleDropdown("notifications")}}},[e("div",{staticClass:"vps-icon-badge"},[e("icon",{attrs:{name:"bell"}}),e("badge",{attrs:{color:"#ffff11",text:"3",circle:!0}})],1),e("transition",{attrs:{name:"drop"}},[A.toggle.notifications?e("div",{staticClass:"vps-dropdown",class:{"vps-dropdown-top":!A.isIntop,"vps-dropdown-bottom":A.isIntop}},[e("card",{scopedSlots:A._u([{key:"header",fn:function(){return[e("div",{staticClass:"vps-icon-text"},[e("icon",{attrs:{name:"bell",fill:"#222"}}),e("span",[A._v("Notifications")])],1)]},proxy:!0},{key:"body",fn:function(){return[e("list",[e("list-item",{attrs:{title:"Lorem ipsum","icon-bg-color":A.getContrastColor("#ff0"),content:"Lorem ipsum dolor sit amet..."}},[e("icon",{attrs:{name:"warning",fill:"#ff0",height:"24px",width:"24px"}})],1),e("list-item",{attrs:{title:"adipisicing elit",content:"consectetur, adipisicing elit. Facilis, distinctio."}},[e("icon",{attrs:{name:"info",fill:"#22e",height:"24px",width:"24px"}})],1),e("list-item",{attrs:{title:" molestiae similique.",content:" Vitae fuga ex dicta nam, molestiae similique."}},[e("icon",{attrs:{name:"error",fill:"#e22",height:"24px",width:"24px"}})],1)],1)]},proxy:!0},{key:"footer",fn:function(){return[e("a",[A._v("See more")])]},proxy:!0}],null,!1,929350336)})],1):A._e()])],1),e("div",{staticClass:"vps-toolbar-messages",on:{click:function(t){return A.toggleDropdown("messages")}}},[e("div",{staticClass:"vps-icon-badge"},[e("icon",{attrs:{name:"message"}}),e("badge",{attrs:{color:"#11ff11",text:"7",circle:!0}})],1),e("transition",{attrs:{name:"drop"}},[A.toggle.messages?e("div",{staticClass:"vps-dropdown",class:{"vps-dropdown-top":!A.isIntop,"vps-dropdown-bottom":A.isIntop}},[e("card",{scopedSlots:A._u([{key:"header",fn:function(){return[e("div",{staticClass:"vps-icon-text"},[e("icon",{attrs:{name:"message",fill:"#222"}}),e("span",[A._v("Messages")])],1)]},proxy:!0},{key:"body",fn:function(){return[e("list",[e("list-item",{attrs:{title:"John Don",content:"Lorem ipsum dolor sit amet..."}},[e("h1",[A._v("D")])]),e("list-item",{attrs:{title:"John Smith",content:"consectetur, adipisicing elit. Facilis, distinctio."}},[e("h1",[A._v("J")])]),e("list-item",{attrs:{title:"Ahmed Naji",content:" Vitae fuga ex dicta nam, molestiae similique."}},[e("h1",[A._v("A")])])],1)]},proxy:!0},{key:"footer",fn:function(){return[e("a",[A._v("See more")])]},proxy:!0}],null,!1,381843059)})],1):A._e()])],1),e("div",{staticClass:"vps-toolbar-settings",on:{click:function(t){return A.toggleDropdown("settings")}}},[e("div",{staticClass:"vps-icon-badge"},[e("icon",{attrs:{name:"settings"}}),e("badge",{attrs:{color:"#ff5511",circle:!0}})],1),e("transition",{attrs:{name:"drop"}},[A.toggle.settings?e("div",{staticClass:"vps-dropdown",class:{"vps-dropdown-top":!A.isIntop,"vps-dropdown-bottom":A.isIntop}},[e("div",{staticClass:"vps-card"},[e("list",[e("list-item",{attrs:{title:"Profile"}},[e("icon",{attrs:{name:"person",fill:"#444",height:"24px",width:"24px"}})],1),e("list-item",{attrs:{title:"help"}},[e("icon",{attrs:{name:"info",fill:"#444",height:"24px",width:"24px"}})],1),e("list-item",{attrs:{title:"Settings"}},[e("icon",{attrs:{name:"settings",fill:"#444",height:"24px",width:"24px"}})],1)],1)],1)]):A._e()])],1),e("div",{staticClass:"vps-toolbar-logout"},[e("icon",{attrs:{name:"logout"}})],1)])},PA=[],UA={name:"toolbar",props:{isIntop:{type:Boolean,default:!1}},data:function(){return{toggle:{messages:!1,notifications:!1,settings:!1},lastToggled:""}},methods:{getContrastColor:B,toggleDropdown:function(A){for(var t in this.toggle)this.toggle[t]=!1;this.lastToggled===A?(this.toggle[A]=!1,this.lastToggled=""):(this.toggle[A]=!0,this.lastToggled=A)}},components:Object(oA["a"])({Icon:g,Badge:I,List:hA,ListItem:gA,Card:OA},"Icon",g)},ZA=UA,qA=(e("076e"),Object(z["a"])(ZA,JA,PA,!1,null,null,null)),HA=qA.exports,$A=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vps-input-search-wrap"},[e("input",{staticClass:"vps-input-search-input",attrs:{type:"text",placeholder:"Search ..."}}),e("div",{staticClass:"vps-input-search-input-append"},[e("icon",{attrs:{name:"search"}})],1)])},GA=[],RA={name:"input-search",components:{icon:g}},KA=RA,YA=(e("0cb7"),Object(z["a"])(KA,$A,GA,!1,null,null,null)),At=YA.exports,tt=(e("0887"),{name:"wrapper",computed:{classObject:function(){return["vps-wrapper",this.sidebarOpen?"":"vps-wrapper-sidebar--closed"]}},data:function(){return{sidebarOpen:!0}},components:{SideBar:T,"vps-header":Y,"vps-footer":iA,MainContent:NA,EventBus:F,Toolbar:HA,InputSearch:At},methods:{changeCSSVars:function(){document.documentElement.style.setProperty("--toolbar-tran-x","-".concat(window.innerWidth,"px")),document.documentElement.style.setProperty("--toolbar-tran-y","".concat(window.innerHeight,"px"))}},mounted:function(){var A=this;F.$on("toggle-sidebar",(function(t){A.sidebarOpen=t})),this.changeCSSVars(),window.addEventListener("resize",(function(){A.changeCSSVars()}))}}),et=tt,at=(e("cb55"),Object(z["a"])(et,n,s,!1,null,null,null)),rt=at.exports,it={name:"App",data:function(){return{}},components:{Wrapper:rt}},nt=it,st=(e("9d14"),Object(z["a"])(nt,r,i,!1,null,null,null)),ot=st.exports,lt=e("750b"),ct=e("8c4f"),dt=function(){return e.e("chunk-2d0d3a59").then(e.bind(null,"5e3f"))},pt=function(){return e.e("chunk-2d0cfad0").then(e.bind(null,"6572"))},ut=function(){return e.e("chunk-2d0c8403").then(e.bind(null,"53a0"))},ht=function(){return e.e("chunk-2d0e1d50").then(e.bind(null,"7bb1"))};a["a"].use(ct["a"]);var ft=new ct["a"]({mode:"history",routes:[{path:"/dashboard1",name:"Dashboard1",component:dt},{path:"/dashboard2",name:"Dashboard2",component:pt},{path:"/dashboard3",name:"Dashboard3",component:ut},{path:"/coming-soon",name:"ComingSoon",component:ht}]}),bt={namespaced:!0,state:{user:null},mutations:{SET_USER:function(A,t){A.user=t}},getters:{user:function(A){return A.user}},actions:{setUser:function(A,t){var e=A.commit;e("SET_USER",t)}}},mt=e("2f62");a["a"].use(mt["a"]);var vt=new mt["a"].Store({modules:{auth:bt}}),xt=vt;a["a"].config.productionTip=!1,a["a"].use(lt["a"]),new a["a"]({router:ft,store:xt,render:function(A){return A(ot)}}).$mount("#app")},"57da":function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,".vps-input-search-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.vps-input-search-input{background:rgba(81,81,81,.5);max-width:300px;color:#f7f3f3;display:block;width:78%;height:calc(2.25rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;background-clip:padding-box;border:none;border-radius:4px 0 0 4px;outline:none;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}.vps-input-search-input::-webkit-input-placeholder{color:#aaa}.vps-input-search-input::-moz-placeholder{color:#aaa}.vps-input-search-input:-ms-input-placeholder{color:#aaa}.vps-input-search-input::-ms-input-placeholder{color:#aaa}.vps-input-search-input::placeholder{color:#aaa}.vps-input-search-input-append{background:rgba(81,81,81,.5);border-radius:0 4px 4px 0;height:calc(2.25rem + 2px);padding:.375rem .75rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}",""]),A.exports=t},5895:function(A,t,e){var a=e("a185");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("22c547ac",a,!0,{sourceMap:!1,shadowMode:!1})},6376:function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,".vps-card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:10px;-webkit-box-shadow:0 0 4px #aaa;box-shadow:0 0 4px #aaa;min-width:280px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:4px}.vps-card-body{max-height:300px;overflow:auto}.vps-card-footer,.vps-card-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;border-bottom:1px solid #ddd}.vps-card-footer{-ms-flex-pack:distribute;justify-content:space-around;border-bottom:none}",""]),A.exports=t},6507:function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{staticStyle:{transform:"rotate(180deg)"},attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 512 512","xml:space":"preserve"}},[e("path",{attrs:{d:"M256 213c57 0 171 -28 171 -85v-43h-342v43c0 57 114 85 171 85zM256 256c-47 0 -85 38 -85 85s38 86 85 86s85 -39 85 -86s-38 -85 -85 -85z"}})])},r=[],i={name:"person",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},"757f":function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,".vps-theme-settings{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute}.vps-theme-settings-hidden{right:-280px;-webkit-transition:all 1s;transition:all 1s}.vps-theme-settings-shown{right:0;-webkit-transition:all 1s;transition:all 1s}.vps-theme-colors{padding:10px;display:grid;grid-template-columns:100%;grid-gap:8px}.vps-theme-colors h4{text-align:center;color:#555}.vps-theme-colors .vps-theme-color{display:-webkit-box;display:-ms-flexbox;display:flex;cursor:pointer}.vps-theme-colors .vps-theme-color .color{height:24px;width:200px}",""]),A.exports=t},"77f9":function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{staticStyle:{"enable-background":"new 0 0 26 26"},attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 512 512","xml:space":"preserve"}},[e("path",{attrs:{d:"M32,271.692v192c0,17.664,14.368,32,32,32h160v-224H32z"}}),e("path",{attrs:{d:"M480,143.692H378.752c7.264-4.96,13.504-9.888,17.856-14.304c25.824-25.952,25.824-68.192,0-94.144\n\t\t\tc-25.088-25.28-68.8-25.216-93.856,0c-13.888,13.92-50.688,70.592-45.6,108.448h-2.304c5.056-37.856-31.744-94.528-45.6-108.448\n\t\t\tc-25.088-25.216-68.8-25.216-93.856,0C89.6,61.196,89.6,103.436,115.36,129.388c4.384,4.416,10.624,9.344,17.888,14.304H32\n\t\t\tc-17.632,0-32,14.368-32,32v48c0,8.832,7.168,16,16,16h208v-64h64v64h208c8.832,0,16-7.168,16-16v-48\n\t\t\tC512,158.06,497.664,143.692,480,143.692z M222.112,142.636c0,0-1.344,1.056-5.92,1.056c-22.112,0-64.32-22.976-78.112-36.864\n\t\t\tc-13.408-13.504-13.408-35.52,0-49.024c6.496-6.528,15.104-10.112,24.256-10.112c9.12,0,17.728,3.584,24.224,10.112\n\t\t\tC208.128,79.5,229.568,134.924,222.112,142.636z M295.776,143.692c-4.544,0-5.888-1.024-5.888-1.056\n\t\t\tc-7.456-7.712,13.984-63.136,35.552-84.832c12.896-13.024,35.456-13.088,48.48,0c13.44,13.504,13.44,35.52,0,49.024\n\t\t\tC360.128,120.716,317.92,143.692,295.776,143.692z"}}),e("path",{attrs:{d:"M288,271.692v224h160c17.664,0,32-14.336,32-32v-192H288z"}})])},r=[],i={name:"gift",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},7915:function(A,t,e){"use strict";var a=e("c30b"),r=e.n(a);r.a},"7b28":function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{attrs:{viewBox:"0 -31 512.00026 512",height:A.height,width:A.width,fill:A.fill,xmlns:"http://www.w3.org/2000/svg"}},[e("path",{attrs:{d:"m164.960938 300.003906h.023437c.019531 0 .039063-.003906.058594-.003906h271.957031c6.695312 0 12.582031-4.441406 14.421875-10.878906l60-210c1.292969-4.527344.386719-9.394532-2.445313-13.152344-2.835937-3.757812-7.269531-5.96875-11.976562-5.96875h-366.632812l-10.722657-48.253906c-1.527343-6.863282-7.613281-11.746094-14.644531-11.746094h-90c-8.285156 0-15 6.714844-15 15s6.714844 15 15 15h77.96875c1.898438 8.550781 51.3125 230.917969 54.15625 243.710938-15.941406 6.929687-27.125 22.824218-27.125 41.289062 0 24.8125 20.1875 45 45 45h272c8.285156 0 15-6.714844 15-15s-6.714844-15-15-15h-272c-8.269531 0-15-6.730469-15-15 0-8.257812 6.707031-14.976562 14.960938-14.996094zm312.152343-210.003906-51.429687 180h-248.652344l-40-180zm0 0"}}),e("path",{attrs:{d:"m150 405c0 24.8125 20.1875 45 45 45s45-20.1875 45-45-20.1875-45-45-45-45 20.1875-45 45zm45-15c8.269531 0 15 6.730469 15 15s-6.730469 15-15 15-15-6.730469-15-15 6.730469-15 15-15zm0 0"}}),e("path",{attrs:{d:"m362 405c0 24.8125 20.1875 45 45 45s45-20.1875 45-45-20.1875-45-45-45-45 20.1875-45 45zm45-15c8.269531 0 15 6.730469 15 15s-6.730469 15-15 15-15-6.730469-15-15 6.730469-15 15-15zm0 0"}})])},r=[],i={name:"super-market",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},"7ce3":function(A,t,e){var a=e("57da");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("710eb788",a,!0,{sourceMap:!1,shadowMode:!1})},"7fa8":function(A,t,e){var a=e("a112");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("28de92a8",a,!0,{sourceMap:!1,shadowMode:!1})},8092:function(A,t,e){var a=e("4804");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("79802500",a,!0,{sourceMap:!1,shadowMode:!1})},"80cb":function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{staticStyle:{transform:"rotate(180deg)"},attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"}},[e("path",{attrs:{d:"M405 375l-119 -119l119 -119l-30 -30l-119 119l-119 -119l-30 30l119 119l-119 119l30 30l119 -119l119 119z"}})])},r=[],i={name:"error",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},"92bb":function(A,t,e){var a=e("6376");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("816b47bc",a,!0,{sourceMap:!1,shadowMode:!1})},"92d4":function(A,t,e){var a=e("45bd");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("54341bf6",a,!0,{sourceMap:!1,shadowMode:!1})},"93cf":function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,".vps-badge{padding:2px 4px;width:-webkit-max-content;width:-moz-max-content;width:max-content;border-radius:3px}.vps-badge-circle{min-width:8px;min-height:8px;border-radius:50%}.vps-badge-circle-empty,.vps-badge-circle:empty{width:8px;height:8px;border-radius:50%}",""]),A.exports=t},"96d8":function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"}},[e("path",{attrs:{d:"m450.201 407.453c-1.505-.977-12.832-8.912-24.174-32.917-20.829-44.082-25.201-106.18-25.201-150.511 0-.193-.004-.384-.011-.576-.227-58.589-35.31-109.095-85.514-131.756v-34.657c0-31.45-25.544-57.036-56.942-57.036h-4.719c-31.398 0-56.942 25.586-56.942 57.036v34.655c-50.372 22.734-85.525 73.498-85.525 132.334 0 44.331-4.372 106.428-25.201 150.511-11.341 24.004-22.668 31.939-24.174 32.917-6.342 2.935-9.469 9.715-8.01 16.586 1.473 6.939 7.959 11.723 15.042 11.723h109.947c.614 42.141 35.008 76.238 77.223 76.238s76.609-34.097 77.223-76.238h109.947c7.082 0 13.569-4.784 15.042-11.723 1.457-6.871-1.669-13.652-8.011-16.586zm-223.502-350.417c0-14.881 12.086-26.987 26.942-26.987h4.719c14.856 0 26.942 12.106 26.942 26.987v24.917c-9.468-1.957-19.269-2.987-29.306-2.987-10.034 0-19.832 1.029-29.296 2.984v-24.914zm29.301 424.915c-25.673 0-46.614-20.617-47.223-46.188h94.445c-.608 25.57-21.549 46.188-47.222 46.188zm60.4-76.239c-.003 0-213.385 0-213.385 0 2.595-4.044 5.236-8.623 7.861-13.798 20.104-39.643 30.298-96.129 30.298-167.889 0-63.417 51.509-115.01 114.821-115.01s114.821 51.593 114.821 115.06c0 .185.003.369.01.553.057 71.472 10.25 127.755 30.298 167.286 2.625 5.176 5.267 9.754 7.861 13.798z"}})])},r=[],i={name:"bell",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},"9cd1":function(A,t,e){var a={"./Addon.vue":"bcf3","./ArrowDown.vue":"fce8","./ArrowRight.vue":"bf7e","./Bell.vue":"96d8","./Calendar.vue":"9f38","./DIcon.vue":"24e6","./Dashboard.vue":"061c","./Document.vue":"332d","./Error.vue":"80cb","./Gift.vue":"77f9","./Info.vue":"1187","./LineChart.vue":"2a6b","./Logout.vue":"529a","./Message.vue":"c108","./Palette.vue":"bd80","./Person.vue":"6507","./Place.vue":"9d7d","./Search.vue":"fbbf","./Settings.vue":"2dde","./SuperMarket.vue":"7b28","./Warning.vue":"5224"};function r(A){var t=i(A);return e(t)}function i(A){if(!e.o(a,A)){var t=new Error("Cannot find module '"+A+"'");throw t.code="MODULE_NOT_FOUND",t}return a[A]}r.keys=function(){return Object.keys(a)},r.resolve=i,A.exports=r,r.id="9cd1"},"9d14":function(A,t,e){"use strict";var a=e("7fa8"),r=e.n(a);r.a},"9d7d":function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{attrs:{height:A.height,width:A.width,fill:A.fill,viewBox:"0 0 512 512"}},[e("path",{attrs:{d:"M425.951,89.021C386.864,32.451,324.917,0,256.006,0S125.148,32.451,86.061,89.021\n\t\t\tc-38.895,56.284-47.876,127.541-24.072,190.496c6.367,17.192,16.488,33.895,30.01,49.547l150.378,176.634\n\t\t\tc3.401,3.998,8.384,6.302,13.629,6.302c5.245,0,10.228-2.303,13.629-6.302l150.336-176.586\n\t\t\tc13.582-15.742,23.69-32.427,30.004-49.481C473.827,216.562,464.846,145.305,425.951,89.021z M416.451,267.093\n\t\t\tc-4.869,13.158-12.818,26.167-23.613,38.68c-0.03,0.03-0.06,0.06-0.084,0.096L256.006,466.487L119.174,305.768\n\t\t\tc-10.789-12.502-18.738-25.51-23.655-38.794c-19.686-52.065-12.215-110.981,19.991-157.592\n\t\t\tc32.307-46.76,83.519-73.578,140.496-73.578c56.976,0,108.182,26.817,140.49,73.578\n\t\t\tC428.708,155.993,436.185,214.909,416.451,267.093z"}}),e("path",{attrs:{d:"M256.006,106.219c-55.276,0-100.252,44.97-100.252,100.252s44.97,100.252,100.252,100.252s100.252-44.97,100.252-100.252\n\t\t\tC356.258,151.195,311.282,106.219,256.006,106.219z M256.006,270.918c-35.536,0-64.448-28.912-64.448-64.448\n\t\t\tc0-35.536,28.912-64.448,64.448-64.448c35.536,0,64.448,28.912,64.448,64.448S291.542,270.918,256.006,270.918z"}})])},r=[],i={name:"place",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},"9f38":function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 500 500","xml:space":"preserve"}},[e("path",{attrs:{d:"M136.31,87c1.08-16.55,6.86-24,18.21-23.99c11.33,0.01,16.99,7.31,18.18,23.72c19.77,0,39.56,0,59.82,0\n\t\t\tc0-2.07-0.06-4.15,0.01-6.23c0.33-9.77,8.26-17.48,17.95-17.49c9.7-0.01,17.64,7.67,17.99,17.44c0.07,1.99,0.01,3.99,0.01,6.26\n\t\t\tc19.96,0,39.75,0,60.04,0c0-2.02-0.06-4.1,0.01-6.18c0.32-9.77,8.23-17.5,17.91-17.53c9.7-0.03,17.66,7.64,18.03,17.41\n\t\t\tc0.08,1.99,0.01,3.99,0.01,6.59c1.45,0,2.76,0,4.07,0c10.37,0,20.75-0.04,31.12,0.01c17.8,0.09,30.8,12.98,30.81,30.78\n\t\t\tc0.04,91.5,0.05,182.99,0,274.49c-0.01,17.75-13.07,30.69-30.9,30.69c-99.37,0.03-198.74,0.03-298.11,0\n\t\t\tc-18-0.01-30.94-13-30.95-31.03c-0.03-91.25-0.03-182.49,0-273.74c0-18.29,12.88-31.14,31.14-31.2\n\t\t\tC113.13,86.97,124.6,87,136.31,87z M82.5,171.18c0,1.54,0,2.89,0,4.23c0,71.73,0,143.46,0,215.18c0,13.27,7.1,20.41,20.31,20.41\n\t\t\tc98.47,0,196.94,0,295.41,0c13.21,0,20.28-7.13,20.28-20.45c0-71.73,0-143.46,0-215.18c0-1.34,0-2.68,0-4.19\n\t\t\tC306.46,171.18,194.78,171.18,82.5,171.18z M82.58,158.73c112.21,0,223.97,0,335.92,0c0-13.88,0.05-27.49-0.02-41.09\n\t\t\tc-0.05-10.98-7.7-18.57-18.69-18.63c-10.75-0.06-21.49-0.02-32.24,0c-0.95,0-1.9,0.16-3.06,0.26c0,5.59,0.02,10.94,0,16.3\n\t\t\tc-0.04,11.25-7.55,19.38-17.92,19.42c-10.38,0.04-18.03-8.1-18.07-19.26c-0.02-5.46,0-10.92,0-16.5c-20.17,0-39.95,0-60.02,0\n\t\t\tc0,6.2,0.11,12.18-0.03,18.15c-0.21,9.22-7.3,16.74-16.32,17.55c-8.95,0.8-17.11-5.03-19.07-13.96c-0.61-2.76-0.49-5.7-0.54-8.56\n\t\t\tc-0.08-4.43-0.02-8.87-0.02-13.21c-20.3,0-40,0-60.02,0c0,6.17,0.11,12.15-0.02,18.11c-0.23,9.98-8.28,17.75-18.13,17.67\n\t\t\tc-9.67-0.08-17.57-7.84-17.79-17.64c-0.13-6.06-0.02-12.13-0.02-18.31c-12.81,0-25.05-0.22-37.28,0.08\n\t\t\tc-8.62,0.21-16.28,7.39-16.54,16C82.26,129.57,82.58,144.06,82.58,158.73z M148.5,99.07c0,5.61-0.04,11.21,0.01,16.82\n\t\t\tc0.04,4.39,2.35,7.07,5.96,7.09c3.62,0.02,6-2.68,6.01-7.04c0.04-11.34,0.05-22.67,0-34.01c-0.02-4.3-2.52-7-6.15-6.9\n\t\t\tc-3.51,0.1-5.77,2.69-5.82,6.85C148.45,87.61,148.5,93.34,148.5,99.07z M244.5,98.62c0,5.86-0.05,11.71,0.02,17.57\n\t\t\tc0.05,4.12,2.38,6.73,5.88,6.79c3.51,0.06,6.05-2.56,6.08-6.59c0.07-11.59,0.07-23.17,0-34.76c-0.02-4.05-2.55-6.65-6.07-6.6\n\t\t\tc-3.53,0.06-5.84,2.63-5.89,6.78C244.45,87.41,244.5,93.01,244.5,98.62z M352.5,99c0-5.61,0.03-11.21-0.01-16.82\n\t\t\tc-0.03-4.42-2.28-7.1-5.9-7.16c-3.64-0.06-6.06,2.62-6.08,6.96c-0.04,11.34-0.04,22.67,0,34.01c0.02,4.33,2.45,7.03,6.07,6.97\n\t\t\tc3.6-0.06,5.87-2.75,5.9-7.16C352.54,110.21,352.5,104.6,352.5,99z"}}),e("path",{attrs:{d:"M250.92,302.12c1.43-8.81,2.76-18.09,4.52-27.29c0.64-3.35-0.06-5.56-2.49-7.9c-6.02-5.82-11.75-11.94-17.63-17.9\n\t\t\tc-2.05-2.07-3.55-4.3-2.43-7.33c1.03-2.79,3.29-3.75,6.12-4.14c8.04-1.11,16.04-2.48,24.08-3.62c3-0.43,5.04-1.33,6.39-4.54\n\t\t\tc3.32-7.94,7.27-15.61,10.87-23.43c1.29-2.81,2.94-5.01,6.33-4.92c3.2,0.08,4.74,2.25,5.97,4.91c3.65,7.94,7.54,15.77,11.05,23.76\n\t\t\tc1.16,2.64,2.72,3.71,5.47,4.08c8.41,1.14,16.79,2.55,25.19,3.77c2.86,0.41,5.49,1.63,5.71,4.48c0.17,2.17-0.77,5-2.23,6.61\n\t\t\tc-5.69,6.31-11.68,12.36-17.78,18.27c-2.41,2.34-3.15,4.54-2.5,7.9c1.68,8.7,2.87,17.49,4.33,26.24c0.47,2.84,0.15,5.73-2.56,6.77\n\t\t\tc-2.01,0.77-5,0.71-6.92-0.25c-7.91-3.98-15.53-8.55-23.39-12.63c-1.34-0.7-3.67-0.69-5.01,0.01\n\t\t\tc-7.97,4.15-15.75,8.66-23.67,12.91C255.52,310.47,250.78,307.7,250.92,302.12z M264.74,291.77c5.84-3.22,11.1-5.83,16.04-8.94\n\t\t\tc3.99-2.51,7.45-2.51,11.43-0.03c5.01,3.12,10.3,5.77,15.99,8.91c-1.11-7.02-1.81-13.36-3.2-19.54c-0.97-4.35,0.2-7.37,3.32-10.33\n\t\t\tc4.58-4.33,8.84-8.99,13.69-13.99c-7.07-1.1-13.3-2.24-19.58-2.98c-3.81-0.45-6.05-2.31-7.55-5.74\n\t\t\tc-2.53-5.78-5.32-11.44-8.39-17.96c-2.74,5.8-5.42,10.7-7.38,15.87c-2.02,5.33-5.36,7.89-11.08,8.28\n\t\t\tc-5.48,0.38-10.91,1.59-16.36,2.44c-0.35,0.55-0.71,1.1-1.06,1.65c5.1,4.59,10.21,9.18,15.31,13.78c2.25,2.03,2.84,4.49,2.3,7.46\n\t\t\tC267.02,277.41,265.99,284.18,264.74,291.77z"}}),e("path",{attrs:{d:"M196.82,248.99c-3.87,0-7.75,0.07-11.62-0.02c-4.4-0.09-6.63-2.34-6.67-6.79c-0.07-7.5-0.08-15,0-22.49\n\t\t\tc0.05-4.41,2.31-6.63,6.78-6.67c7.5-0.07,15-0.08,22.49,0c4.41,0.05,6.64,2.32,6.68,6.78c0.07,7.5,0.08,15,0,22.49\n\t\t\tc-0.05,4.4-2.33,6.6-6.78,6.69C204.07,249.05,200.44,248.99,196.82,248.99z M202.43,225.24c-4.12,0-7.9,0-11.66,0\n\t\t\tc0,4.03,0,7.81,0,11.46c4.06,0,7.85,0,11.66,0C202.43,232.78,202.43,229.18,202.43,225.24z"}}),e("path",{attrs:{d:"M376.26,248.99c-3.75,0-7.5,0.08-11.25-0.02c-4.18-0.11-6.44-2.36-6.49-6.59c-0.08-7.62-0.09-15.25,0-22.87\n\t\t\tc0.05-4.19,2.34-6.44,6.58-6.49c7.62-0.08,15.25-0.09,22.87,0c4.18,0.05,6.45,2.35,6.49,6.58c0.08,7.62,0.09,15.25,0,22.87\n\t\t\tc-0.05,4.18-2.36,6.4-6.58,6.5C384.01,249.06,380.14,248.99,376.26,248.99z M370.77,225.16c0,4.1,0,7.88,0,11.54\n\t\t\tc4.06,0,7.85,0,11.53,0c0-4,0-7.69,0-11.54C378.4,225.16,374.71,225.16,370.77,225.16z"}}),e("path",{attrs:{d:"M136.64,273.01c3.75,0,7.5-0.07,11.25,0.02c4.22,0.1,6.53,2.31,6.58,6.5c0.09,7.62,0.09,15.25,0,22.87\n\t\t\tc-0.05,4.22-2.32,6.53-6.5,6.58c-7.62,0.09-15.25,0.09-22.87,0c-4.23-0.05-6.52-2.31-6.57-6.5c-0.09-7.62-0.09-15.25,0-22.87\n\t\t\tc0.05-4.23,2.3-6.47,6.49-6.58C128.89,272.93,132.77,273.01,136.64,273.01z M130.67,296.74c4.07,0,7.85,0,11.54,0\n\t\t\tc0-4.05,0-7.83,0-11.55c-3.99,0-7.68,0-11.54,0C130.67,289.07,130.67,292.77,130.67,296.74z"}}),e("path",{attrs:{d:"M196.5,308.99c-3.87,0-7.75,0.09-11.62-0.02c-3.99-0.12-6.29-2.36-6.34-6.34c-0.1-7.75-0.1-15.5,0-23.24\n\t\t\tc0.05-3.99,2.34-6.29,6.33-6.34c7.75-0.1,15.5-0.1,23.24,0c3.99,0.05,6.29,2.35,6.34,6.33c0.1,7.75,0.1,15.5,0,23.24\n\t\t\tc-0.05,3.98-2.36,6.24-6.34,6.35C204.25,309.08,200.37,308.99,196.5,308.99z M190.67,296.74c4.07,0,7.85,0,11.54,0\n\t\t\tc0-4.05,0-7.83,0-11.55c-3.99,0-7.68,0-11.54,0C190.67,289.07,190.67,292.77,190.67,296.74z"}}),e("path",{attrs:{d:"M376.51,273.01c3.87,0,7.75-0.09,11.62,0.02c3.98,0.11,6.28,2.36,6.33,6.35c0.1,7.75,0.1,15.5,0,23.24\n\t\t\tc-0.05,3.98-2.37,6.28-6.35,6.33c-7.75,0.1-15.5,0.1-23.24,0c-3.99-0.05-6.27-2.36-6.32-6.35c-0.1-7.75-0.1-15.5,0-23.24\n\t\t\tc0.05-3.99,2.35-6.22,6.35-6.33C368.76,272.93,372.63,273.01,376.51,273.01z M370.81,285.08c0,3.89,0,7.76,0,11.67\n\t\t\tc3.91,0,7.69,0,11.41,0c0-4.04,0-7.82,0-11.67C378.33,285.08,374.73,285.08,370.81,285.08z"}}),e("path",{attrs:{d:"M154.49,351.37c0,3.75,0.09,7.5-0.02,11.25c-0.12,3.98-2.37,6.29-6.35,6.34c-7.75,0.1-15.5,0.1-23.24,0\n\t\t\tc-3.99-0.05-6.28-2.35-6.33-6.34c-0.1-7.75-0.1-15.5,0-23.24c0.05-3.99,2.34-6.28,6.33-6.34c7.75-0.1,15.5-0.1,23.24,0\n\t\t\tc3.98,0.05,6.23,2.35,6.35,6.34C154.58,343.37,154.49,347.37,154.49,351.37z M142.28,356.82c0-3.97,0-7.75,0-11.57\n\t\t\tc-4,0-7.79,0-11.5,0c0,4.04,0,7.83,0,11.57C134.77,356.82,138.46,356.82,142.28,356.82z"}}),e("path",{attrs:{d:"M214.49,351.37c0,3.75,0.09,7.5-0.02,11.25c-0.12,3.98-2.37,6.29-6.35,6.34c-7.75,0.1-15.5,0.1-23.24,0\n\t\t\tc-3.99-0.05-6.28-2.35-6.33-6.34c-0.1-7.75-0.1-15.5,0-23.24c0.05-3.99,2.34-6.28,6.34-6.33c7.75-0.1,15.5-0.1,23.24,0\n\t\t\tc3.98,0.05,6.23,2.35,6.34,6.34C214.58,343.37,214.49,347.38,214.49,351.37z M190.77,345.16c0,4.1,0,7.88,0,11.54\n\t\t\tc4.06,0,7.85,0,11.53,0c0-4,0-7.69,0-11.54C198.4,345.16,194.71,345.16,190.77,345.16z"}}),e("path",{attrs:{d:"M274.49,351.24c0,3.62,0.05,7.25-0.01,10.87c-0.08,4.49-2.25,6.81-6.61,6.86c-7.62,0.09-15.25,0.09-22.87,0\n\t\t\tc-4.18-0.05-6.43-2.36-6.48-6.59c-0.08-7.62-0.09-15.25,0-22.87c0.05-4.19,2.35-6.43,6.58-6.48c7.62-0.08,15.25-0.09,22.87,0\n\t\t\tc4.18,0.05,6.39,2.35,6.49,6.58C274.56,343.49,274.49,347.36,274.49,351.24z M250.67,356.74c4.07,0,7.85,0,11.54,0\n\t\t\tc0-4.05,0-7.83,0-11.55c-3.99,0-7.68,0-11.54,0C250.67,349.07,250.67,352.77,250.67,356.74z"}}),e("path",{attrs:{d:"M316.76,369c-3.75,0-7.5,0.04-11.25-0.01c-4.71-0.07-6.95-2.23-7-6.85c-0.07-7.37-0.06-14.75,0-22.12\n\t\t\tc0.04-4.71,2.21-6.95,6.84-7c7.37-0.07,14.75-0.06,22.12,0c4.7,0.04,6.96,2.22,7,6.84c0.07,7.37,0.06,14.75,0,22.12\n\t\t\tc-0.04,4.84-2.27,6.96-7.22,7.01C323.76,369.03,320.26,369,316.76,369z M322.31,356.85c0-4.12,0-7.81,0-11.63\n\t\t\tc-3.97,0-7.75,0-11.56,0c0,4.01,0,7.79,0,11.63C314.7,356.85,318.39,356.85,322.31,356.85z"}}),e("path",{attrs:{d:"M394.49,351.2c0,3.75,0.08,7.5-0.02,11.25c-0.11,4.2-2.35,6.48-6.55,6.53c-7.62,0.09-15.25,0.09-22.87,0\n\t\t\tc-4.2-0.05-6.47-2.34-6.52-6.55c-0.09-7.62-0.09-15.25,0-22.87c0.05-4.21,2.32-6.47,6.54-6.52c7.62-0.09,15.25-0.09,22.87,0\n\t\t\tc4.2,0.05,6.43,2.33,6.53,6.54C394.57,343.45,394.49,347.32,394.49,351.2z M370.63,356.7c4.19,0,7.97,0,11.67,0\n\t\t\tc0-4,0-7.69,0-11.47c-3.98,0-7.76,0-11.67,0C370.63,349.16,370.63,352.85,370.63,356.7z"}})])},r=[],i={name:"arrow-left",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},a112:function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,':root{--side-bg-color:#3e445f;--side-color:#fff;--header-bg-color:#414564;--header-color:#fff;--status-color:#06ef61;--toolbar-trans-x:-1366px;--toolbar-trans-y:630px}::-webkit-scrollbar{width:2px;border-radius:5px}::-webkit-scrollbar-track{background:inherit;border-radius:5px}::-webkit-scrollbar-thumb{background:var(--header-bg-color);border-radius:5px}*,:after,:before,body{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}body{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;overflow:hidden}ul{list-style:none;-webkit-padding-start:0;padding-inline-start:0;-webkit-margin-before:0;margin-block-start:0}a{text-decoration:none;color:inherit}.expand{overflow:hidden;-webkit-transition-property:height;transition-property:height;-webkit-transition-duration:.4s;transition-duration:.4s;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}.expand[aria-expanded=false]{height:0!important;-webkit-transition-timing-function:cubic-bezier(.6,-.28,.735,.045);transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}.u-no-transition{-webkit-transition-duration:0s!important;transition-duration:0s!important}@-webkit-keyframes sonar{0%{-webkit-transform:scale(.9);transform:scale(.9);opacity:1}to{-webkit-transform:scale(2);transform:scale(2);opacity:0}}@keyframes sonar{0%{-webkit-transform:scale(.9);transform:scale(.9);opacity:1}to{-webkit-transform:scale(2);transform:scale(2);opacity:0}}.vps-icon-badge{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vps-icon-badge .vps-badge{position:absolute;right:-8px;top:-8px;font-size:11px;border-radius:50%;min-width:15px;min-height:15px}.vps-icon-badge .vps-badge-circle{min-width:8px;min-height:8px;border-radius:50%}.vps-icon-badge .vps-badge-circle-empty,.vps-icon-badge .vps-badge-circle:empty{width:8px;height:8px;border-radius:50%;right:-4px;top:-7px}.vps-icon-badge .vps-badge-circle-empty:after,.vps-icon-badge .vps-badge-circle:empty:after{content:"";position:absolute;top:0;left:0;border:2px solid #d86703;opacity:0;border-radius:50%;width:100%;height:100%;-webkit-animation:sonar 1.5s infinite;animation:sonar 1.5s infinite}.vps-icon-text{display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-gap:8px;width:100%;height:100%}.vps-icon-text>span{line-height:1.5}.vps-dropdown{position:absolute;width:280px;color:#2c3e50}.vps-dropdown-top{bottom:calc(12px + 100%)}.vps-dropdown-bottom{top:calc(12px + 100%)}.vps-dropdown .vps-card{background:#fff;width:280px}',""]),A.exports=t},a185:function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,".fade-enter-active,.fade-leave-active{-webkit-transition:opacity 2s;transition:opacity 2s}.fade-enter,.fade-leave-to{opacity:0}",""]),A.exports=t},a6f0:function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,'.copyright{font-family:monospace;font-size:12pt}.vps-heart-char{color:#f22;position:relative;font-size:16pt}.vps-heart-char:before{left:1px}.vps-heart-char:after,.vps-heart-char:before{content:"";position:absolute;top:4px;border:2px solid #f22;opacity:0;border-radius:50%;width:8px;height:8px;-webkit-animation:sonar 1.5s infinite;animation:sonar 1.5s infinite}.vps-heart-char:after{right:1px}',""]),A.exports=t},a952:function(A,t,e){"use strict";var a=e("e40d"),r=e.n(a);r.a},ab74:function(A,t,e){var a=e("a6f0");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("e1c325ec",a,!0,{sourceMap:!1,shadowMode:!1})},ad54:function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,".vps-button{background-color:#f5f5f5;height:36px;min-width:64px;padding:0 16px;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;font-weight:500;letter-spacing:.0892857143em;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:0;position:relative;text-decoration:none;text-indent:.0892857143em;text-transform:uppercase;-webkit-transition-duration:.28s;transition-duration:.28s;-webkit-transition-property:opacity,-webkit-box-shadow,-webkit-transform;transition-property:opacity,-webkit-box-shadow,-webkit-transform;transition-property:box-shadow,transform,opacity;transition-property:box-shadow,transform,opacity,-webkit-box-shadow,-webkit-transform;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;cursor:pointer;border-style:none}.vps-button-primary{background:var(--side-bg-color)}",""]),A.exports=t},b3d9:function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,'.vps-menu-icon-wrap{height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vps-menu-icon{height:2px;background:var(--header-color);width:36px;left:0;cursor:pointer;-webkit-transition:all 1s ease;transition:all 1s ease;position:relative}.vps-menu-icon:before{top:-12px}.vps-menu-icon:after,.vps-menu-icon:before{content:"";height:2px;background:var(--header-color);width:36px;left:0;cursor:pointer;-webkit-transition:all 1s ease;transition:all 1s ease;position:absolute}.vps-menu-icon:after{bottom:-12px}.vps-menu-icon-open{position:relative;width:0;left:-18px}.vps-menu-icon-open:before{content:"";-webkit-transform:rotate(45deg);transform:rotate(45deg);top:0;position:absolute;cursor:pointer}.vps-menu-icon-open:after{content:"";-webkit-transform:rotate(-45deg);transform:rotate(-45deg);top:0;position:absolute;cursor:pointer}',""]),A.exports=t},bcf3:function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{staticStyle:{"enable-background":"new 0 0 26 26"},attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 26 26","xml:space":"preserve"}},[e("path",{attrs:{d:"M16,5.5v-3c0-0.551,0.449-1,1-1h4c0.551,0,1,0.449,1,1v3H16z"}}),e("path",{attrs:{d:"M4,5.5v-3c0-0.551,0.449-1,1-1h4c0.551,0,1,0.449,1,1v3H4z"}}),e("path",{attrs:{d:"M26,21.5c0,1.657-1.344,3-3,3H3c-1.656,0-3-1.343-3-3v-12c0-1.657,1.344-3,3-3h20\n\nc1.656,0,3,1.343,3,3V21.5z"}})])},r=[],i={name:"addon",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},bd80:function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{staticStyle:{transform:"rotate(180deg)"},attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 512 512","xml:space":"preserve"}},[e("path",{attrs:{d:"M373 256c18 0 32 14 32 32s-14 32 -32 32s-32 -14 -32 -32s14 -32 32 -32zM309 341c18 0 32 14 32 32s-14 32 -32 32s-32 -14 -32 -32s14 -32 32 -32zM203 341c18 0 32 14 32 32s-14 32 -32 32s-32 -14 -32 -32s14 -32 32 -32zM139 256c18 0 32 14 32 32s-14 32 -32 32\r\ns-32 -14 -32 -32s14 -32 32 -32zM256 448c106 0 192 -77 192 -171c0 -59 -48 -106 -107 -106h-37c-18 0 -32 -14 -32 -32c0 -8 3 -15 8 -21s8 -14 8 -22c0 -18 -14 -32 -32 -32c-106 0 -192 86 -192 192s86 192 192 192z"}})])},r=[],i={name:"palette",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},bf7e:function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{attrs:{x:"0px",y:"0px",height:A.height,width:A.width,fill:A.fill,viewBox:"0 0 306 306"}},[e("g",{attrs:{id:"chevron-right"}},[e("polygon",{attrs:{points:"94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153"}})])])},r=[],i={name:"arrow-left",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},c108:function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{attrs:{height:A.height,width:A.width,fill:A.fill,x:"0px",y:"0px",viewBox:"0 0 479.058 479.058",xmlns:"http://www.w3.org/2000/svg"}},[e("path",{attrs:{d:"m434.146 59.882h-389.234c-24.766 0-44.912 20.146-44.912 44.912v269.47c0 24.766 20.146 44.912 44.912 44.912h389.234c24.766 0 44.912-20.146 44.912-44.912v-269.47c0-24.766-20.146-44.912-44.912-44.912zm0 29.941c2.034 0 3.969.422 5.738 1.159l-200.355 173.649-200.356-173.649c1.769-.736 3.704-1.159 5.738-1.159zm0 299.411h-389.234c-8.26 0-14.971-6.71-14.971-14.971v-251.648l199.778 173.141c2.822 2.441 6.316 3.655 9.81 3.655s6.988-1.213 9.81-3.655l199.778-173.141v251.649c-.001 8.26-6.711 14.97-14.971 14.97z"}})])},r=[],i={name:"message",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},c30b:function(A,t,e){var a=e("93cf");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("561c5c5e",a,!0,{sourceMap:!1,shadowMode:!1})},c5ac:function(A,t,e){"use strict";var a=e("47ea"),r=e.n(a);r.a},cb55:function(A,t,e){"use strict";var a=e("8092"),r=e.n(a);r.a},e40d:function(A,t,e){var a=e("f155");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("4fb5c012",a,!0,{sourceMap:!1,shadowMode:!1})},ea34:function(A,t,e){"use strict";var a=e("92d4"),r=e.n(a);r.a},ecb3:function(A,t,e){"use strict";var a=e("1f9a"),r=e.n(a);r.a},f05a:function(A,t,e){var a=e("b3d9");"string"===typeof a&&(a=[[A.i,a,""]]),a.locals&&(A.exports=a.locals);var r=e("499e").default;r("49f5148f",a,!0,{sourceMap:!1,shadowMode:!1})},f155:function(A,t,e){var a=e("24fb");t=a(!1),t.push([A.i,".fade-enter-active,.fade-leave-active{-webkit-transition:all 1s;transition:all 1s;max-height:100%}.fade-enter,.fade-leave-to{-webkit-transform:translateY(-100%);transform:translateY(-100%);height:0}.flip-list-move{-webkit-transition:all 1s;transition:all 1s}",""]),A.exports=t},fa36:function(A,t,e){"use strict";var a=e("f05a"),r=e.n(a);r.a},fbbf:function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{attrs:{id:"icon-search",x:"0px",y:"0px",height:A.height,width:A.width,fill:A.fill,viewBox:"0 0 100 100"}},[e("path",{attrs:{d:"M80.65 66.78a33.55 33.55 0 01-47.44-47.44 33.55 33.55 0 1147.44 47.44zm6.73-54.16a43.06 43.06 0 00-65.32 55.71L2 88.39A6.8 6.8 0 0011.61 98l20.06-20.06a43.06 43.06 0 0055.71-65.32z"}})])},r=[],i={name:"search",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports},fce8:function(A,t,e){"use strict";e.r(t);var a=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("svg",{staticStyle:{transform:"rotate(90deg)"},attrs:{x:"0px",y:"0px",height:A.height,width:A.width,fill:A.fill,viewBox:"0 0 306 306"}},[e("g",{attrs:{id:"chevron-down"}},[e("polygon",{attrs:{points:"94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153"}})])])},r=[],i={name:"arrow-down",props:{fill:{default:"#fff"},height:{default:"20px"},width:{default:"20px"}}},n=i,s=e("2877"),o=Object(s["a"])(n,a,r,!1,null,null,null);t["default"]=o.exports}}); 2 | //# sourceMappingURL=app.3f7188c4.js.map -------------------------------------------------------------------------------- /dist/js/chunk-2d0c8403.5d43a989.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0c8403"],{"53a0":function(n,e,a){"use strict";a.r(e);var t=function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._v(" Dashboard view 3 ")])},c=[],r={name:"dashboard3"},s=r,u=a("2877"),l=Object(u["a"])(s,t,c,!1,null,null,null);e["default"]=l.exports}}]); 2 | //# sourceMappingURL=chunk-2d0c8403.5d43a989.js.map -------------------------------------------------------------------------------- /dist/js/chunk-2d0c8403.5d43a989.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/views/Dashboard3.vue?9231","webpack:///src/views/Dashboard3.vue","webpack:///./src/views/Dashboard3.vue?1b99","webpack:///./src/views/Dashboard3.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","_v","staticRenderFns","name","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACJ,EAAIM,GAAG,yBAC7GC,EAAkB,GCMtB,GACAC,KAAA,cCRoV,I,YCOhVC,EAAY,eACd,EACAV,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAE,E","file":"js/chunk-2d0c8403.5d43a989.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._v(\" Dashboard view 3 \")])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n\r\n\r\n\r\n\r\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!./Dashboard3.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!./Dashboard3.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Dashboard3.vue?vue&type=template&id=2a544b1e&\"\nimport script from \"./Dashboard3.vue?vue&type=script&lang=js&\"\nexport * from \"./Dashboard3.vue?vue&type=script&lang=js&\"\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 null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/js/chunk-2d0cfad0.ab3ad773.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0cfad0"],{6572:function(n,e,a){"use strict";a.r(e);var t=function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._v(" Dashboard view 2 ")])},c=[],r={name:"dashboard2"},s=r,u=a("2877"),d=Object(u["a"])(s,t,c,!1,null,null,null);e["default"]=d.exports}}]); 2 | //# sourceMappingURL=chunk-2d0cfad0.ab3ad773.js.map -------------------------------------------------------------------------------- /dist/js/chunk-2d0cfad0.ab3ad773.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/views/Dashboard2.vue?e7e8","webpack:///src/views/Dashboard2.vue","webpack:///./src/views/Dashboard2.vue?e041","webpack:///./src/views/Dashboard2.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","_v","staticRenderFns","name","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACJ,EAAIM,GAAG,yBAC7GC,EAAkB,GCMtB,GACAC,KAAA,cCRoV,I,YCOhVC,EAAY,eACd,EACAV,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAE,E","file":"js/chunk-2d0cfad0.ab3ad773.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._v(\" Dashboard view 2 \")])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n\r\n\r\n\r\n\r\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!./Dashboard2.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!./Dashboard2.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Dashboard2.vue?vue&type=template&id=dce4a59c&\"\nimport script from \"./Dashboard2.vue?vue&type=script&lang=js&\"\nexport * from \"./Dashboard2.vue?vue&type=script&lang=js&\"\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 null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/js/chunk-2d0d3a59.117500cd.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0d3a59"],{"5e3f":function(e,n,a){"use strict";a.r(n);var t=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("div",[e._v(" Dashboard view 1 ")])},r=[],s={name:"dashboard1"},u=s,c=a("2877"),d=Object(c["a"])(u,t,r,!1,null,null,null);n["default"]=d.exports}}]); 2 | //# sourceMappingURL=chunk-2d0d3a59.117500cd.js.map -------------------------------------------------------------------------------- /dist/js/chunk-2d0d3a59.117500cd.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/views/Dashboard1.vue?a1d6","webpack:///src/views/Dashboard1.vue","webpack:///./src/views/Dashboard1.vue?b31c","webpack:///./src/views/Dashboard1.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","_v","staticRenderFns","name","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACJ,EAAIM,GAAG,yBAC7GC,EAAkB,GCMtB,GACAC,KAAA,cCRoV,I,YCOhVC,EAAY,eACd,EACAV,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAE,E","file":"js/chunk-2d0d3a59.117500cd.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._v(\" Dashboard view 1 \")])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n\r\n\r\n\r\n\r\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!./Dashboard1.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!./Dashboard1.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Dashboard1.vue?vue&type=template&id=38457ff3&\"\nimport script from \"./Dashboard1.vue?vue&type=script&lang=js&\"\nexport * from \"./Dashboard1.vue?vue&type=script&lang=js&\"\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 null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/js/chunk-2d0e1d50.61a65b7e.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0e1d50"],{"7bb1":function(n,e,o){"use strict";o.r(e);var t=function(){var n=this,e=n.$createElement,o=n._self._c||e;return o("div",[n._v(" Coming Soon ! ")])},c=[],u={name:"coming-soon"},i=u,l=o("2877"),s=Object(l["a"])(i,t,c,!1,null,null,null);e["default"]=s.exports}}]); 2 | //# sourceMappingURL=chunk-2d0e1d50.61a65b7e.js.map -------------------------------------------------------------------------------- /dist/js/chunk-2d0e1d50.61a65b7e.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/views/ComingSoon.vue?fd03","webpack:///src/views/ComingSoon.vue","webpack:///./src/views/ComingSoon.vue?996e","webpack:///./src/views/ComingSoon.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","_v","staticRenderFns","name","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACJ,EAAIM,GAAG,sBAC7GC,EAAkB,GCMtB,GACAC,KAAA,eCRoV,I,YCOhVC,EAAY,eACd,EACAV,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAE,E","file":"js/chunk-2d0e1d50.61a65b7e.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._v(\" Coming Soon ! \")])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n\r\n\r\n\r\n\r\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!./ComingSoon.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!./ComingSoon.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ComingSoon.vue?vue&type=template&id=39905e07&\"\nimport script from \"./ComingSoon.vue?vue&type=script&lang=js&\"\nexport * from \"./ComingSoon.vue?vue&type=script&lang=js&\"\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 null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-pro-sidebar", 3 | "version": "0.3.1", 4 | "private": false, 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/boussadjra/vue-pro-sidebar.git" 8 | }, 9 | "license": "MIT", 10 | "homepage": "https://boussadjra.github.io/vue-pro-sidebar/", 11 | "scripts": { 12 | "serve": "vue-cli-service serve --open", 13 | "build": "vue-cli-service build" 14 | }, 15 | "dependencies": { 16 | "@vue/composition-api": "^0.3.4", 17 | "core-js": "^3.6.4", 18 | "gsap": "^3.6.0", 19 | "velocity-animate": "^1.5.2", 20 | "vue": "^2.6.11", 21 | "vue-router": "^3.1.6", 22 | "vuex": "^3.1.3" 23 | }, 24 | "devDependencies": { 25 | "@vue/cli-plugin-babel": "^5.0.8", 26 | "@vue/cli-service": "^5.0.8", 27 | "node-sass": "^9.0.0", 28 | "sass-loader": "^8.0.2", 29 | "vue-template-compiler": "^2.6.11" 30 | }, 31 | "browserslist": [ 32 | "> 1%", 33 | "last 2 versions" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --side-bg-color: rgb(62, 68, 95); 3 | --side-color: white; 4 | --header-bg-color: rgb(65, 69, 100); 5 | --header-color: white; 6 | --status-color: #06ef61; 7 | /** these vars used for translating the toolbar from the sidebar to the header 8 | when w toggle the sidebar*/ 9 | --toolbar-trans-x: -1366px; 10 | --toolbar-trans-y: 630px; 11 | } 12 | 13 | ::-webkit-scrollbar { 14 | width: 2px; 15 | border-radius: 5px 16 | } 17 | 18 | ::-webkit-scrollbar-track { 19 | background: inherit; 20 | border-radius: 5px; 21 | } 22 | 23 | ::-webkit-scrollbar-thumb { 24 | background: var(--header-bg-color); 25 | border-radius: 5px; 26 | } 27 | 28 | *, 29 | *::before, 30 | *::after { 31 | box-sizing: border-box; 32 | margin: 0; 33 | } 34 | 35 | body { 36 | font-family: Avenir, Helvetica, Arial, sans-serif; 37 | -webkit-font-smoothing: antialiased; 38 | -moz-osx-font-smoothing: grayscale; 39 | color: #2c3e50; 40 | overflow: hidden; 41 | box-sizing: border-box; 42 | margin: 0; 43 | } 44 | 45 | ul { 46 | list-style: none; 47 | padding-inline-start: 0; 48 | margin-block-start: 0; 49 | } 50 | 51 | a { 52 | text-decoration: none; 53 | color: inherit; 54 | } 55 | 56 | 57 | /****************/ 58 | 59 | // Most important part 60 | .expand { 61 | overflow: hidden; 62 | transition-property: height; 63 | transition-duration: 0.4s; // Durations can be changed without touching JS 64 | transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); // Timing functions also! 65 | &[aria-expanded="false"] { 66 | height: 0 !important; 67 | transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); // Timing function can be different for each direction 68 | } 69 | } 70 | 71 | .u-no-transition { 72 | transition-duration: 0s !important; 73 | } 74 | 75 | 76 | /****************/ 77 | 78 | @import './styles/style.scss' -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/assets/black-asphalt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/src/assets/black-asphalt.jpg -------------------------------------------------------------------------------- /src/assets/flight-landscape-nature-sky-36717.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/src/assets/flight-landscape-nature-sky-36717.jpg -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/photography-of-body-of-water-and-mountains-1544880.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/src/assets/photography-of-body-of-water-and-mountains-1544880.jpg -------------------------------------------------------------------------------- /src/assets/red-dahlia-flower-60597.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/src/assets/red-dahlia-flower-60597.jpg -------------------------------------------------------------------------------- /src/assets/red_gerbera_daisy_flower.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/src/assets/red_gerbera_daisy_flower.jpg -------------------------------------------------------------------------------- /src/assets/shield.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/assets/sunset_silhouette_mountains-2560x1440.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/src/assets/sunset_silhouette_mountains-2560x1440.jpg -------------------------------------------------------------------------------- /src/assets/texture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/src/assets/texture1.jpg -------------------------------------------------------------------------------- /src/assets/texture2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/boussadjra/vue-pro-sidebar/bdecf7010a0f02796982398d8f91b53233ee50ac/src/assets/texture2.jpg -------------------------------------------------------------------------------- /src/assets/users.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "name": "Leanne Graham", 5 | "username": "Bret", 6 | "email": "Sincere@april.biz", 7 | "address": { 8 | "street": "Kulas Light", 9 | "suite": "Apt. 556", 10 | "city": "Gwenborough", 11 | "zipcode": "92998-3874", 12 | "geo": { 13 | "lat": "-37.3159", 14 | "lng": "81.1496" 15 | } 16 | }, 17 | "phone": "1-770-736-8031 x56442", 18 | "website": "hildegard.org", 19 | "company": { 20 | "name": "Romaguera-Crona", 21 | "catchPhrase": "Multi-layered client-server neural-net", 22 | "bs": "harness real-time e-markets" 23 | } 24 | }, 25 | { 26 | "id": 2, 27 | "name": "Ervin Howell", 28 | "username": "Antonette", 29 | "email": "Shanna@melissa.tv", 30 | "address": { 31 | "street": "Victor Plains", 32 | "suite": "Suite 879", 33 | "city": "Wisokyburgh", 34 | "zipcode": "90566-7771", 35 | "geo": { 36 | "lat": "-43.9509", 37 | "lng": "-34.4618" 38 | } 39 | }, 40 | "phone": "010-692-6593 x09125", 41 | "website": "anastasia.net", 42 | "company": { 43 | "name": "Deckow-Crist", 44 | "catchPhrase": "Proactive didactic contingency", 45 | "bs": "synergize scalable supply-chains" 46 | } 47 | }, 48 | { 49 | "id": 3, 50 | "name": "Clementine Bauch", 51 | "username": "Samantha", 52 | "email": "Nathan@yesenia.net", 53 | "address": { 54 | "street": "Douglas Extension", 55 | "suite": "Suite 847", 56 | "city": "McKenziehaven", 57 | "zipcode": "59590-4157", 58 | "geo": { 59 | "lat": "-68.6102", 60 | "lng": "-47.0653" 61 | } 62 | }, 63 | "phone": "1-463-123-4447", 64 | "website": "ramiro.info", 65 | "company": { 66 | "name": "Romaguera-Jacobson", 67 | "catchPhrase": "Face to face bifurcated interface", 68 | "bs": "e-enable strategic applications" 69 | } 70 | }, 71 | { 72 | "id": 4, 73 | "name": "Patricia Lebsack", 74 | "username": "Karianne", 75 | "email": "Julianne.OConner@kory.org", 76 | "address": { 77 | "street": "Hoeger Mall", 78 | "suite": "Apt. 692", 79 | "city": "South Elvis", 80 | "zipcode": "53919-4257", 81 | "geo": { 82 | "lat": "29.4572", 83 | "lng": "-164.2990" 84 | } 85 | }, 86 | "phone": "493-170-9623 x156", 87 | "website": "kale.biz", 88 | "company": { 89 | "name": "Robel-Corkery", 90 | "catchPhrase": "Multi-tiered zero tolerance productivity", 91 | "bs": "transition cutting-edge web services" 92 | } 93 | }, 94 | { 95 | "id": 5, 96 | "name": "Chelsey Dietrich", 97 | "username": "Kamren", 98 | "email": "Lucio_Hettinger@annie.ca", 99 | "address": { 100 | "street": "Skiles Walks", 101 | "suite": "Suite 351", 102 | "city": "Roscoeview", 103 | "zipcode": "33263", 104 | "geo": { 105 | "lat": "-31.8129", 106 | "lng": "62.5342" 107 | } 108 | }, 109 | "phone": "(254)954-1289", 110 | "website": "demarco.info", 111 | "company": { 112 | "name": "Keebler LLC", 113 | "catchPhrase": "User-centric fault-tolerant solution", 114 | "bs": "revolutionize end-to-end systems" 115 | } 116 | }, 117 | { 118 | "id": 6, 119 | "name": "Mrs. Dennis Schulist", 120 | "username": "Leopoldo_Corkery", 121 | "email": "Karley_Dach@jasper.info", 122 | "address": { 123 | "street": "Norberto Crossing", 124 | "suite": "Apt. 950", 125 | "city": "South Christy", 126 | "zipcode": "23505-1337", 127 | "geo": { 128 | "lat": "-71.4197", 129 | "lng": "71.7478" 130 | } 131 | }, 132 | "phone": "1-477-935-8478 x6430", 133 | "website": "ola.org", 134 | "company": { 135 | "name": "Considine-Lockman", 136 | "catchPhrase": "Synchronised bottom-line interface", 137 | "bs": "e-enable innovative applications" 138 | } 139 | }, 140 | { 141 | "id": 7, 142 | "name": "Kurtis Weissnat", 143 | "username": "Elwyn.Skiles", 144 | "email": "Telly.Hoeger@billy.biz", 145 | "address": { 146 | "street": "Rex Trail", 147 | "suite": "Suite 280", 148 | "city": "Howemouth", 149 | "zipcode": "58804-1099", 150 | "geo": { 151 | "lat": "24.8918", 152 | "lng": "21.8984" 153 | } 154 | }, 155 | "phone": "210.067.6132", 156 | "website": "elvis.io", 157 | "company": { 158 | "name": "Johns Group", 159 | "catchPhrase": "Configurable multimedia task-force", 160 | "bs": "generate enterprise e-tailers" 161 | } 162 | }, 163 | { 164 | "id": 8, 165 | "name": "Nicholas Runolfsdottir V", 166 | "username": "Maxime_Nienow", 167 | "email": "Sherwood@rosamond.me", 168 | "address": { 169 | "street": "Ellsworth Summit", 170 | "suite": "Suite 729", 171 | "city": "Aliyaview", 172 | "zipcode": "45169", 173 | "geo": { 174 | "lat": "-14.3990", 175 | "lng": "-120.7677" 176 | } 177 | }, 178 | "phone": "586.493.6943 x140", 179 | "website": "jacynthe.com", 180 | "company": { 181 | "name": "Abernathy Group", 182 | "catchPhrase": "Implemented secondary concept", 183 | "bs": "e-enable extensible e-tailers" 184 | } 185 | }, 186 | { 187 | "id": 9, 188 | "name": "Glenna Reichert", 189 | "username": "Delphine", 190 | "email": "Chaim_McDermott@dana.io", 191 | "address": { 192 | "street": "Dayna Park", 193 | "suite": "Suite 449", 194 | "city": "Bartholomebury", 195 | "zipcode": "76495-3109", 196 | "geo": { 197 | "lat": "24.6463", 198 | "lng": "-168.8889" 199 | } 200 | }, 201 | "phone": "(775)976-6794 x41206", 202 | "website": "conrad.com", 203 | "company": { 204 | "name": "Yost and Sons", 205 | "catchPhrase": "Switchable contextually-based project", 206 | "bs": "aggregate real-time technologies" 207 | } 208 | }, 209 | { 210 | "id": 10, 211 | "name": "Clementina DuBuque", 212 | "username": "Moriah.Stanton", 213 | "email": "Rey.Padberg@karina.biz", 214 | "address": { 215 | "street": "Kattie Turnpike", 216 | "suite": "Suite 198", 217 | "city": "Lebsackbury", 218 | "zipcode": "31428-2261", 219 | "geo": { 220 | "lat": "-38.2386", 221 | "lng": "57.2232" 222 | } 223 | }, 224 | "phone": "024-648-3804", 225 | "website": "ambrose.net", 226 | "company": { 227 | "name": "Hoeger LLC", 228 | "catchPhrase": "Centralized empowering task-force", 229 | "bs": "target end-to-end models" 230 | } 231 | } 232 | ] -------------------------------------------------------------------------------- /src/components/Avatar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /src/components/Badge.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 31 | 32 | 49 | -------------------------------------------------------------------------------- /src/components/Tree/Tree.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 22 | 23 | 25 | -------------------------------------------------------------------------------- /src/components/Tree/TreeItem.vue: -------------------------------------------------------------------------------- 1 | s 7 | 8 | 17 | 18 | 20 | -------------------------------------------------------------------------------- /src/components/Tree/index.js: -------------------------------------------------------------------------------- 1 | import Tree from './Tree' 2 | import './style.scss' 3 | export default Tree; -------------------------------------------------------------------------------- /src/components/Tree/style.scss: -------------------------------------------------------------------------------- 1 | .vps-tree-wrapper { 2 | width: fit-content; 3 | background: purple; 4 | color: white; 5 | } 6 | 7 | .vps-tree { 8 | &-item { 9 | min-height: 32px; 10 | background: rgb(97, 5, 97); 11 | &-label { 12 | padding: 8px; 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /src/components/actions/Button.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 50 | -------------------------------------------------------------------------------- /src/components/actions/HamburgerMenu.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | 24 | 78 | -------------------------------------------------------------------------------- /src/components/bars/Toolbar.vue: -------------------------------------------------------------------------------- 1 | 128 | 129 | 184 | 185 | 206 | -------------------------------------------------------------------------------- /src/components/containers/Card.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 26 | 27 | 54 | -------------------------------------------------------------------------------- /src/components/containers/Drawer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | 15 | 17 | -------------------------------------------------------------------------------- /src/components/containers/style.scss: -------------------------------------------------------------------------------- 1 | .vps-card { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | padding: 10px; 6 | box-shadow: 0 0 4px #aaa; 7 | background: white; 8 | min-width: 280px; 9 | width: fit-content; 10 | border-radius: 4px; 11 | &-header { 12 | display: flex; 13 | align-items: center; 14 | padding: 10px; 15 | border-bottom: 1px solid #ddd 16 | } 17 | &-footer { 18 | display: flex; 19 | align-items: center; 20 | justify-content: space-around; 21 | padding: 10px; 22 | border-bottom: 1px solid #ddd 23 | } 24 | } -------------------------------------------------------------------------------- /src/components/form/InputSearch.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | 20 | 62 | -------------------------------------------------------------------------------- /src/components/icons/Addon.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 40 | 41 | 43 | -------------------------------------------------------------------------------- /src/components/icons/ArrowDown.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | 28 | 30 | -------------------------------------------------------------------------------- /src/components/icons/ArrowRight.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | 26 | 28 | -------------------------------------------------------------------------------- /src/components/icons/Bell.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 33 | 34 | 36 | -------------------------------------------------------------------------------- /src/components/icons/Calendar.vue: -------------------------------------------------------------------------------- 1 | 111 | 112 | 128 | 129 | 131 | -------------------------------------------------------------------------------- /src/components/icons/DIcon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/icons/Dashboard.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 42 | 43 | 45 | -------------------------------------------------------------------------------- /src/components/icons/Document.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 62 | 63 | 65 | -------------------------------------------------------------------------------- /src/components/icons/Error.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 34 | 35 | 37 | -------------------------------------------------------------------------------- /src/components/icons/Gift.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 41 | 42 | 45 | -------------------------------------------------------------------------------- /src/components/icons/Info.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 33 | 34 | 36 | -------------------------------------------------------------------------------- /src/components/icons/LineChart.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /src/components/icons/Logout.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 43 | 44 | 46 | -------------------------------------------------------------------------------- /src/components/icons/Message.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 33 | 34 | 36 | -------------------------------------------------------------------------------- /src/components/icons/Palette.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 36 | 37 | 39 | -------------------------------------------------------------------------------- /src/components/icons/Person.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 34 | 35 | 37 | -------------------------------------------------------------------------------- /src/components/icons/Place.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 40 | 41 | 43 | -------------------------------------------------------------------------------- /src/components/icons/Search.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 34 | 35 | 37 | -------------------------------------------------------------------------------- /src/components/icons/Settings.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 36 | 37 | 39 | -------------------------------------------------------------------------------- /src/components/icons/SuperMarket.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 38 | 39 | 41 | -------------------------------------------------------------------------------- /src/components/icons/Warning.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 33 | 34 | 36 | -------------------------------------------------------------------------------- /src/components/icons/index.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from "vue"; 3 | const requireContext = require.context("./", true, /\.vue$/i,"sync"); 4 | 5 | const dynamicComponents = requireContext 6 | .keys() 7 | .map(file => [file.replace(/(^.\/)|(\.vue$)/g, ""), requireContext(file)]) 8 | .reduce((components, [name, component]) => { 9 | components[name] = component.default || component; 10 | return components; 11 | }, {}); 12 | Object.keys(dynamicComponents).forEach(name => { 13 | Vue.component(name, dynamicComponents[name]); 14 | }); 15 | const Icon = { 16 | name: 'icon', 17 | props: ['name', 'height', 'width', 'fill'], 18 | render(h) { 19 | return h(this.name, { props: this.$props }); 20 | }, 21 | /* components: { 22 | ArrowRight, 23 | ArrowDown, 24 | Search, 25 | Place, 26 | Addon, 27 | Gift, 28 | LineChart, 29 | Dashboard, 30 | SuperMarket, 31 | Document, 32 | Calendar, 33 | Bell, 34 | Message, 35 | Settings, 36 | Logout, 37 | },*/ 38 | 39 | mounted() {}, 40 | }; 41 | 42 | export default Icon; 43 | -------------------------------------------------------------------------------- /src/components/lists/List.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 26 | 27 | 30 | -------------------------------------------------------------------------------- /src/components/lists/ListItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/lists/index.js: -------------------------------------------------------------------------------- 1 | import List from './List' 2 | import ListItem from './ListItem'; 3 | 4 | export {List, ListItem}; -------------------------------------------------------------------------------- /src/components/lists/style.scss: -------------------------------------------------------------------------------- 1 | @mixin centered { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | 7 | .vps-list { 8 | display: grid; 9 | padding: 10px; 10 | grid-gap: 8px; 11 | min-width: 240px; 12 | &>div { 13 | border-bottom: 1px solid #f1e9e9; 14 | } 15 | &-item { 16 | display: grid; 17 | padding: 4px; 18 | grid-template-columns: 48px 1fr; 19 | grid-template-rows: 16px 1fr; 20 | grid-gap: 4px 12px; 21 | &-title { 22 | font-weight: bold; 23 | grid-column-start: 2; 24 | overflow: hidden; 25 | color: #6f8090; 26 | &-no-content { 27 | color: #414346; 28 | } 29 | } 30 | &-content { 31 | font-size: 11pt; 32 | color: #878 33 | } 34 | &-left { 35 | grid-row-start: 1; 36 | grid-row-end: 3; 37 | @include centered; 38 | &-icon { 39 | background: #eee; 40 | height: 48px; 41 | width: 48px; 42 | border-radius: 50%; 43 | @include centered; 44 | } 45 | &-no-content { 46 | grid-row-end: 2; 47 | padding-top: 4px; 48 | &-icon { 49 | height: auto; 50 | width: auto; 51 | border-radius: unset; 52 | background: inherit; 53 | } 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /src/directives/expand.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | 4 | const expand = { 5 | inserted: function(el, binding) 6 | { 7 | if (binding.value !== null) 8 | { 9 | function calcHeight() 10 | { 11 | const currentState = el.getAttribute('aria-expanded') 12 | 13 | el.classList.add('u-no-transition') 14 | el.removeAttribute('aria-expanded') 15 | el.style.height = null 16 | el.style.height = el.clientHeight + 'px' 17 | el.setAttribute('aria-expanded', currentState) 18 | 19 | setTimeout(function() 20 | { 21 | el.classList.remove('u-no-transition') 22 | }) 23 | } 24 | 25 | el.classList.add('expand') 26 | el.setAttribute('aria-expanded', (binding.value) ? 'true' : 'false') 27 | calcHeight() 28 | window.addEventListener('resize', calcHeight) 29 | } 30 | }, 31 | update: function(el, binding) 32 | { 33 | if (el.style.height && binding.value !== null) 34 | { 35 | el.setAttribute('aria-expanded', (binding.value) ? 'true' : 'false') 36 | } 37 | }, 38 | 39 | } 40 | 41 | export default expand; 42 | Vue.directive('expand', expand) -------------------------------------------------------------------------------- /src/layout/Footer.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | 20 | 50 | -------------------------------------------------------------------------------- /src/layout/Header.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 33 | 34 | 43 | -------------------------------------------------------------------------------- /src/layout/MainContent.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 287 | 288 | 325 | -------------------------------------------------------------------------------- /src/layout/SideBar.vue: -------------------------------------------------------------------------------- 1 | 95 | 96 | 243 | 244 | 260 | -------------------------------------------------------------------------------- /src/layout/Wrapper.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 31 | 32 | 33 | 34 | 92 | 93 | 107 | -------------------------------------------------------------------------------- /src/layout/style.scss: -------------------------------------------------------------------------------- 1 | @mixin centered { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | 7 | @mixin sideLogoFooterMixin { 8 | position: sticky; 9 | bottom: 0; 10 | z-index: 4000; 11 | background: inherit; 12 | // filter: saturate(0.7); 13 | } 14 | 15 | .vps-wrapper { 16 | position: relative; 17 | height: 100vh; 18 | width: 100vw; 19 | display: grid; 20 | grid-template-areas: 'side header' 'side main' 'side footer'; 21 | grid-template-columns: auto 1fr; 22 | grid-template-rows: 64px auto 48px; 23 | transition: all 0.4s; 24 | } 25 | 26 | .vps-sidebar { 27 | overflow-y: scroll; 28 | overflow-x: hidden; 29 | grid-area: side; 30 | background: var(--side-bg-color); 31 | // background-image: url(../assets/texture1.jpg); 32 | color: var(--side-color); 33 | display: grid; 34 | grid-template-rows: 64px 92px 64px auto 48px; 35 | font-size: 14px; 36 | width: 280px; 37 | transition: width 0.4s; 38 | .vps-logo { 39 | @include centered; 40 | @include sideLogoFooterMixin; 41 | top: 0; 42 | } 43 | &-user { 44 | @include centered; 45 | height: 100%; 46 | width: 100%; 47 | font-size: 14px; 48 | border-bottom: 1px solid #94959d; 49 | &--details { 50 | width: 70%; 51 | display: grid; 52 | grid-template-columns: 80px 1fr; 53 | grid-template-rows: repeat(3, 24px); 54 | } 55 | &-avatar { 56 | grid-area: 1/1/4/2; 57 | img { 58 | border-radius: 50%; 59 | } 60 | } 61 | &-status { 62 | &::before { 63 | content: ''; 64 | height: 8px; 65 | width: 8px; 66 | background: var(--status-color); 67 | /* position: absolute; */ 68 | margin-right: 8px; 69 | border-radius: 50%; 70 | } 71 | } 72 | &>div>div { 73 | @include centered(); 74 | } 75 | } 76 | &-search { 77 | height: 100%; 78 | width: 100%; 79 | @include centered(); 80 | border-bottom: 1px solid #94959d; 81 | } 82 | &-menu { 83 | // height: 90%; 84 | margin: 0; 85 | padding-top: 20px; 86 | &-header { 87 | padding: 16px 20px; 88 | justify-content: flex-start; 89 | display: flex; 90 | font-size: 14px; 91 | color: #d4d2d2; 92 | } 93 | &-item { 94 | min-height: 40px; 95 | cursor: pointer; 96 | width: 100%; 97 | &:hover { 98 | background: inherit; 99 | filter: saturate(0.8); 100 | } 101 | &-content { 102 | display: grid; 103 | grid-template-columns: 32px auto auto 16px; 104 | padding: 8px; 105 | padding-left: 20px; 106 | transition: all .2s ease-in-out; 107 | align-items: center; 108 | &-expanded { 109 | padding: 12px 8px; 110 | padding-left: 20px; 111 | transition: padding .2s ease-in-out; 112 | box-shadow: 0px 3px 4px var(--header-bg-color); 113 | } 114 | &-icon, 115 | &-label { 116 | display: flex; 117 | justify-content: flex-start; 118 | } 119 | &:hover { 120 | border-left: 2px solid white 121 | } 122 | &-details { 123 | display: flex; 124 | justify-content: flex-end; 125 | margin-right: 6px; 126 | } 127 | } 128 | } 129 | } 130 | &-sub-menu { 131 | margin: 10px; 132 | display: grid; 133 | grid-gap: 5px; 134 | align-items: end; 135 | width: 100%; 136 | &-item { 137 | margin-left: 24px; 138 | &-label { 139 | font-size: .9em; 140 | padding: 4px 24px; 141 | display: flex; 142 | justify-content: space-between; 143 | color: inherit; 144 | filter: brightness(0.8); 145 | &::before { 146 | content: ''; 147 | height: 8px; 148 | left: 8px; 149 | width: 8px; 150 | border: 1px solid; 151 | position: absolute; 152 | margin-right: 8px; 153 | border-radius: 50%; 154 | top: 8px; 155 | } 156 | } 157 | } 158 | } 159 | &-arrow { 160 | transition: transform .4s; 161 | grid-column-start: 4; 162 | } 163 | &-rotate-arrow { 164 | transform: rotate(90deg); 165 | transition: transform .4s; 166 | } 167 | } 168 | 169 | 170 | /** when side bar is closed**/ 171 | 172 | .vps-sidebar-closed { 173 | width: 0px; 174 | transition: width 0.4s; 175 | } 176 | 177 | 178 | /**********************/ 179 | 180 | .vps-header { 181 | grid-area: header; 182 | background: var(--header-bg-color); 183 | color: var(--header-color); 184 | transition: all 0.4s; 185 | width: 100%; 186 | display: grid; 187 | align-items: center; 188 | grid-template-columns: 64px auto 280px; 189 | // background-image: url(../assets/texture1.jpg); 190 | background-repeat: no-repeat; 191 | background-size: cover; 192 | &-extended { 193 | width: auto; 194 | transition: all 0.4s; 195 | } 196 | .vps-toolbar { 197 | filter: none; 198 | } 199 | } 200 | 201 | .vps-main-content { 202 | grid-area: main; 203 | padding: 12px; 204 | position: relative; 205 | } 206 | 207 | .vps-footer { 208 | grid-area: footer; 209 | @include sideLogoFooterMixin; 210 | @include centered(); 211 | box-shadow: 0px -2px 2px rgb(209, 209, 209); 212 | height: 48px; 213 | } 214 | 215 | .vps-toolbar { 216 | @include sideLogoFooterMixin; 217 | bottom: 0; 218 | display: grid; 219 | grid-template-columns: repeat(4, 1fr); 220 | align-items: center; 221 | height: 100%; 222 | &>div { 223 | @include centered; 224 | cursor: pointer; 225 | } 226 | &-messages { 227 | position: relative; 228 | .vps-dropdown { 229 | left: -70px; 230 | } 231 | } 232 | &-notifications, 233 | &-settings { 234 | // position: relative; 235 | .vps-dropdown { 236 | left: 0px; 237 | } 238 | } 239 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import VueComp from '@vue/composition-api' 4 | Vue.config.productionTip = false 5 | import router from './routes'; 6 | import store from './store'; 7 | 8 | Vue.use(VueComp) 9 | 10 | new Vue({ 11 | router, 12 | store, 13 | render: h => h(App), 14 | }).$mount('#app') 15 | -------------------------------------------------------------------------------- /src/routes/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | const Dashboard1 = () => import('../views/Dashboard1.vue') 5 | const Dashboard2 = () => import('../views/Dashboard2.vue') 6 | const Dashboard3 = () => import('../views/Dashboard3.vue') 7 | const ComingSoon = () => import('../views/ComingSoon.vue') 8 | Vue.use(Router) 9 | 10 | 11 | export default new Router({ 12 | mode:'history', 13 | routes: [{ 14 | path: '/dashboard1', 15 | name: 'Dashboard1', 16 | component: Dashboard1, 17 | }, 18 | { 19 | path: '/dashboard2', 20 | name: 'Dashboard2', 21 | component: Dashboard2, 22 | }, 23 | { 24 | path: '/dashboard3', 25 | name: 'Dashboard3', 26 | component: Dashboard3, 27 | }, 28 | { 29 | path: '/coming-soon', 30 | name: 'ComingSoon', 31 | component: ComingSoon, 32 | } 33 | 34 | ] 35 | }) -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | 2 | import auth from './modules/auth'; 3 | import Vue from 'vue'; 4 | import Vuex from 'vuex'; 5 | 6 | Vue.use(Vuex); 7 | 8 | const store = new Vuex.Store({ 9 | modules: { 10 | auth, 11 | }, 12 | }); 13 | 14 | export default store; 15 | -------------------------------------------------------------------------------- /src/store/modules/auth.js: -------------------------------------------------------------------------------- 1 | export default { 2 | namespaced: true, 3 | state: { 4 | user: null, 5 | }, 6 | mutations: { 7 | SET_USER(state, user) { 8 | state.user = user; 9 | }, 10 | }, 11 | getters: { 12 | user(state) { 13 | return state.user; 14 | }, 15 | }, 16 | actions: { 17 | setUser({ commit }, user) { 18 | commit('SET_USER', user); 19 | }, 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /src/styles/animations.scss: -------------------------------------------------------------------------------- 1 | @keyframes sonar { 2 | 0% { 3 | transform: scale(.9); 4 | opacity: 1; 5 | } 6 | 100% { 7 | transform: scale(2); 8 | opacity: 0; 9 | } 10 | } -------------------------------------------------------------------------------- /src/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import './animations.scss'; 2 | .vps-icon-badge { 3 | height: fit-content; 4 | width: fit-content; 5 | position: relative; 6 | display: flex; 7 | justify-content: center; 8 | .vps-badge { 9 | position: absolute; 10 | right: -8px; 11 | top: -8px; 12 | font-size: 11px; 13 | border-radius: 50%; 14 | min-width: 15px; 15 | min-height: 15px; 16 | &-circle { 17 | min-width: 8px; 18 | min-height: 8px; 19 | border-radius: 50%; 20 | &:empty, 21 | &-empty { 22 | width: 8px; 23 | height: 8px; 24 | border-radius: 50%; 25 | right: -4px; 26 | top: -7px; 27 | &::after { 28 | content: ""; 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | border: 2px solid #d86703; 33 | opacity: 0; 34 | border-radius: 50%; 35 | width: 100%; 36 | height: 100%; 37 | -webkit-animation: sonar 1.5s infinite; 38 | animation: sonar 1.5s infinite; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | 45 | .vps-icon-text { 46 | display: grid; 47 | grid-template-columns: max-content auto; 48 | align-items: center; 49 | grid-gap: 8px; 50 | width: 100%; 51 | height: 100%; 52 | &>span { 53 | line-height: 1.5; 54 | } 55 | } 56 | 57 | .vps-dropdown { 58 | position: absolute; 59 | width: 280px; 60 | color: #2c3e50; 61 | &-top { 62 | bottom: calc(12px + 100%); 63 | } 64 | &-bottom { 65 | top: calc(12px + 100%); 66 | } 67 | .vps-card { 68 | background: white; 69 | width: 280px; 70 | } 71 | } -------------------------------------------------------------------------------- /src/utils/EventBus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | const EventBus = new Vue(); 3 | 4 | export default EventBus; -------------------------------------------------------------------------------- /src/utils/getContrastColor.js: -------------------------------------------------------------------------------- 1 | export default function getContrastColor(color) { 2 | return lightOrDark(color)==='light' ? '#333' : '#eee'; 3 | } 4 | 5 | let r, g, b, hsp; 6 | function lightOrDark(color) { 7 | 8 | // Check the format of the color, HEX or RGB? 9 | if (color.match(/^rgb/)) { 10 | 11 | // If HEX --> store the red, green, blue values in separate variables 12 | color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/); 13 | 14 | r = color[1]; 15 | g = color[2]; 16 | b = color[3]; 17 | } 18 | else { 19 | 20 | // If RGB --> Convert it to HEX: http://gist.github.com/983661 21 | color = +("0x" + color.slice(1).replace( 22 | color.length < 5 && /./g, '$&$&' 23 | ) 24 | ); 25 | 26 | r = color >> 16; 27 | g = color >> 8 & 255; 28 | b = color & 255; 29 | } 30 | 31 | // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html 32 | hsp = Math.sqrt( 33 | 0.299 * (r * r) + 34 | 0.587 * (g * g) + 35 | 0.114 * (b * b) 36 | ); 37 | 38 | // Using the HSP value, determine whether the color is light or dark 39 | if (hsp>175) { 40 | 41 | return 'light'; 42 | } 43 | else { 44 | 45 | return 'dark'; 46 | } 47 | } -------------------------------------------------------------------------------- /src/views/ComingSoon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/Dashboard1.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/Dashboard2.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/Dashboard3.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' ? '/vue-pro-sidebar/' : '/', 3 | chainWebpack: config => { 4 | // process.env.NODE_ENV === 'production' ? config.externals(['@vue/composition-api']):{}; 5 | }, 6 | css: { 7 | extract: false, 8 | }, 9 | }; 10 | --------------------------------------------------------------------------------