summaryrefslogtreecommitdiff
path: root/src/core/components/elements
diff options
context:
space:
mode:
Diffstat (limited to 'src/core/components/elements')
-rw-r--r--src/core/components/elements/Sidebar/Sidebar.jsx194
1 files changed, 98 insertions, 96 deletions
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index d9c2c533..ddae3e20 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -81,7 +81,7 @@ const Sidebar = ({ active, close }) => {
exit={{ left: '-80%' }}
transition={transition}
>
- <div className='divide-y divide-gray_r-6'>
+ <div className='divide-y divide-gray_r-6 h-full flex flex-col'>
<div className='p-4 flex gap-x-3'>
{!auth && (
<>
@@ -114,113 +114,115 @@ const Sidebar = ({ active, close }) => {
href='/my/menu'
className='!text-gray_r-11 ml-auto my-auto'
>
- <UserIcon class='h-6 w-6 text-gray-500' />
+ <UserIcon className='h-6 w-6 text-gray-500' />
</Link>
</>
)}
</div>
- <SidebarLink className={itemClassName} href='/shop/promo'>
- Semua Promo
- </SidebarLink>
- <SidebarLink className={itemClassName} href='/shop/brands'>
- Semua Brand
- </SidebarLink>
- <SidebarLink
- className={itemClassName}
- href='https://blog.indoteknik.com/'
- target='_blank'
- rel='noreferrer noopener'
- >
- Blog Indoteknik
- </SidebarLink>
- {/* <SidebarLink className={itemClassName} href='/video'>
- Indoteknik TV
- </SidebarLink> */}
- <SidebarLink className={itemClassName} href='/tentang-kami'>
- Tentang Indoteknik
- </SidebarLink>
- <SidebarLink className={itemClassName} href='/contact-us'>
- Hubungi Kami
- </SidebarLink>
- <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={createSlug('/shop/category/', category.name, category.id)}
- className='flex-1 font-normal !text-gray_r-11 py-4 flex items-center flex-row'
- >
- <div className='mr-2 flex justify-center items-center'>
- <Image src={category.image} alt='' width={25} height={25} />
+ <div className='overflow-y-auto flex-1'>
+ <SidebarLink className={itemClassName} href='/shop/promo'>
+ Semua Promo
+ </SidebarLink>
+ <SidebarLink className={itemClassName} href='/shop/brands'>
+ Semua Brand
+ </SidebarLink>
+ <SidebarLink
+ className={itemClassName}
+ href='https://blog.indoteknik.com/'
+ target='_blank'
+ rel='noreferrer noopener'
+ >
+ Blog Indoteknik
+ </SidebarLink>
+ {/* <SidebarLink className={itemClassName} href='/video'>
+ Indoteknik TV
+ </SidebarLink> */}
+ <SidebarLink className={itemClassName} href='/tentang-kami'>
+ Tentang Indoteknik
+ </SidebarLink>
+ <SidebarLink className={itemClassName} href='/contact-us'>
+ Hubungi Kami
+ </SidebarLink>
+ <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={createSlug('/shop/category/', category.name, category.id)}
+ className='flex-1 font-normal !text-gray_r-11 py-4 flex items-center flex-row'
+ >
+ <div className='mr-2 flex justify-center items-center'>
+ <Image src={category.image} alt='' width={25} height={25} />
+ </div>
+ {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>
- {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={createSlug('/shop/category/', child1Category.name, child1Category.id)}
- className='flex-1 font-normal !text-gray_r-11 flex flex-row items-center'
+ {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' : ''
+ }`}
>
- <div className='mr-2 flex justify-center items-center'>
- <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child1Category.id}`} alt='' width={25} height={25} />
- </div>
- {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={createSlug('/shop/category/', child2Category.name, child2Category.id)}
- className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16 flex-row'
+ href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
+ className='flex-1 font-normal !text-gray_r-11 flex flex-row items-center'
>
<div className='mr-2 flex justify-center items-center'>
- <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child2Category.id}`} alt='' width={25} height={25} />
+ <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child1Category.id}`} alt='' width={25} height={25} />
</div>
- {child2Category.name}
+ {child1Category.name}
</Link>
- ))}
- </Fragment>
- ))}
- </Fragment>
- ))}
+ {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={createSlug('/shop/category/', child2Category.name, child2Category.id)}
+ className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16 flex-row'
+ >
+ <div className='mr-2 flex justify-center items-center'>
+ <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child2Category.id}`} alt='' width={25} height={25} />
+ </div>
+ {child2Category.name}
+ </Link>
+ ))}
+ </Fragment>
+ ))}
+ </Fragment>
+ ))}
+ </div>
</div>
</motion.div>
</>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:19:19 +0000