Showcase refactor

src/App.vue

@@ -18,9 +18,6 @@
             <router-view/>
             <app-footer />
         </div>
-        <div class="app-theme" v-tooltip.bottom="theme">
-            <img :src="'demo/images/themes/' + logoMap[theme]" />
-        </div>
         <Toast />
         <Toast position="topleft" group="tl" />
         <Toast position="bottomleft" group="bl" />
@@ -40,42 +37,7 @@ export default {
         return {
             sidebarActive: false,
             newsActive: false,
-            theme: 'saga-blue',
+            theme: 'saga-blue'
-            logoMap: {
-                'bootstrap4-light-blue': 'bootstrap4-light-blue.svg',
-                'bootstrap4-light-purple': 'bootstrap4-light-purple.svg',
-                'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg',
-                'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg',
-                'md-light-indigo': 'md-light-indigo.svg',
-                'md-light-deeppurple': 'md-light-deeppurple.svg',
-                'md-dark-indigo': 'md-dark-indigo.svg',
-                'md-dark-deeppurple': 'md-dark-deeppurple.svg',
-                'mdc-light-indigo': 'md-light-indigo.svg',
-                'mdc-light-deeppurple': 'md-light-deeppurple.svg',
-                'mdc-dark-indigo': 'md-dark-indigo.svg',
-                'mdc-dark-deeppurple': 'md-dark-deeppurple.svg',
-                'saga-blue': 'saga-blue.png',
-                'saga-green': 'saga-green.png',
-                'saga-orange': 'saga-orange.png',
-                'saga-purple': 'saga-purple.png',
-                'vela-blue': 'vela-blue.png',
-                'vela-green': 'vela-green.png',
-                'vela-orange': 'vela-orange.png',
-                'vela-purple': 'vela-purple.png',
-                'arya-blue': 'arya-blue.png',
-                'arya-green': 'arya-green.png',
-                'arya-orange': 'arya-orange.png',
-                'arya-purple': 'arya-purple.png',
-                'nova': 'nova.png',
-                'nova-alt': 'nova-alt.png',
-                'nova-accent': 'nova-accent.png',
-                'nova-vue': 'nova-vue.png',
-                'luna-blue': 'luna-blue.png',
-                'luna-green': 'luna-green.png',
-                'luna-pink': 'luna-pink.png',
-                'luna-amber': 'luna-amber.png',
-                'rhea': 'rhea.png'
-            }
         }
     },
 

src/AppTopBar.vue

@@ -6,6 +6,9 @@
         <router-link to="/" class="logo">
             <img alt="logo" src="./assets/images/primevue-logo.png">
         </router-link>
+        <div class="app-theme" v-tooltip.bottom="theme">
+            <img :src="'demo/images/themes/' + logoMap[theme]" />
+        </div>
         <ul ref="topbarMenu" class="topbar-menu">
             <li><router-link to="/setup">Get Started</router-link></li>
             <li class="topbar-submenu">
@@ -108,9 +111,47 @@ export default {
             this.activeMenuIndex = null;
         }
     },
