1 files changed, 86 insertions, 3 deletions
diff --git a/src/components/layouts/Header.js b/src/components/layouts/Header.js
index 4741905f..bc740810 100644
--- a/src/components/layouts/Header.js
+++ b/src/components/layouts/Header.js
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import axios from "axios";
@@ -9,7 +9,9 @@ import {
   ShoppingCartIcon,
   ChevronRightIcon,
   Cog6ToothIcon,
-  HeartIcon
+  HeartIcon,
+  ChevronDownIcon,
+  ChevronUpIcon
 } from "@heroicons/react/24/outline";
 
 // Helpers
@@ -19,11 +21,11 @@ import Link from "../elements/Link";
 // Images
 import Logo from "@/images/logo.png";
 import greeting from "@/core/utils/greeting";
+import apiOdoo from "@/core/utils/apiOdoo";
 
 const menus = [
   { name: 'Semua Brand', href: '/shop/brands' },
   { name: 'Blog Indoteknik', href: '/' },
-  { name: 'Kategori', href: '/' },
 ];
 
 export default function Header({ title }) {
@@ -71,6 +73,47 @@ export default function Header({ title }) {
     }
   }
 
+  const [ isOpenCategory, setOpenCategory ] = useState(false);
+  const [ categories, setCategories ] = useState([]);
+
+  useEffect(() => {
+    const loadCategories = async () => {
+      if (isOpenCategory && categories.length == 0) {
+        let dataCategories = await apiOdoo('GET', '/api/v1/category/tree');
+        dataCategories = dataCategories.map((category) => {
+          category.childs = category.childs.map((child1Category) => {
+            return {
+              ...child1Category,
+              isOpen: false
+            }
+          })
+          return {
+            ...category,
+            isOpen: false
+          }
+        });
+        setCategories(dataCategories);
+      }
+    }
+    loadCategories();
+  }, [ isOpenCategory, categories ]);
+  
+  const toggleCategories = (id = 0) => {
+    let newCategories = categories.map((category) => {
+      category.childs = category.childs.map((child1Category) => {
+        return {
+          ...child1Category,
+          isOpen: id == child1Category.id ? !child1Category.isOpen : child1Category.isOpen
+        }
+      })
+      return {
+        ...category,
+        isOpen: id == category.id ? !category.isOpen : category.isOpen
+      }
+    });
+    setCategories(newCategories);
+  }
+
   return (
     <>
       <Head>
@@ -108,6 +151,46 @@ export default function Header({ title }) {
                 </div>
             </Link>
           )) }
+          <div className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4" onClick={() => setOpenCategory(!isOpenCategory)}>
+              <span>Kategori</span>
+              <div className="ml-auto">
+                { !isOpenCategory && <ChevronDownIcon className="text-gray_r-12 w-5" /> }
+                { isOpenCategory && <ChevronUpIcon className="text-gray_r-12 w-5" /> }
+              </div>
+          </div>
+          { isOpenCategory && categories.map((category) => (
+            <Fragment key={category.id}>
+              <div className="flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8">
+                <Link href={`/shop/search?category=${category.name}`} className="flex-1 font-normal text-gray_r-11 py-4">
+                  { category.name }
+                </Link>
+                <div className="ml-3 h-full py-4" onClick={() => toggleCategories(category.id)}>
+                  { !category.isOpen && <ChevronDownIcon className="text-gray_r-12 w-5" /> }
+                  { category.isOpen && <ChevronUpIcon className="text-gray_r-12 w-5" /> }
+                </div>
+              </div>
+              { category.isOpen && category.childs.map((child1Category) => (
+                <Fragment key={child1Category.id}>
+                  <div className="flex w-full text-gray_r-11 border-b border-gray_r-6 p-4 pl-12">
+                    <Link href={`/shop/search?category=${child1Category.name}`} className="flex-1 font-normal text-gray_r-11">
+                      { child1Category.name }
+                    </Link>
+                    { child1Category.childs.length > 0 && (
+                      <div className="ml-3 h-full" onClick={() => toggleCategories(child1Category.id)}>
+                        { !child1Category.isOpen && <ChevronDownIcon className="text-gray_r-12 w-5" /> }
+                        { child1Category.isOpen && <ChevronUpIcon className="text-gray_r-12 w-5" /> }
+                      </div>
+                    ) }
+                  </div>
+                  { child1Category.isOpen && child1Category.childs.map((child2Category) => (
+                    <Link key={child2Category.id} href={`/shop/search?category=${child2Category.name}`} className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 pl-16">
+                      { child2Category.name }
+                    </Link>
+                  )) }
+                </Fragment>
+              )) }
+            </Fragment>
+          )) }
         </div>
       </div>
       <div className={isMenuActive ? 'menu-overlay block opacity-100' : 'menu-overlay hidden opacity-0'} onClick={closeMenu}></div>