Merge pull request #2199 from tugcekucukoglu/landing-theme

fix routing and app header

src/App.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script>
+import EventBus from '@/AppEventBus';
 import DomHandler from '@/components/utils/DomHandler';
 import AppTopBar from '@/AppTopBar.vue';
 import AppMenu from '@/AppMenu.vue';
@@ -37,14 +38,9 @@ import AppFooter from '@/AppFooter.vue';
 import AppConfigurator from '@/AppConfigurator.vue';
 
 export default {
-    props: {
-        theme: {
-            type: String,
-            default: "lara-light-indigo"
-        }
-    },
     data() {
         return {
+            theme: this.$appState.darkTheme ? 'lara-dark-indigo' : 'lara-light-indigo',
             sidebarActive: false,
             newsActive: false
         }
@@ -53,8 +49,6 @@ export default {
         if (this.isOutdatedIE()) {
             this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'});
         }
-
-        this.newsActive = this.newsActive && sessionStorage.getItem('primevue-news-hidden') == null;
     },
     watch: {
         $route: {
@@ -94,9 +88,30 @@ export default {
             event.stopPropagation();
         },
         changeTheme(event) {
-            this.$emit('change-theme', event);
+            let themeLink = document.getElementById('theme-link');
+            let hrefThemeLink = 'themes/' + event.theme + '/theme.css';
 
             this.activeMenuIndex = null;
+
+            EventBus.emit('change-theme', { theme: event.theme, dark: event.dark });
+            
+            this.theme = event.theme;
+            this.$appState.darkTheme = event.dark;
+            this.replaceLink(themeLink, hrefThemeLink);
+        },
+        replaceLink(linkElement, href) {
+            const id = linkElement.getAttribute('id');
+            const cloneLinkElement = linkElement.cloneNode(true);
+
+            cloneLinkElement.setAttribute('href', href);
+            cloneLinkElement.setAttribute('id', id + '-clone');
+
+            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+            cloneLinkElement.addEventListener('load', () => {
+                linkElement.remove();
+                cloneLinkElement.setAttribute('id', id);
+            });
         },
         addClass(element, className) {
             if (!this.hasClass(element, className)) {

src/AppTopBar.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="layout-topbar">
+    <div :ref="containerRef" class="layout-topbar">
         <a class="menu-button" @click="$emit('menubutton-click')">
             <i class="pi pi-bars"></i>
         </a>
         <router-link to="/" class="logo">
             <img alt="logo" src="./assets/images/primevue-logo.png">
-        </router-link>
+        </router-link>{{theme}}
         <div class="app-theme" v-tooltip.bottom="theme">
             <img :src="'demo/images/themes/' + logoMap[theme]" />
         </div>
@@ -185,15 +185,25 @@ export default {
                 'tailwind-light': 'tailwind-light.png',
                 'lara-dark-indigo': 'lara-dark-indigo.png',
                 'lara-dark-purple': 'lara-dark-purple.png',
+                'lara-dark-teal': 'lara-dark-teal.png',
+                'lara-dark-blue': 'lara-dark-blue.png',
                 'lara-light-indigo': 'lara-light-indigo.png',
                 'lara-light-purple': 'lara-light-purple.png',
-                'lara-dark-teal': 'lara-dark-indigo.png',
-                'lara-dark-blue': 'lara-dark-blue.png',
                 'lara-light-teal': 'lara-light-teal.png',
                 'lara-light-blue': 'lara-light-blue.png'
             }
         }
     },
+    scrollListener: null,
+    container: null,
+    mounted() {console.log(this.theme)
+        this.bindScrollListener();
+    },
+    beforeUnmount() {
+        if (this.scrollListener) {
+            this.unbindScrollListener();
+        }
+    },
     methods: {
         changeTheme(event, theme, dark) {
             this.$emit('change-theme', {theme: theme, dark: dark});
@@ -207,6 +217,25 @@ export default {
         onMenuEnter() {
             this.bindOutsideClickListener();
         },
+        bindScrollListener() {
+            if (!this.scrollListener) {
+                if (this.container) {
+                    this.scrollListener = () => {
+                        if (window.scrollY > 0)
+                            this.container.classList.add('layout-topbar-sticky');
+                        else
+                            this.container.classList.remove('layout-topbar-sticky');
+                    }
+                }
+            }
+            window.addEventListener('scroll', this.scrollListener);
+        },
+        unbindScrollListener() {
+            if (this.scrollListener) {
+                window.removeEventListener('scroll', this.scrollListener);
+                this.scrollListener = null;
+            }
+        },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
@@ -226,7 +255,10 @@ export default {
         },
         isOutsideTopbarMenuClicked(event) {
             return !(this.$refs.topbarMenu.isSameNode(event.target) || this.$refs.topbarMenu.contains(event.target));
-        }
+        },
+        containerRef(el) {
+            this.container = el;
+        },
     }
 }
 </script>

src/AppWrapper.vue

@@ -2,55 +2,4 @@
     <div>
         <router-view></router-view>
     </div>
-</template>
+</template>
-
-<script>
-import EventBus from '@/AppEventBus';
-
-export default {
-    data() {
-        return {
-            theme: 'lara-light-indigo'
-        }
-    },
-    methods: {
-        changeTheme(event) {
-            let themeLink = document.getElementById('theme-link');
-            let href = 'themes/' + event.theme + '/theme.css';
-            this.theme = event.theme;
-
-            this.replaceLink(themeLink, href);
-
-            this.activeMenuIndex = null;
-
-            EventBus.emit('change-theme', event);
-            this.$appState.darkTheme = event.dark;
-
-            if (event.theme.startsWith('md')) {
-                this.$primevue.config.ripple = true;
-            }
-        },
-        replaceLink(linkElement, href) {
-            const id = linkElement.getAttribute('id');
-            const cloneLinkElement = linkElement.cloneNode(true);
-
-            cloneLinkElement.setAttribute('href', href);
-            cloneLinkElement.setAttribute('id', id + '-clone');
-
-            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
-
-            cloneLinkElement.addEventListener('load', () => {
-                linkElement.remove();
-                cloneLinkElement.setAttribute('id', id);
-            });
-        },
-    }/*,
-    components: {
-        'App': App,
-        'Home': Home
-    }*/
-}
-</script>
-
-<style scoped>
-</style>

src/Home.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import EventBus from '@/AppEventBus';
 import HeaderSection from './views/landing/HeaderSection';
 import HeroSection from './views/landing/HeroSection';
 import ComponentSection from './views/landing/ComponentSection';
@@ -55,16 +56,21 @@ export default {
             this.tableTheme =  this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
             this.changeTheme(theme);
 
-            this.$emit('change-theme', { theme, dark: !this.$appState.darkTheme });
+            EventBus.emit('change-theme', { theme, dark: !this.$appState.darkTheme });
+            this.$appState.darkTheme = !this.$appState.darkTheme;
         },
         onThemeChange(theme) {
             this.changeTheme(theme);
         },
         changeTheme(theme) {
-            let themeLink = document.getElementById('home-link');
+            let themeLink = document.getElementById('theme-link');
-            let href = 'styles/landing/themes/' + theme + '/theme.css';
+            let hrefThemeLink = 'themes/' + theme + '/theme.css';
 
-            this.replaceLink(themeLink, href);
+            let homeLink = document.getElementById('home-link');
+            let hrefHomeLink = 'styles/landing/themes/' + theme + '/theme.css';
+
+            this.replaceLink(themeLink, hrefThemeLink);
+            this.replaceLink(homeLink, hrefHomeLink);
         },
         replaceLink(linkElement, href) {
             const id = linkElement.getAttribute('id');

src/assets/styles/app/_topbar.scss

@@ -8,6 +8,10 @@
     z-index: 1100;
     display: flex;
     align-items: center;
+    
+    &.layout-topbar-sticky {
+        backdrop-filter: blur(12px);
+    }
 
     .logo {
         display: none;
@@ -176,4 +180,20 @@
             background: linear-gradient(to bottom, #141d26, #5a6067);
         }
     }
+}
+
+.layout-wrapper-dark {
+    .layout-topbar {
+        &.layout-topbar-sticky {
+            background-color: rgba(0, 0, 0 , 0.3);
+        }
+    }
+}
+
+.layout-wrapper-light {
+    .layout-topbar {
+        &.layout-topbar-sticky {
+            background-color: rgba(255, 255, 255, 0.85);
+        }
+    }
 }

src/router/index.js

@@ -11,7 +11,8 @@ const routes = [
     },
     {
         path: '/',
-        component: () => App,
+        name: 'App',
+        component: App,
         children: [
         {
             path: '/setup',

src/views/landing/HeaderSection.vue

@@ -52,13 +52,13 @@
 <script>
 export default {
     emits: ['change-theme'],
-    scrollListener: null,
-    container: null,
     data() {
         return {
             menuActive: false
         }
     },
+    scrollListener: null,
+    container: null,
     mounted() {
         this.bindScrollListener();
     },