summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/core/components/elements/Sidebar/Sidebar.jsx193
-rw-r--r--src/lib/product/components/CategorySection.jsx7
2 files changed, 107 insertions, 93 deletions
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 55838890..ddae3e20 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -5,6 +5,8 @@ import { AnimatePresence, motion } from 'framer-motion'
import { ChevronDownIcon, ChevronUpIcon, CogIcon, UserIcon } from '@heroicons/react/24/outline'
import { Fragment, useEffect, useState } from 'react'
import odooApi from '@/core/api/odooApi'
+import { createSlug } from '@/core/utils/slug'
+import Image from 'next/image'
const Sidebar = ({ active, close }) => {
const auth = useAuth()
@@ -79,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 && (
<>
@@ -112,104 +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={`/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 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>
</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'
+ {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' : ''
+ }`}
>
- {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'
+ href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
+ className='flex-1 font-normal !text-gray_r-11 flex flex-row items-center'
>
- {child2Category.name}
+ <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>
- ))}
- </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>
</>
diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx
index e8ebb095..a287fa78 100644
--- a/src/lib/product/components/CategorySection.jsx
+++ b/src/lib/product/components/CategorySection.jsx
@@ -63,7 +63,7 @@ const CategorySection = ({ categories }) => {
{isMobile && (
<div className="py-4">
<Swiper slidesPerView={2.3} spaceBetween={10}>
- {displayedCategories.map((category) => (
+ {categories.map((category) => (
<SwiperSlide key={category?.id}>
<Link href={createSlug('/shop/category/', category?.name, category?.id)} passHref>
<div className="group transition-colors duration-300">
@@ -74,6 +74,7 @@ const CategorySection = ({ categories }) => {
width={56}
height={48}
alt={category?.name}
+ className="p-3"
/>
<h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start">
{category?.name}
@@ -85,7 +86,7 @@ const CategorySection = ({ categories }) => {
</SwiperSlide>
))}
</Swiper>
- {categories.length > 10 && (
+ {/* {categories.length > 10 && (
<div className="w-full flex justify-end mt-4">
<button
onClick={handleToggleCategories}
@@ -94,7 +95,7 @@ const CategorySection = ({ categories }) => {
{isOpenCategory ? 'Sembunyikan Semua' : 'Lihat Semua'}
</button>
</div>
- )}
+ )} */}
</div>
)}
</section>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:20:10 +0000