+    props: {
+        theme: null
+    },
     data() {
         return {
-            activeMenuIndex: null
+            activeMenuIndex: null,
+            logoMap: {
+                'bootstrap4-light-blue': 'bootstrap4-light-blue.svg',
+                'bootstrap4-light-purple': 'bootstrap4-light-purple.svg',
+                'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg',
+                'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg',
+                'md-light-indigo': 'md-light-indigo.svg',
+                'md-light-deeppurple': 'md-light-deeppurple.svg',
+                'md-dark-indigo': 'md-dark-indigo.svg',
+                'md-dark-deeppurple': 'md-dark-deeppurple.svg',
+                'mdc-light-indigo': 'md-light-indigo.svg',
+                'mdc-light-deeppurple': 'md-light-deeppurple.svg',
+                'mdc-dark-indigo': 'md-dark-indigo.svg',
+                'mdc-dark-deeppurple': 'md-dark-deeppurple.svg',
+                'saga-blue': 'saga-blue.png',
+                'saga-green': 'saga-green.png',
+                'saga-orange': 'saga-orange.png',
+                'saga-purple': 'saga-purple.png',
+                'vela-blue': 'vela-blue.png',
+                'vela-green': 'vela-green.png',
+                'vela-orange': 'vela-orange.png',
+                'vela-purple': 'vela-purple.png',
+                'arya-blue': 'arya-blue.png',
+                'arya-green': 'arya-green.png',
+                'arya-orange': 'arya-orange.png',
+                'arya-purple': 'arya-purple.png',
+                'nova': 'nova.png',
+                'nova-alt': 'nova-alt.png',
+                'nova-accent': 'nova-accent.png',
+                'nova-vue': 'nova-vue.png',
+                'luna-blue': 'luna-blue.png',
+                'luna-green': 'luna-green.png',
+                'luna-pink': 'luna-pink.png',
+                'luna-amber': 'luna-amber.png',
+                'rhea': 'rhea.png'
+            }
         }
     },
     methods: {

src/assets/styles/app/_config.scss

@@ -1,12 +1,12 @@
 .layout-config {
     position: fixed;
     padding: 0;
-    top: 70px;
+    top: 0;
-    display: block;
     right: 0;
+    display: block;
     width: 550px;
-    z-index: 996;
+    z-index: 998;
-    height: calc(100% - 70px);
+    height: 100%;
     transition: transform .3s;
     transform: translate3d(550px,0,0);
     backface-visibility: hidden;
@@ -41,7 +41,7 @@
             background-color: var(--primary-color);
             text-align: center;
             color: var(--primary-color-text);
-            top: 200px;
+            top: 270px;
             left: -51px;
             z-index: -1;
             overflow: hidden;

src/assets/styles/app/_core.scss

@@ -53,7 +53,7 @@ a {
     width: 100%;
     height: 100%;
     position: fixed;
-    top: 70px;
+    top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.4);
     transition: background-color .5s;
@@ -204,21 +204,3 @@ p {
     line-height: 1.5;
     margin: 0 0 1rem 0;
 }
-
-.app-theme {
-    background-color: var(--primary-color);
-    color: var(--primary-color-text);
-    position: fixed;
-    left: 285px;
-    top: 15px;
-    padding: .5rem;
-    z-index: 997;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-    width: 39px;
-    height: 39px;
-
-    img {
-        width: 25px;
-    }
-}

src/assets/styles/app/_news.scss

@@ -1,4 +1,3 @@
-
 .layout-news {
     position: fixed;
     top: 0;
@@ -7,9 +6,7 @@
     height: 70px;
     width: 100%;
     display: flex;
-    -ms-flex-pack: center;
     justify-content: center;
-    -ms-flex-align: center;
     align-items: center;
     background-image: url("assets/images/topbar-easter-2020-bg.jpg");
 
@@ -61,7 +58,6 @@
         right: 28px;
         background-color: rgba(0,0,0,.3);
         border-radius: 50%;
-        display: -ms-flexbox;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -72,7 +68,7 @@
 
 .layout-wrapper.layout-news-active {
     .layout-topbar {
-        top: 70px
+        top: 70px;
     }
 
     .layout-sidebar {
@@ -80,11 +76,6 @@
         height: calc(100% - 140px);
     }
 
-    .layout-config {
-        top: 140px;
-        height: calc(100% - 140px);
-    }
-
     .layout-content {
         padding-top: 140px;
     }

src/assets/styles/app/_responsive.scss

@@ -1,19 +1,12 @@
 
 @media screen and (max-width: 960px) {
     .layout-wrapper.layout-news-active {
-        .layout-sidebar {
-            top: 140px;
-            height: calc(100% - 140px);
-        }
-        .layout-config {
-            top: 180px;
-            height: calc(100% - 180px);
-        }
         .layout-content {
             padding-top: 180px;
         }
-        .layout-mask {
+        .layout-sidebar {
-            top: 140px;
+            top: 0;
+            height: 100%;
         }
         .layout-news-container {
             background-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, #FFFFFF 100%);
@@ -24,24 +17,28 @@
     }
 
     .layout-topbar {
-        text-align: center;
         height: 111px;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        padding: 0;
 
         .menu-button {
             display: inline-block;
         }
 
         .logo {
-            margin: 7px 0 6px;
-
             img{
-                width: 180px;
+                width: 150px;
             }
         }
         
+        .app-theme {
+            margin-left: 0;
+            margin-right: 23px;
+        }
+
         .topbar-menu {
             background-color: var(--surface-a);
-            float: none;
             width: 100%;
             height: 41px;
             margin: 0;
@@ -63,16 +60,16 @@
 
                 &.topbar-submenu > ul {
                     top: 40px;
-                    text-align: left;
                 }
             }
         }
     }
 
     .layout-sidebar {
-        top: 70px;
+        top: 0;
         left: -300px;
         z-index: 999;
+        height: 100%;
         transition: left .3s;
 
         &.active {
@@ -85,10 +82,6 @@
         padding-top: 111px;
 
         .content-section {
-            &.submenu ul li {
-                width: 50%;
-            }
-
             &.introduction { 
                 flex-direction: column;
                 
@@ -123,8 +116,7 @@
     }
 
     .layout-config {
-        top: 110px;
+        height: 100%;
-        height: calc(100% - 110px);
         transform: translate3d(100%,0,0);
 
         .layout-config-button {
@@ -137,18 +129,13 @@
             transform: translate3d(0,0,0);
         }
     }
-
-    .app-theme {
-        right: 35px;
-        left: auto;
-    }
 }
 
 @media screen and (max-width: 640px) {
     .layout-wrapper.layout-news-active {
         .topbar-menu {
-            >li.topbar-submenu {
+            > li.topbar-submenu {
-                >ul  {
+                > ul  {
                     top: 180px;
                 }
             }

src/assets/styles/app/_topbar.scss

@@ -9,13 +9,13 @@
     z-index: 997;
     box-shadow: 0 0 4px rgba(0,0,0,0.25);
     border-bottom: 1px solid var(--surface-d);
+    display: flex;
+    align-items: center;
+    padding: 0 35px;
 
     .menu-button {
         display: none;
         color: var(--text-color);
-        position: absolute;
-        left: 0;
-        top: 0;
         width: 70px;
         height: 70px;
         line-height: 70px;
@@ -34,10 +34,6 @@
     }
 
     .logo {
-        margin-left: 35px;
-        margin-top: 8px;
-        display: inline-block;
-
         img {
             width: 180px;
         }
@@ -49,12 +45,27 @@
         }
     }
 
+    .app-theme {
+        background-color: var(--primary-color);
+        color: var(--primary-color-text);
+        padding: .5rem;
+        border-radius: 4px;
+        box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+        width: 39px;
+        height: 39px;
+        margin-left: 70px;
+    
+        img {
+            width: 25px;
+        }
+    }
+
     .topbar-menu {
         list-style-type: none;
-        float: right;
+        margin: 0;
-        margin: 0 60px 0 0;
         padding: 0;
         height: 100%;
+        margin-left: auto;
 
         > li {
             display: inline-block;