From 384e9e93ac5d46c3e437692b7805589b66b789ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Tue, 27 Dec 2022 11:12:25 +0300
Subject: [PATCH] Index page scroll problem fixed

---
 middleware/route.global.js |  9 +++++++++
 pages/Intro.vue            | 29 +++++++++++++++++++++++++++++
 pages/index.vue            | 25 ++++---------------------
 plugins/scrollToTop.js     |  9 ---------
 4 files changed, 42 insertions(+), 30 deletions(-)
 create mode 100644 middleware/route.global.js
 create mode 100644 pages/Intro.vue
 delete mode 100644 plugins/scrollToTop.js

diff --git a/middleware/route.global.js b/middleware/route.global.js
new file mode 100644
index 000000000..d3a517024
--- /dev/null
+++ b/middleware/route.global.js
@@ -0,0 +1,9 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+    useNuxtApp().hook('page:finish', () => {
+        if (history.state.scroll) {
+            setTimeout(() => window.scrollTo(history.state.scroll), 0);
+        } else {
+            setTimeout(() => window.scrollTo(0, 0), 0);
+        }
+    });
+});
diff --git a/pages/Intro.vue b/pages/Intro.vue
new file mode 100644
index 000000000..034a78695
--- /dev/null
+++ b/pages/Intro.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="landing-intro">
+        <AppNews v-if="$appState.newsActive" />
+        <HeaderSection @theme-toggle="onThemeToggle" />
+        <HeroSection />
+    </div>
+</template>
+
+<script>
+import AppNews from '@/layouts/AppNews';
+import HeaderSection from './landing/HeaderSection';
+import HeroSection from './landing/HeroSection';
+export default {
+    methods: {
+        onThemeToggle() {
+            const newTheme = this.$appState.darkTheme ? 'lara-light-blue' : 'lara-dark-blue';
+            const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
+
+            EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
+            this.replaceTableTheme(newTableTheme);
+        }
+    },
+    components: {
+        HeaderSection,
+        HeroSection,
+        AppNews
+    }
+};
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 2c2a6d9e8..4120a5d05 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,6 @@
 <template>
     <div :class="landingClass">
-        <div class="landing-intro">
-            <AppNews v-if="$appState.newsActive" />
-            <HeaderSection @theme-toggle="onThemeToggle" />
-            <HeroSection />
-        </div>
+        <Intro></Intro>
         <ComponentSection />
         <ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
         <BlockSection />
@@ -17,19 +13,15 @@
 </template>
 
 <script>
-import EventBus from '@/layouts/AppEventBus';
-import AppNews from '@/layouts/AppNews';
+import { defineAsyncComponent } from 'vue';
 import BlockSection from './landing/BlockSection';
 import ComponentSection from './landing/ComponentSection';
 import DesignerSection from './landing/DesignerSection';
 import FeaturesSection from './landing/FeaturesSection';
 import FooterSection from './landing/FooterSection';
-import HeaderSection from './landing/HeaderSection';
-import HeroSection from './landing/HeroSection';
 import TemplateSection from './landing/TemplateSection';
 import ThemeSection from './landing/ThemeSection';
 import UsersSection from './landing/UsersSection';
-
 export default {
     props: {
         theme: {
@@ -57,13 +49,6 @@ export default {
         this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-blue' : 'lara-light-blue');
     },
     methods: {
-        onThemeToggle() {
-            const newTheme = this.$appState.darkTheme ? 'lara-light-blue' : 'lara-dark-blue';
-            const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
-
-            EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
-            this.replaceTableTheme(newTableTheme);
-        },
         onTableThemeChange(value) {
             this.replaceTableTheme(value);
         },
@@ -96,8 +81,7 @@ export default {
         }
     },
     components: {
-        HeaderSection,
-        HeroSection,
+        Intro: defineAsyncComponent(() => import('./Intro.vue')),
         ComponentSection,
         ThemeSection,
         BlockSection,
@@ -105,8 +89,7 @@ export default {
         TemplateSection,
         UsersSection,
         FeaturesSection,
-        FooterSection,
-        AppNews
+        FooterSection
     }
 };
 </script>
diff --git a/plugins/scrollToTop.js b/plugins/scrollToTop.js
deleted file mode 100644
index c69fdce68..000000000
--- a/plugins/scrollToTop.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.$router.options.scrollBehavior = () => {
-        return new Promise((resolve) => {
-            setTimeout(() => {
-                resolve({ left: 0, top: 0, behaviour: 'smooth' });
-            }, 100);
-        });
-    };
-});