1 files changed, 30 insertions, 12 deletions

diff --git a/components/navbar.js b/components/navbar.js
index 2bb2f92..e148b09 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -2,12 +2,16 @@ import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { useSession, signIn, signOut } from "next-auth/react";
 import Image from "next/image";
+import { parseCookies } from "nookies";
 
 function Navbar(props) {
   const { data: session, status } = useSession();
   const [isVisible, setIsVisible] = useState(false);
   const [fade, setFade] = useState(false);
 
+  const [lang, setLang] = useState("en");
+  const [cookie, setCookies] = useState(null);
+
   const handleShowClick = () => {
     setIsVisible(true);
     setFade(true);
@@ -18,13 +22,27 @@ function Navbar(props) {
     setFade(false);
   };
 
+  useEffect(() => {
+    let lang = null;
+    if (!cookie) {
+      const cookie = parseCookies();
+      lang = cookie.lang || null;
+      setCookies(cookie);
+    }
+    if (lang === "en" || lang === null) {
+      setLang("en");
+    } else if (lang === "id") {
+      setLang("id");
+    }
+  }, []);
+
   // console.log(session.user?.image);
 
   return (
     <header className={`${props.className}`}>
       <div className="flex h-16 w-auto items-center justify-between px-5 lg:mx-auto lg:w-[80%] lg:px-0 text-[#dbdcdd]">
         <div className="pb-2 font-outfit text-4xl font-semibold lg:block text-white">
-          <Link href="/">moopa</Link>
+          <Link href={`/${lang}/`}>moopa</Link>
         </div>
 
         {/* Mobile Hamburger */}
@@ -57,7 +75,7 @@ function Navbar(props) {
         >
           {isVisible && session && (
             <Link
-              href={`/profile/${session?.user?.name}`}
+              href={`/${lang}/profile/${session?.user?.name}`}
               className="fixed lg:hidden bottom-[100px] w-[60px] h-[60px] flex items-center justify-center right-[20px] rounded-full z-50 bg-[#17171f]"
             >
               <Image
@@ -73,7 +91,7 @@ function Navbar(props) {
             <div className="fixed bottom-[30px] right-[20px] z-50 flex h-[51px] w-[300px] items-center justify-center gap-8 rounded-[8px] text-[11px] bg-[#17171f] shadow-lg lg:hidden">
               <div className="grid grid-cols-4 place-items-center gap-6">
                 <button className="group flex flex-col items-center">
-                  <Link href="/" className="">
+                  <Link href={`/${lang}/`} className="">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
@@ -90,14 +108,14 @@ function Navbar(props) {
                     </svg>
                   </Link>
                   <Link
-                    href="/"
+                    href={`/${lang}/`}
                     className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
                   >
                     home
                   </Link>
                 </button>
                 <button className="group flex flex-col items-center">
-                  <Link href="/about">
+                  <Link href={`/${lang}/about`}>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
@@ -114,7 +132,7 @@ function Navbar(props) {
                     </svg>
                   </Link>
                   <Link
-                    href="/about"
+                    href={`/${lang}/about`}
                     className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
                   >
                     about
@@ -122,7 +140,7 @@ function Navbar(props) {
                 </button>
                 <button className="group flex gap-[1.5px] flex-col items-center ">
                   <div>
-                    <Link href="/search/anime">
+                    <Link href={`/${lang}/search/anime`}>
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
@@ -140,7 +158,7 @@ function Navbar(props) {
                     </Link>
                   </div>
                   <Link
-                    href="/search/anime"
+                    href={`/${lang}/search/anime`}
                     className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
                   >
                     search
@@ -219,7 +237,7 @@ function Navbar(props) {
           <ul className="hidden gap-10 font-roboto text-md lg:flex items-center relative">
             <li>
               <Link
-                href="/"
+                href={`/${lang}/`}
                 className="p-2 transition-all duration-100 hover:text-orange-600"
               >
                 home
@@ -227,7 +245,7 @@ function Navbar(props) {
             </li>
             <li>
               <Link
-                href="/about"
+                href={`/${lang}/about`}
                 className="p-2 transition-all duration-100 hover:text-orange-600"
               >
                 about
@@ -235,7 +253,7 @@ function Navbar(props) {
             </li>
             <li>
               <Link
-                href="/search/anime"
+                href={`/${lang}/search/anime`}
                 className="p-2 transition-all duration-100 hover:text-orange-600"
               >
                 search
@@ -268,7 +286,7 @@ function Navbar(props) {
                     </button>
                     <div className="absolute z-50 w-28 text-center -bottom-20 text-white shadow-2xl opacity-0 bg-secondary p-1 py-2 rounded-md font-karla font-light invisible group-hover:visible group-hover:opacity-100 duration-300 transition-all grid place-items-center gap-1">
                       <Link
-                        href={`/profile/${session?.user.name}`}
+                        href={`/${lang}/profile/${session?.user.name}`}
                         className="hover:text-action"
                       >
                         Profile