From 212fda06b5b956e9908c6eb83864990dd589ca8e Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 4 Sep 2024 11:07:52 +0700
Subject: <iman> update mobile view category

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 23 +++++++++++++++++------
 src/lib/product/components/CategorySection.jsx   |  7 ++++---
 2 files changed, 21 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 55838890..d9c2c533 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()
@@ -155,9 +157,12 @@ const Sidebar = ({ active, close }) => {
                     <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'
+                          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
@@ -177,9 +182,12 @@ const Sidebar = ({ active, close }) => {
                               }`}
                             >
                               <Link
-                                href={`/shop/search?category=${child1Category.name}`}
-                                className='flex-1 font-normal !text-gray_r-11'
+                                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/${child1Category.id}`} alt='' width={25} height={25} />
+                                </div>
                                 {child1Category.name}
                               </Link>
                               {child1Category.childs.length > 0 && (
@@ -200,9 +208,12 @@ const Sidebar = ({ active, close }) => {
                               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/', 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>
                               ))}
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>
-- 
cgit v1.2.3