From d0d2a927fa1b9ac0a0e571f6e6f1294445db66a4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sun, 19 Feb 2023 22:06:00 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 30 ++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/core/components/elements/Sidebar/Sidebar.jsx

(limited to 'src/core/components/elements/Sidebar')

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
-- 
cgit v1.2.3


From e33a330786ffbfcd774de00dc697c6dff47faf27 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 14:20:44 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 26 ++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 249ccbce..74984393 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -1,14 +1,40 @@
+import { getAuth } from "@/core/utils/auth"
 import Link from "../Link/Link"
+import greeting from "@/core/utils/greeting"
+import { Cog6ToothIcon } from "@heroicons/react/24/solid"
 
 const Sidebar = ({
   active,
   close
 }) => {
+  const auth = getAuth()
+  
   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">
+          <div className="p-4 flex gap-x-3">
+            { !auth && (
+              <>
+                <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
+                <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
+              </>
+            ) }
+            { auth && (
+              <>
+                <div className="text-caption-2 text-gray_r-11">
+                  {/* { greeting() }, */}
+                  <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
+                    { auth?.name }
+                  </span>
+                </div>
+                <Link href="/my/menu" className="!text-gray_r-11 ml-auto my-auto">
+                  <Cog6ToothIcon className="w-6" />
+                </Link>
+              </>
+            ) }
+          </div>
           <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
             Semua Brand
           </Link>
-- 
cgit v1.2.3


From ed950b23d50f9b3993cfd2ac2386a5b3a68d5e57 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 17:03:28 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 37 +++++++++++++++---------
 1 file changed, 24 insertions(+), 13 deletions(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 74984393..412ed915 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -1,13 +1,22 @@
-import { getAuth } from "@/core/utils/auth"
 import Link from "../Link/Link"
 import greeting from "@/core/utils/greeting"
 import { Cog6ToothIcon } from "@heroicons/react/24/solid"
+import useAuth from "@/core/hooks/useAuth"
 
 const Sidebar = ({
   active,
   close
 }) => {
-  const auth = getAuth()
+  const auth = useAuth()
+
+  const SidebarLink = ({ children, ...props }) => (
+    <Link 
+      {...props} 
+      onClick={close}
+    >{ children }</Link>
+  )
+
+  const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
   
   return (
     <>
@@ -24,29 +33,31 @@ const Sidebar = ({
             { auth && (
               <>
                 <div className="text-caption-2 text-gray_r-11">
-                  {/* { greeting() }, */}
+                  { greeting() },
                   <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
                     { auth?.name }
                   </span>
                 </div>
-                <Link href="/my/menu" className="!text-gray_r-11 ml-auto my-auto">
+                <Link 
+                  onClick={close} 
+                  href="/my/menu" 
+                  className="!text-gray_r-11 ml-auto my-auto"
+                >
                   <Cog6ToothIcon className="w-6" />
                 </Link>
               </>
             ) }
           </div>
-          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
+          <SidebarLink className={itemClassName} href="/">
             Semua Brand
-          </Link>
-          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
+          </SidebarLink>
+          <SidebarLink className={itemClassName} href="/">
             Tentang Indoteknik
-          </Link>
-          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
+          </SidebarLink>
+          <SidebarLink className={itemClassName} href="/">
             Pusat Bantuan
-          </Link>
-          <Link href="/" className="px-4 py-3 block !text-gray_r-12 font-normal">
-            Kategori
-          </Link>
+          </SidebarLink>
+          <button className={`${itemClassName} w-full text-left`}>Kategori</button>
         </div>
       </div>
     </>
-- 
cgit v1.2.3


From 4fd738fd54f81fa53c2b3e78b7a80fbfda250352 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 10:19:32 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 103 ++++++++++++++---------
 1 file changed, 62 insertions(+), 41 deletions(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 412ed915..122a10f3 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -2,6 +2,7 @@ import Link from "../Link/Link"
 import greeting from "@/core/utils/greeting"
 import { Cog6ToothIcon } from "@heroicons/react/24/solid"
 import useAuth from "@/core/hooks/useAuth"
+import { AnimatePresence, motion } from "framer-motion"
 
 const Sidebar = ({
   active,
@@ -17,49 +18,69 @@ const Sidebar = ({
   )
 
   const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
-  
+  const transition = { ease: 'linear', duration: 0.1 }
+
   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">
-          <div className="p-4 flex gap-x-3">
-            { !auth && (
-              <>
-                <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
-                <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
-              </>
-            ) }
-            { auth && (
-              <>
-                <div className="text-caption-2 text-gray_r-11">
-                  { greeting() },
-                  <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
-                    { auth?.name }
-                  </span>
-                </div>
-                <Link 
-                  onClick={close} 
-                  href="/my/menu" 
-                  className="!text-gray_r-11 ml-auto my-auto"
-                >
-                  <Cog6ToothIcon className="w-6" />
-                </Link>
-              </>
-            ) }
-          </div>
-          <SidebarLink className={itemClassName} href="/">
-            Semua Brand
-          </SidebarLink>
-          <SidebarLink className={itemClassName} href="/">
-            Tentang Indoteknik
-          </SidebarLink>
-          <SidebarLink className={itemClassName} href="/">
-            Pusat Bantuan
-          </SidebarLink>
-          <button className={`${itemClassName} w-full text-left`}>Kategori</button>
-        </div>
-      </div>
+    <AnimatePresence>
+      { active && (
+        <>
+          <motion.div
+            className="overlay z-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={transition}
+            onClick={close}
+          />
+          <motion.div
+            className="fixed z-[55] top-0 h-full w-[80%] bg-white"
+            initial={{ left: '-80%' }}
+            animate={{ left: 0 }}
+            exit={{ left: '-80%' }}
+            transition={transition}
+          >
+            <div className="divide-y divide-gray_r-6">
+              <div className="p-4 flex gap-x-3">
+                { !auth && (
+                  <>
+                    <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
+                    <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
+                  </>
+                ) }
+                { auth && (
+                  <>
+                    <div className="text-caption-2 text-gray_r-11">
+                      { greeting() },
+                      <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
+                        { auth?.name }
+                      </span>
+                    </div>
+                    <Link 
+                      onClick={close} 
+                      href="/my/menu" 
+                      className="!text-gray_r-11 ml-auto my-auto"
+                    >
+                      <Cog6ToothIcon className="w-6" />
+                    </Link>
+                  </>
+                ) }
+              </div>
+              <SidebarLink className={itemClassName} href="/">
+                Semua Brand
+              </SidebarLink>
+              <SidebarLink className={itemClassName} href="/">
+                Tentang Indoteknik
+              </SidebarLink>
+              <SidebarLink className={itemClassName} href="/">
+                Pusat Bantuan
+              </SidebarLink>
+              <button className={`${itemClassName} w-full text-left`}>Kategori</button>
+            </div>
+          </motion.div>
+        </>
+      ) }
+    </AnimatePresence>
     </>
   )
 }
-- 
cgit v1.2.3


From 488f323e4441b75244785cb66b018f1179b262de Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 10:31:23 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 116 +++++++++++------------
 1 file changed, 58 insertions(+), 58 deletions(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 122a10f3..e81d6130 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -22,65 +22,65 @@ const Sidebar = ({
 
   return (
     <>
-    <AnimatePresence>
-      { active && (
-        <>
-          <motion.div
-            className="overlay z-50"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={transition}
-            onClick={close}
-          />
-          <motion.div
-            className="fixed z-[55] top-0 h-full w-[80%] bg-white"
-            initial={{ left: '-80%' }}
-            animate={{ left: 0 }}
-            exit={{ left: '-80%' }}
-            transition={transition}
-          >
-            <div className="divide-y divide-gray_r-6">
-              <div className="p-4 flex gap-x-3">
-                { !auth && (
-                  <>
-                    <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
-                    <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
-                  </>
-                ) }
-                { auth && (
-                  <>
-                    <div className="text-caption-2 text-gray_r-11">
-                      { greeting() },
-                      <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
-                        { auth?.name }
-                      </span>
-                    </div>
-                    <Link 
-                      onClick={close} 
-                      href="/my/menu" 
-                      className="!text-gray_r-11 ml-auto my-auto"
-                    >
-                      <Cog6ToothIcon className="w-6" />
-                    </Link>
-                  </>
-                ) }
+      <AnimatePresence>
+        { active && (
+          <>
+            <motion.div
+              className="overlay z-50"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={transition}
+              onClick={close}
+            />
+            <motion.div
+              className="fixed z-[55] top-0 h-full w-[80%] bg-white"
+              initial={{ left: '-80%' }}
+              animate={{ left: 0 }}
+              exit={{ left: '-80%' }}
+              transition={transition}
+            >
+              <div className="divide-y divide-gray_r-6">
+                <div className="p-4 flex gap-x-3">
+                  { !auth && (
+                    <>
+                      <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
+                      <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
+                    </>
+                  ) }
+                  { auth && (
+                    <>
+                      <div className="text-caption-2 text-gray_r-11">
+                        { greeting() },
+                        <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
+                          { auth?.name }
+                        </span>
+                      </div>
+                      <Link 
+                        onClick={close} 
+                        href="/my/menu" 
+                        className="!text-gray_r-11 ml-auto my-auto"
+                      >
+                        <Cog6ToothIcon className="w-6" />
+                      </Link>
+                    </>
+                  ) }
+                </div>
+                <SidebarLink className={itemClassName} href="/">
+                  Semua Brand
+                </SidebarLink>
+                <SidebarLink className={itemClassName} href="/">
+                  Tentang Indoteknik
+                </SidebarLink>
+                <SidebarLink className={itemClassName} href="/">
+                  Pusat Bantuan
+                </SidebarLink>
+                <button className={`${itemClassName} w-full text-left`}>Kategori</button>
               </div>
-              <SidebarLink className={itemClassName} href="/">
-                Semua Brand
-              </SidebarLink>
-              <SidebarLink className={itemClassName} href="/">
-                Tentang Indoteknik
-              </SidebarLink>
-              <SidebarLink className={itemClassName} href="/">
-                Pusat Bantuan
-              </SidebarLink>
-              <button className={`${itemClassName} w-full text-left`}>Kategori</button>
-            </div>
-          </motion.div>
-        </>
-      ) }
-    </AnimatePresence>
+            </motion.div>
+          </>
+        ) }
+      </AnimatePresence>
     </>
   )
 }
-- 
cgit v1.2.3


From fa45f8bc91adef3bacd3460ef4e3b1151ee13e71 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 10:32:09 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index e81d6130..88de1c1c 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -18,7 +18,7 @@ const Sidebar = ({
   )
 
   const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
-  const transition = { ease: 'linear', duration: 0.1 }
+  const transition = { ease: 'linear', duration: 0.2 }
 
   return (
     <>
-- 
cgit v1.2.3


From 5933732a74ae1ca4124ddd4e8265b1f443234736 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 21:51:51 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 88de1c1c..c840a688 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -44,8 +44,8 @@ const Sidebar = ({
                 <div className="p-4 flex gap-x-3">
                   { !auth && (
                     <>
-                      <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
-                      <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
+                      <Link onClick={close} href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
+                      <Link onClick={close} href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
                     </>
                   ) }
                   { auth && (
-- 
cgit v1.2.3


From 036e72780ddb7a510795b329919ff9dd957af6d7 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 22:38:25 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index c840a688..48ceacf6 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -1,8 +1,8 @@
 import Link from "../Link/Link"
 import greeting from "@/core/utils/greeting"
-import { Cog6ToothIcon } from "@heroicons/react/24/solid"
 import useAuth from "@/core/hooks/useAuth"
 import { AnimatePresence, motion } from "framer-motion"
+import { CogIcon } from "@heroicons/react/24/outline"
 
 const Sidebar = ({
   active,
@@ -61,7 +61,7 @@ const Sidebar = ({
                         href="/my/menu" 
                         className="!text-gray_r-11 ml-auto my-auto"
                       >
-                        <Cog6ToothIcon className="w-6" />
+                        <CogIcon className="w-6" />
                       </Link>
                     </>
                   ) }
-- 
cgit v1.2.3


From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 11:03:34 +0700
Subject: prettier

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 84 +++++++++++++-----------
 1 file changed, 46 insertions(+), 38 deletions(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 48ceacf6..08f1fed5 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -1,20 +1,16 @@
-import Link from "../Link/Link"
-import greeting from "@/core/utils/greeting"
-import useAuth from "@/core/hooks/useAuth"
-import { AnimatePresence, motion } from "framer-motion"
-import { CogIcon } from "@heroicons/react/24/outline"
+import Link from '../Link/Link'
+import greeting from '@/core/utils/greeting'
+import useAuth from '@/core/hooks/useAuth'
+import { AnimatePresence, motion } from 'framer-motion'
+import { CogIcon } from '@heroicons/react/24/outline'
 
-const Sidebar = ({
-  active,
-  close
-}) => {
+const Sidebar = ({ active, close }) => {
   const auth = useAuth()
 
   const SidebarLink = ({ children, ...props }) => (
-    <Link 
-      {...props} 
-      onClick={close}
-    >{ children }</Link>
+    <Link {...props} onClick={close}>
+      {children}
+    </Link>
   )
 
   const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
@@ -23,10 +19,10 @@ const Sidebar = ({
   return (
     <>
       <AnimatePresence>
-        { active && (
+        {active && (
           <>
             <motion.div
-              className="overlay z-50"
+              className='overlay z-50'
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
@@ -34,55 +30,67 @@ const Sidebar = ({
               onClick={close}
             />
             <motion.div
-              className="fixed z-[55] top-0 h-full w-[80%] bg-white"
+              className='fixed z-[55] top-0 h-full w-[80%] bg-white'
               initial={{ left: '-80%' }}
               animate={{ left: 0 }}
               exit={{ left: '-80%' }}
               transition={transition}
             >
-              <div className="divide-y divide-gray_r-6">
-                <div className="p-4 flex gap-x-3">
-                  { !auth && (
+              <div className='divide-y divide-gray_r-6'>
+                <div className='p-4 flex gap-x-3'>
+                  {!auth && (
                     <>
-                      <Link onClick={close} href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
-                      <Link onClick={close} href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
+                      <Link
+                        onClick={close}
+                        href='/register'
+                        className='btn-yellow !text-gray_r-12 py-2 flex-1'
+                      >
+                        Daftar
+                      </Link>
+                      <Link
+                        onClick={close}
+                        href='/login'
+                        className='btn-solid-red !text-gray_r-1 py-2 flex-1'
+                      >
+                        Masuk
+                      </Link>
                     </>
-                  ) }
-                  { auth && (
+                  )}
+                  {auth && (
                     <>
-                      <div className="text-caption-2 text-gray_r-11">
-                        { greeting() },
-                        <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
-                          { auth?.name }
+                      <div className='text-caption-2 text-gray_r-11'>
+                        {greeting()},
+                        <span className='text-body-2 text-gray_r-12 block mt-1 font-medium'>
+                          {auth?.name}
                         </span>
                       </div>
-                      <Link 
-                        onClick={close} 
-                        href="/my/menu" 
-                        className="!text-gray_r-11 ml-auto my-auto"
+                      <Link
+                        onClick={close}
+                        href='/my/menu'
+                        className='!text-gray_r-11 ml-auto my-auto'
                       >
-                        <CogIcon className="w-6" />
+                        <CogIcon className='w-6' />
                       </Link>
                     </>
-                  ) }
+                  )}
                 </div>
-                <SidebarLink className={itemClassName} href="/">
+                <SidebarLink className={itemClassName} href='/'>
                   Semua Brand
                 </SidebarLink>
-                <SidebarLink className={itemClassName} href="/">
+                <SidebarLink className={itemClassName} href='/'>
                   Tentang Indoteknik
                 </SidebarLink>
-                <SidebarLink className={itemClassName} href="/">
+                <SidebarLink className={itemClassName} href='/'>
                   Pusat Bantuan
                 </SidebarLink>
                 <button className={`${itemClassName} w-full text-left`}>Kategori</button>
               </div>
             </motion.div>
           </>
-        ) }
+        )}
       </AnimatePresence>
     </>
   )
 }
 
-export default Sidebar
\ No newline at end of file
+export default Sidebar
-- 
cgit v1.2.3


From ac3fdf7be9982e65d8f83a20bc487f8dd62e3bfc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:36:47 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 08f1fed5..cdeb3e05 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -8,7 +8,10 @@ const Sidebar = ({ active, close }) => {
   const auth = useAuth()
 
   const SidebarLink = ({ children, ...props }) => (
-    <Link {...props} onClick={close}>
+    <Link
+      {...props}
+      onClick={close}
+    >
       {children}
     </Link>
   )
@@ -74,13 +77,22 @@ const Sidebar = ({ active, close }) => {
                     </>
                   )}
                 </div>
-                <SidebarLink className={itemClassName} href='/'>
+                <SidebarLink
+                  className={itemClassName}
+                  href='/'
+                >
                   Semua Brand
                 </SidebarLink>
-                <SidebarLink className={itemClassName} href='/'>
+                <SidebarLink
+                  className={itemClassName}
+                  href='/'
+                >
                   Tentang Indoteknik
                 </SidebarLink>
-                <SidebarLink className={itemClassName} href='/'>
+                <SidebarLink
+                  className={itemClassName}
+                  href='/'
+                >
                   Pusat Bantuan
                 </SidebarLink>
                 <button className={`${itemClassName} w-full text-left`}>Kategori</button>
-- 
cgit v1.2.3


From 2dd5b10049ff62656f160a9aa5b6627cd7ccbefc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 23 Feb 2023 15:29:35 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index cdeb3e05..22fda06b 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -79,7 +79,7 @@ const Sidebar = ({ active, close }) => {
                 </div>
                 <SidebarLink
                   className={itemClassName}
-                  href='/'
+                  href='/shop/brands'
                 >
                   Semua Brand
                 </SidebarLink>
-- 
cgit v1.2.3


From c6b0402fb0ba7d56b1e060d36e98d934661d43d4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 24 Feb 2023 08:54:32 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 116 ++++++++++++++++++++++-
 1 file changed, 114 insertions(+), 2 deletions(-)

(limited to 'src/core/components/elements/Sidebar')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 22fda06b..c39b5e34 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -2,7 +2,9 @@ import Link from '../Link/Link'
 import greeting from '@/core/utils/greeting'
 import useAuth from '@/core/hooks/useAuth'
 import { AnimatePresence, motion } from 'framer-motion'
-import { CogIcon } from '@heroicons/react/24/outline'
+import { ChevronDownIcon, ChevronUpIcon, CogIcon } from '@heroicons/react/24/outline'
+import { Fragment, useEffect, useState } from 'react'
+import odooApi from '@/core/api/odooApi'
 
 const Sidebar = ({ active, close }) => {
   const auth = useAuth()
@@ -19,6 +21,47 @@ const Sidebar = ({ active, close }) => {
   const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
   const transition = { ease: 'linear', duration: 0.2 }
 
+  const [isOpenCategory, setOpenCategory] = useState(false)
+  const [categories, setCategories] = useState([])
+
+  useEffect(() => {
+    const loadCategories = async () => {
+      if (isOpenCategory && categories.length == 0) {
+        let dataCategories = await odooApi('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 (
     <>
       <AnimatePresence>
@@ -95,7 +138,76 @@ const Sidebar = ({ active, close }) => {
                 >
                   Pusat Bantuan
                 </SidebarLink>
-                <button className={`${itemClassName} w-full text-left`}>Kategori</button>
+                <button
+                  className={`${itemClassName} w-full text-left flex`}
+                  onClick={() => setOpenCategory(!isOpenCategory)}
+                >
+                  Kategori
+                  <div className='ml-auto'>
+                    {!isOpenCategory && <ChevronDownIcon className='text-gray_r-12 w-5' />}
+                    {isOpenCategory && <ChevronUpIcon className='text-gray_r-12 w-5' />}
+                  </div>
+                </button>
+                {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 items-center'>
+                        <Link
+                          href={`/shop/search?category=${category.name}`}
+                          className='flex-1 font-normal !text-gray_r-11 py-4'
+                        >
+                          {category.name}
+                        </Link>
+                        <div
+                          className='ml-4 h-full py-4'
+                          onClick={() => toggleCategories(category.id)}
+                        >
+                          {!category.isOpen && <ChevronDownIcon className='text-gray_r-11 w-5' />}
+                          {category.isOpen && <ChevronUpIcon className='text-gray_r-11 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 ${
+                                category.isOpen ? 'bg-gray_r-2' : ''
+                              }`}
+                            >
+                              <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-4 h-full'
+                                  onClick={() => toggleCategories(child1Category.id)}
+                                >
+                                  {!child1Category.isOpen && (
+                                    <ChevronDownIcon className='text-gray_r-11 w-5' />
+                                  )}
+                                  {child1Category.isOpen && (
+                                    <ChevronUpIcon className='text-gray_r-11 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>
             </motion.div>
           </>
-- 
cgit v1.2.3