Merged in update/mobile-view (pull request #294)

Update/mobile view

Approved-by: trisusilo

1 files changed, 103 insertions, 90 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>
           </>