From d19b40f2972cc74105cfb8390a3b0fe3a4695b3a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Thu, 17 Nov 2022 17:30:03 +0700
Subject: Login process to Odoo Api

---
 src/components/Header.js | 42 +++++++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 11 deletions(-)

(limited to 'src/components/Header.js')

diff --git a/src/components/Header.js b/src/components/Header.js
index fb0e56a1..3e9d7ea0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from "react";
 import Head from "next/head";
 import Logo from "../images/logo.png";
 import { useRouter } from "next/router";
+import { getAuth } from "../helpers/auth";
 
 
 export default function Header({ title }) {
@@ -16,6 +17,11 @@ export default function Header({ title }) {
   const [searchQuery, setSearchQuery] = useState(q);
   const searchQueryRef = useRef();
   const [isMenuActive, setIsMenuActive] = useState(false);
+  const [auth, setAuth] = useState();
+
+  useEffect(() => { 
+    if (!auth) setAuth(getAuth()) 
+  }, [auth]);
 
   useEffect(() => {
     if (q) searchQueryRef.current.blur();
@@ -35,25 +41,39 @@ export default function Header({ title }) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <title>{title}</title>
       </Head>
-      <div className={isMenuActive ? 'menu-wrapper active' : 'menu-wrapper'}>
-        <div className="flex gap-x-2 items-center">
-          <Link href="/login" className="w-full py-2 btn-light">Masuk</Link>
-          <Link href="/register" className="w-full py-2 btn-yellow">Daftar</Link>
+      <div className={'menu-wrapper' + (isMenuActive ? ' active ' : '')}>
+        <div className="flex gap-x-2 items-center border-b border-gray-500 p-4">
+          {auth ? (
+            <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>
+            </>
+          )}
         </div>
-        <div className="flex flex-col gap-y-4 mt-5">
-          <Link className="flex w-full font-normal text-gray-800" href="/shop/brands">
-              <span>Brand</span>
+        <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">
+                <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">
+              <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" href="/blog">
-              <span>Blog</span>
+          <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/blog">
+              <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" id="open_category_parent_menu">
+          <button className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3">
               <span>Kategori</span>
               <div className="ml-auto">
                 <ChevronRightIcon className="stroke-gray-700" />
@@ -66,7 +86,7 @@ export default function Header({ title }) {
       <div className="sticky-header">
         <div className="flex justify-between items-center">
           <Link href="/">
-            <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} className="w-auto" />
+            <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} />
           </Link>
           <div className="flex gap-4">
             <Link href="/shop/cart">
-- 
cgit v1.2.3