Added configurator

src/App.vue

@@ -2,6 +2,7 @@
     <div class="layout-wrapper">
         <app-topbar @menubutton-click="onMenuButtonClick"/>
         <app-menu :active="sidebarActive" />
+        <app-configurator />
         <div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div>
         <div class="layout-content">
             <router-view/>
@@ -18,6 +19,7 @@
 import AppTopBar from '@/AppTopBar.vue';
 import AppMenu from '@/AppMenu.vue';
 import AppFooter from '@/AppFooter.vue';
+import AppConfigurator from '@/AppConfigurator.vue';
 
 export default {
     data() {
@@ -42,7 +44,8 @@ export default {
     components: {
         'app-topbar': AppTopBar,
         'app-menu': AppMenu,
-        'app-footer': AppFooter
+        'app-footer': AppFooter,
+        'app-configurator': AppConfigurator
     },
 }
 </script>

src/AppConfigurator.vue

@@ -0,0 +1,178 @@
+<template>
+    <div :class="containerClass">
+        <div class="layout-config-content-wrapper">
+            <a href="#" class="layout-config-button" @click="toggleConfigurator">
+                <i class="pi pi-cog"></i>
+            </a>
+            <a href="#" class="layout-config-close" @click="hideConfigurator">
+                <i class="pi pi-times"></i>
+            </a>
+
+            <div class="layout-config-content">
+                <div class="free-themes">
+                    <h1 style="margin-top: 0">FREE THEMES</h1>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    <div class="p-grid">
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" @click="changeTheme($event, 'nova-light', false)"/>
+                                <i class="pi pi-check" v-if="theme === 'nova-light'" />
+                            </button>
+                            <span>Nova-Light</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" @click="changeTheme($event, 'nova-dark', false)"/>
+                                <i class="pi pi-check" v-if="theme === 'nova-dark'" />
+                            </button>
+                            <span>Nova-Dark</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" @click="changeTheme($event, 'nova-colored', false)"/>
+                                <i class="pi pi-check" v-if="theme === 'nova-colored'" />
+                            </button>
+                            <span>Nova-Colored</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" @click="changeTheme($event, 'luna-blue', false)"/>
+                                <i class="pi pi-check" v-if="theme === 'luna-blue'" />
+                            </button>
+                            <span>Luna-Blue</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" @click="changeTheme($event, 'luna-green', false)"/>
+                                <i class="pi pi-check" v-if="theme === 'luna-blue'" />
+                            </button>
+                            <span>Luna-Green</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" @click="changeTheme($event, 'luna-amber', false)" target="_blank"/>
+                                <i class="pi pi-check" v-if="theme === 'luna-amber'" />
+                            </button>
+                            <span>Luna-Amber</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" @click="changeTheme($event, 'luna-pink', false)" target="_blank"/>
+                                <i class="pi pi-check" v-if="theme === 'luna-pink'" />
+                            </button>
+                            <span>Luna-Pink</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-rhea.png" alt="Rhea" @click="changeTheme($event, 'rhea', false)" target="_blank"/>
+                                <i class="pi pi-check" v-if="theme === 'rhea'" />
+                            </button>
+                            <span>Rhea</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="premium-themes">
+                    <h1>PREMIUM VUE-CLI TEMPLATES</h1>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    <div class="p-grid">
+                        <div class="p-col-12">
+                            <a href="https://www.primefaces.org/layouts/sapphire-vue">
+                                <img alt="Sapphire" src="./assets/images/layouts/sapphire.jpg">
+                            </a>
+                        </div>
+                        <div class="p-col-12">
+                            <a href="https://www.primefaces.org/layouts/babylon-vue">
+                                <img alt="Babylon" src="./assets/images/layouts/babylon.jpg">
+                            </a>
+                        </div>
+                        <div class="p-col-12">
+                            <a href="https://www.primefaces.org/layouts/avalon-vue">
+                                <img alt="Avalon" src="./assets/images/layouts/avalon.jpg">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: false,
+            theme: 'nova-light'
+        }
+    },
+    outsideClickListener: null,
+    watch: {
+        $route() {
+            if (this.active) {
+                this.active = false;
+                this.unbindOutsideClickListener();
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['layout-config', {'layout-config-active': this.active}];
+        }
+    },
+    methods: {
+        toggleConfigurator(event) {
+            this.active = !this.active;
+            event.preventDefault();
+
+            if (this.active)
+                this.bindOutsideClickListener();
+            else
+                this.unbindOutsideClickListener();
+        },
+        hideConfigurator(event) {
+            this.active = false;
+            this.unbindOutsideClickListener();
+            event.preventDefault();
+        },
+        changeTheme(event, theme, dark) {
+            let themeElement = document.getElementById('theme-link');
+            themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme));
+            this.theme = theme;
+            const hasBodyDarkTheme = this.hasClass(document.body, 'dark-theme');
+
+            if (dark) {
+                if (!hasBodyDarkTheme) {
+                    this.addClass(document.body, 'dark-theme');
+                }
+            }
+            else if(hasBodyDarkTheme) {
+                this.removeClass(document.body, 'dark-theme');
+            }
+
+            this.hideThemesMenu();
+            event.preventDefault();
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.active && this.isOutsideClicked(event)) {
+                        this.active = false;
+                    }
+                };
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        isOutsideClicked(event) {
+            return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target));
+        },
+    }
+}
+</script>

