From 31d6352ab8855754ef18c01763d3c1b5a68de857 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Thu, 22 Dec 2022 15:29:18 +0700
Subject: Appbar component and auth hook (useAuth)

---
 src/components/AppBar.js | 36 ++++++++++++++++++++++++++++++++++++
 src/components/Header.js | 31 +++++++++++++------------------
 2 files changed, 49 insertions(+), 18 deletions(-)
 create mode 100644 src/components/AppBar.js

(limited to 'src/components')
diff --git a/src/components/AppBar.js b/src/components/AppBar.js
new file mode 100644
index 00000000..f22d630f
--- /dev/null
+++ b/src/components/AppBar.js
@@ -0,0 +1,36 @@
+import { HeartIcon, HomeIcon } from "@heroicons/react/24/outline";
+import { ChevronLeftIcon } from "@heroicons/react/24/solid";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import Link from "./Link";
+
+const AppBar = ({ title }) => {
+  const router = useRouter();
+
+  return (
+    <>
+      <Head>
+        <title>{ title } - Indoteknik</title>
+      </Head>
+      <div className="flex justify-between p-4 border-b border-gray_r-6">
+        {/* --- Start Title */}
+        <button type="button" onClick={() => router.back()} className="flex gap-x-2 text-gray_r-12">
+          <ChevronLeftIcon className="w-6 stroke-2"/>
+          <h1>{ title }</h1> 
+        </button>
+        {/* --- End Title */}
+
+        {/* --- Start Icons */}
+        <div className="flex gap-x-3">
+          <HeartIcon className="w-6 stroke-2"/>
+          <Link href="/">
+            <HomeIcon className="w-6 stroke-2 text-gray_r-12"/>
+          </Link>
+        </div>
+        {/* --- End Icons */}
+      </div>
+    </>
+  );
+};
+
+export default AppBar;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
index a294c140..d41847ef 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -11,7 +11,7 @@ import {
 } from "@heroicons/react/24/outline";
 
 // Helpers
-import { getAuth } from "../helpers/auth";
+import { getAuth, useAuth } from "../helpers/auth";
 // Components
 import Link from "./Link";
 // Images
@@ -24,11 +24,7 @@ export default function Header({ title }) {
   const [suggestions, setSuggestions] = useState([]);
   const searchQueryRef = useRef();
   const [isMenuActive, setIsMenuActive] = useState(false);
-  const [auth, setAuth] = useState();
-
-  useEffect(() => { 
-    if (!auth) setAuth(getAuth());
-  }, [auth]);
+  const [auth, setAuth] = useAuth();
 
   useEffect(() => {
     if (q) {
@@ -76,24 +72,23 @@ export default function Header({ title }) {
       
       <div className={'menu-wrapper' + (isMenuActive ? ' active ' : '')}>
         <div className="flex gap-x-2 items-center border-b border-gray_r-6 p-4">
-          {auth ? (
-            <h1>Hi, {auth.name}</h1>
-          ) : (
+          { auth && (
+            <Link href="/my/menu" className="w-full flex text-gray_r-12">
+              <h1>Hi, {auth.name}</h1>
+              <div className="ml-auto">
+                <ChevronRightIcon className="w-5" />
+              </div>
+            </Link>
+          ) }
+
+          { !auth && (
             <>
               <Link href="/login" onClick={closeMenu} className="w-full py-2 btn-light text-gray_r-12">Masuk</Link>
               <Link href="/register" onClick={closeMenu} className="w-full py-2 btn-yellow text-gray_r-12">Daftar</Link>
             </>
-          )}
+          ) }
         </div>
         <div className="flex flex-col">
-          {auth && (
-            <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/my/profile" onClick={closeMenu}>
-                <span>Profil Saya</span>
-                <div className="ml-auto">
-                  <ChevronRightIcon className="text-gray_r-12 w-5" />
-                </div>
-            </Link>
-          )}
           <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
               <span>Semua Brand</span>
               <div className="ml-auto">
-- 
cgit v1.2.3

