5 files changed, 54 insertions, 122 deletions
diff --git a/src/core/components/elements/NavBar/NavBar.jsx b/src/core/components/elements/NavBar/NavBar.jsx
deleted file mode 100644
index 212fd341..00000000
--- a/src/core/components/elements/NavBar/NavBar.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import Image from "next/image"
-import IndoteknikLogo from "@/images/logo.png"
-import { Bars3Icon, HeartIcon, ShoppingCartIcon } from "@heroicons/react/24/outline"
-import Link from "../Link/Link"
-import Search from "./Search"
-
-const NavBar = () => {
-  return (
-    <nav className="px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow">
-      <div className="flex justify-between items-center mb-2">
-        <Link href="/">
-          <Image src={IndoteknikLogo} alt="Indoteknik Logo" width={120} height={40} />
-        </Link>
-        <div className="flex gap-x-3">
-          <button type="button">
-            <HeartIcon className="w-6 text-gray_r-12" />
-          </button>
-          <Link href="/shop/cart">
-            <ShoppingCartIcon className="w-6 text-gray_r-12" />
-          </Link>
-          <button type="button">
-            <Bars3Icon className="w-6 text-gray_r-12" />
-          </button>
-        </div>
-      </div>
-      <Search />
-    </nav>
-  )
-}
-
-export default NavBar
-\ No newline at end of file
diff --git a/src/core/components/elements/NavBar/Search.jsx b/src/core/components/elements/NavBar/Search.jsx
deleted file mode 100644
index cca1a97c..00000000
--- a/src/core/components/elements/NavBar/Search.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import searchSuggestApi from "@/core/api/searchSuggestApi"
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"
-import { useCallback, useEffect, useRef, useState } from "react"
-import Link from "../Link/Link"
-import { useRouter } from "next/router"
-
-const Search = () => {
-  const router = useRouter()
-  const queryRef = useRef()
-  const [ query, setQuery ] = useState('')
-  const [ suggestions, setSuggestions ] = useState([])
-
-  useEffect(() => {
-    setQuery(router.query.q)
-  }, [router.query])
-  
-  const loadSuggestion = useCallback(() => {
-    if (query && document.activeElement == queryRef.current) {
-      (async () => {
-        const dataSuggestion = await searchSuggestApi({ query })
-        setSuggestions(dataSuggestion.data.suggestions)
-      })()
-      return
-    } else {
-      setSuggestions([])
-    }
-  }, [ query ])
-
-  useEffect(() => {
-    if (query && document.activeElement == queryRef.current) {
-      loadSuggestion()
-    } else {
-      setSuggestions([])
-    }
-  }, [ loadSuggestion, query ])
-
-  const handleSubmit = (e) => {
-    e.preventDefault()
-    if (query) {
-      router.push(`/shop/search?q=${query}`)
-    } else {
-      queryRef.current.focus()
-    }
-  }
-
-  const onInputBlur = () => {
-    setTimeout(() => {
-      setSuggestions([])
-    }, 100)
-  }
-
-  return (
-    <form 
-      onSubmit={handleSubmit} 
-      className="flex relative"
-    >
-      <input 
-        type="text" 
-        ref={queryRef}
-        className="form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6"
-        placeholder="Ketik nama, part number, merk"
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-        onBlur={onInputBlur}
-        onFocus={loadSuggestion}
-      />
-      <button 
-        type="submit" 
-        className="rounded-r border border-l-0 border-gray_r-6 px-2"
-      >
-        <MagnifyingGlassIcon className="w-6" />
-      </button>
-
-      { suggestions.length > 1 && (
-        <>
-          <div className="absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6">
-            {suggestions.map((suggestion, index) => (
-              <Link href={`/shop/search?q=${suggestion.term}`} key={index} className="px-3 py-3 !text-gray_r-12 font-normal">
-                {suggestion.term}
-              </Link>
-            ))}
-          </div>
-        </>
-      ) }
-    </form>
-  )
-}
-
-export default Search
-\ No newline at end of file
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
new file mode 100644
index 00000000..249ccbce
--- /dev/null
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -0,0 +1,30 @@
+import Link from "../Link/Link"
+
+const Sidebar = ({
+  active,
+  close
+}) => {
+  return (
+    <>
+      { active && <div className="overlay z-50" onClick={close}></div> }
+      <div className={`fixed z-[55] top-0 h-full w-[80%] transition-all ease-linear duration-50 bg-white ${active ? 'left-0' : '-left-[80%]'}`}>
+        <div className="divide-y divide-gray_r-6">
+          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
+            Semua Brand
+          </Link>
+          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
+            Tentang Indoteknik
+          </Link>
+          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
+            Pusat Bantuan
+          </Link>
+          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
+            Kategori
+          </Link>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Sidebar
+\ No newline at end of file
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 32c785e5..94c235fb 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -1,10 +1,10 @@
-import NavBar from "../elements/NavBar/NavBar"
+import Navbar from "../elements/Navbar/Navbar"
 import AnimationLayout from "./AnimationLayout"
 
 const BasicLayout = ({ children }) => {
   return (
     <>
-      <NavBar />
+      <Navbar />
       <AnimationLayout>
         { children }
       </AnimationLayout>
diff --git a/src/core/hooks/useSidebar.js b/src/core/hooks/useSidebar.js
new file mode 100644
index 00000000..9388734a
--- /dev/null
+++ b/src/core/hooks/useSidebar.js
@@ -0,0 +1,22 @@
+import useActive from "./useActive"
+import SidebarComponent from "../components/elements/Sidebar/Sidebar"
+import { useEffect } from "react"
+
+const useSidebar = () => {
+  const { active, activate, deactivate } = useActive()
+
+  useEffect(() => {
+    if (active) {
+      document.querySelector('html, body').classList.add('overflow-hidden')
+    } else {
+      document.querySelector('html, body').classList.remove('overflow-hidden')
+    }
+  }, [active])
+
+  return {
+    open: activate,
+    Sidebar: <SidebarComponent active={active} close={deactivate} />
+  }
+}
+
+export default useSidebar
+\ No newline at end of file