src/assets/styles/app.scss

@@ -40,6 +40,21 @@
     border-top-right-radius: $val;
 }
 
+@mixin border-radius-left($val) {
+    -moz-border-radius-topleft: $val;
+    -webkit-border-top-left-radius: $val;
+    border-top-left-radius: $val;
+    -moz-border-radius-bottomleft: $val;
+    -webkit-border-bottom-left-radius: $val;
+    border-bottom-left-radius: $val;
+}
+
+@mixin border-radius($val) {
+    -moz-border-radius: $val;
+    -webkit-border-radius: $val;
+    border-radius: $val;
+}
+
 @keyframes pulse {
     0% {
         background-color: rgba(165, 165, 165, 0.1)
@@ -52,6 +67,14 @@
     }
 }
 
+@mixin rotate($deg) {    
+    -webkit-transform: rotate($deg);
+    -moz-transform: rotate($deg);
+    -o-transform: rotate($deg);
+    -ms-transform: rotate($deg);
+    transform: rotate($deg);
+}
+
 $focusBorderColor:#8dcdff;
 
 body {
@@ -59,7 +82,7 @@ body {
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
-    background-color: #20272a;
+    background-color: #ffffff;
     font-family: "Open Sans", "Helvetica Neue", sans-serif;
     font-weight: normal;
     color: #484848;
@@ -114,7 +137,7 @@ body {
 
         &:focus {
             outline: 0 none;
-            transition: box-shadow .3s;
+            transition: box-shadow .2s;
             box-shadow: 0 0 0 0.2em $focusBorderColor;
         }
     }
@@ -150,7 +173,7 @@ body {
                 &:focus {
                     z-index: 1;
                     outline: 0 none;
-                    transition: box-shadow .3s;
+                    transition: box-shadow .2s;
                     box-shadow: inset 0 0 0 0.2em $focusBorderColor;
                 }
             }
@@ -345,7 +368,7 @@ body {
                 &:focus {
                     z-index: 1;
                     outline: 0 none;
-                    transition: box-shadow .3s;
+                    transition: box-shadow .2s;
                     box-shadow: inset 0 0 0 0.2em $focusBorderColor;
                 }
 
@@ -497,7 +520,7 @@ body {
 
                         &:focus {
                             outline: 0 none;
-                            transition: box-shadow .3s;
+                            transition: box-shadow .2s;
                             box-shadow: 0 0 0 0.2em $focusBorderColor;
                         }
                     }
@@ -594,7 +617,7 @@ body {
 
                             &:focus {
                                 outline: 0 none;
-                                transition: background-color .3s, box-shadow .3s;
+                                transition: background-color .2s, box-shadow .2s;
                                 box-shadow: 0 0 0 0.2em $focusBorderColor;
                             }
                         }
@@ -713,6 +736,199 @@ body {
     }
 }
 
+.layout-config {
+    position: fixed;
+    padding: 0;
+    top: 70px;
+    display: block;
+    right: 0;
+    width: 550px;
+    z-index: 996;
+    height: calc(100% - 70px);
+    transform: translate3d(550px, 0px, 0px);
+    @include transition(transform .2s);
+    background-color: #ffffff;
+    
+    &.layout-config-active {
+        transform: translate3d(0px, 0px, 0px);
+        
+        .layout-config-content {
+            .layout-config-button {
+                i {
+                    @include rotate(360deg);
+                }
+            }
+        }
+    }
+
+    .layout-config-content-wrapper {
+        position: relative;
+        height: 100%;
+        padding: 0;
+        @include shadow(0 2px 10px 0 rgba(0, 0, 0, 0.24));
+        
+        .layout-config-button {
+            display: block;
+            position: absolute;
+            width: 52px;
+            height: 52px;
+            line-height: 52px;
+            background-color: #445c71;
+            text-align: center;
+            color: #fafafa;
+            top: 230px;
+            left: -51px;
+            z-index: -1;
+            overflow: hidden;
+            cursor: pointer;
+            @include border-radius-left(3px);
+            @include transition(background-color .2s, box-shadow .2s);
+            box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
+                        0 5px 22px 4px rgba(0, 0, 0, 0.12), 
+                        0 12px 17px 2px rgba(0, 0, 0, 0.14);
+
+            i {
+                font-size: 42px;
+                line-height: inherit;
+                cursor: pointer;
+                @include rotate(0deg);
+                @include transition(transform 1s);
+            }
+
+            &:hover {
+                background-color: #577691;
+            }
+        }
+    }
+
+    .layout-config-content {
+        overflow: auto;
+        height: 100%;
+    }
+
+    .layout-config-close {
+        position: absolute;
+        width: 25px;
+        height: 25px;
+        line-height: 25px;
+        text-align: center;
+        right: 20px;
+        top: 20px;
+        z-index: 999;
+        background-color: #41b783;
+        @include border-radius(50%);
+        @include transition(background-color .2s, box-shadow .2s);
+
+        i {
+            color: #ffffff;
+            line-height: inherit;
+            font-size: 16px;
+        }
+
+        &:hover {
+            background-color: #3aa476;
+        }
+
+        &:focus {
+            outline: 0 none;
+            box-shadow: 0 0 0 0.2em $focusBorderColor;
+        }
+    }
+
+    h1 {
+        font-size: 18px;
+        letter-spacing: .1px;
+        margin: 0 0 .5em 0;
+    }
+
+    .p-grid > div {
+        padding: 1em;
+        text-align: center;
+
+        span {
+            display: block;
+        }
+    }
+
+    p {
+        margin: 0 0 2em 0;
+    }
+
+    .free-themes {
+        padding: 2em;
+        color: #484848;
+        background-color: #ffffff;
+
+        p {
+            color: #727272;
+        }
+    }
+
+    .current-theme {
+        box-shadow: 0 0 0 0.2em $focusBorderColor;
+    }
+
+    img {
+        width: 100%;
+    }
+
+    button {
+        text-align: center;
+        position: relative;
+        @include transition(box-shadow .2s);
+
+        i {
+            line-height: inherit;
+            font-size: 28px;
+            color: #41b783;
+            position: absolute;
+            top: 0;
+            left: 50%;
+            margin-left: -18px;
+            margin-top: -18px;
+            padding: .18em;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
+            background-color: #ffffff;
+            border-radius: 50%;
+            width: 36px;
+            height: 36px;
+        }
+
+        &:focus {
+            box-shadow: 0 0 0 0.2em $focusBorderColor;
+        }
+    }
+
+    .premium-themes {
+        padding: 2em;
+        background-color: #2c3135;
+        color: #ffffff;
+
+        p {
+            color: #d8d8d8;
+        }
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .layout-config {
+        top: 110px;
+        height: calc(100% - 110px);
+        transform: translate3d(100%, 0px, 0px);
+        
+        .layout-config-button {
+            left: auto;
+            right: -52px;
+        }
+
+        &.layout-config-active {
+            width: 100%;
+            transform: translate3d(0px, 0px, 0px);
+        }
+    }
+}
+
+
 .clearfix {
     display: inline-block;