diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/core/components/elements/Sidebar/Sidebar.jsx | 116 |
1 files changed, 114 insertions, 2 deletions
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> </> |