Scroll false when change page

11 files changed, 33 insertions, 20 deletions

diff --git a/src/components/Header.js b/src/components/Header.js
index a1780b3c..0a4449be 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Link from "next/link";
+import Link from "./Link";
 import ShoppingCartIcon from "../icons/shopping-cart.svg";
 import SearchIcon from "../icons/search.svg";
 import MenuIcon from "../icons/menu.svg";
@@ -47,33 +47,33 @@ export default function Header({ title }) {
             <h1>Hi, {auth.name}</h1>
           ) : (
             <>
-              <Link href="/login" className="w-full py-2 btn-light">Masuk</Link>
-              <Link href="/register" className="w-full py-2 btn-yellow">Daftar</Link>
+              <Link href="/login" onClick={closeMenu} className="w-full py-2 btn-light">Masuk</Link>
+              <Link href="/register" onClick={closeMenu} className="w-full py-2 btn-yellow">Daftar</Link>
             </>
           )}
         </div>
         <div className="flex flex-col">
           {auth ? (
-            <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/shop/brands">
+            <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
                 <span>Profil Saya</span>
                 <div className="ml-auto">
                   <ChevronRightIcon className="stroke-gray-700" />
                 </div>
             </Link>
           ) : ''}
-          <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/shop/brands">
+          <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
               <span>Semua Brand</span>
               <div className="ml-auto">
                 <ChevronRightIcon className="stroke-gray-700" />
               </div>
           </Link>
-          <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/blog">
+          <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/blog" onClick={closeMenu}>
               <span>Blog Indoteknik</span>
               <div className="ml-auto">
                 <ChevronRightIcon className="stroke-gray-700" />
               </div>
           </Link>
-          <button className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3">
+          <button className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" onClick={closeMenu}>
               <span>Kategori</span>
               <div className="ml-auto">
                 <ChevronRightIcon className="stroke-gray-700" />
@@ -85,7 +85,7 @@ export default function Header({ title }) {
 
       <div className="sticky-header">
         <div className="flex justify-between items-center">
-          <Link href="/">
+          <Link href="/" scroll={false}>
             <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} />
           </Link>
           <div className="flex gap-4">
diff --git a/src/components/Link.js b/src/components/Link.js
new file mode 100644
index 00000000..d354bb1b
--- /dev/null
+++ b/src/components/Link.js
@@ -0,0 +1,9 @@
+import NextLink from "next/link";
+
+export default function Link({ children, ...pageProps }) {
+  return (
+    <NextLink {...pageProps} scroll={false}>
+      {children}
+    </NextLink>
+  )
+}
\ No newline at end of file
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 063a5f6b..2299d931 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link from "./Link";
 import currencyFormat from "../helpers/currencyFormat";
 import { createSlug } from "../helpers/slug";
 import { LazyLoadImage } from "react-lazy-load-image-component";
diff --git a/src/pages/404.js b/src/pages/404.js
index e22eadea..3eafbb08 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Link from "next/link";
+import Link from "../components/Link";
 import Header from "../components/Header";
 import Layout from "../components/Layout";
 import PageNotFoundImage from "../images/page-not-found.png";
diff --git a/src/pages/_app.js b/src/pages/_app.js
index a7a8e86e..23172bfd 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -19,7 +19,11 @@ function MyApp({ Component, pageProps }) {
         limit={1}
       />
       <NextProgress color="#D7A30A" options={{ showSpinner: false }} />
-      <AnimatePresence mode='wait' initial={false}>
+      <AnimatePresence 
+        mode='wait' 
+        initial={false} 
+        onExitComplete={() => window.scrollTo(0, 0)}
+      >
         <Component {...pageProps} key={router.asPath} />
       </AnimatePresence>
     </>
diff --git a/src/pages/activate.js b/src/pages/activate.js
index cb1385ba..6d534909 100644
--- a/src/pages/activate.js
+++ b/src/pages/activate.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import Head from "next/head";
 import Image from "next/image";
-import Link from "next/link";
+import Link from "../components/Link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Alert from "../components/Alert";
diff --git a/src/pages/login.js b/src/pages/login.js
index e0535cd2..cff2e0cd 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import Head from "next/head";
 import Image from "next/image";
-import Link from "next/link";
+import Link from "../components/Link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Alert from "../components/Alert";
diff --git a/src/pages/register.js b/src/pages/register.js
index 076710f9..ff6aa1d8 100644
--- a/src/pages/register.js
+++ b/src/pages/register.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import Head from "next/head";
 import Image from "next/image";
-import Link from "next/link";
+import Link from "../components/Link";
 import { useEffect, useState } from "react";
 import Alert from "../components/Alert";
 import Layout from "../components/Layout";
diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index 2dda69a1..8faf7ba3 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -2,7 +2,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
 import Header from "../../components/Header";
 import apiOdoo from "../../helpers/apiOdoo";
 import "react-lazy-load-image-component/src/effects/blur.css";
-import Link from "next/link";
+import Link from "../../components/Link";
 import { createSlug } from "../../helpers/slug";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useState } from "react";
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 352edb99..598330f4 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link from "../../../components/Link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Header from "../../../components/Header";
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 7a61d17a..e11dc73b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -47,15 +47,15 @@ html, body {
 
     .badge-red {
         @apply
-            bg-red-300
-            text-red-900
+            bg-red-200
+            text-red-700
         ;
     }
 
     .badge-gray {
         @apply
-            bg-gray-300
-            text-gray-900
+            bg-gray-200
+            text-gray-700
         ;
     }