From 1ef538546c0bdd9351baaed90b837f399584b460 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 13 Mar 2023 16:20:18 +0700
Subject: category, brand, product popular, product category in desktop home
 page

---
 src/core/components/elements/Navbar/Navbar.jsx     | 192 +--------------------
 .../components/elements/Navbar/NavbarDesktop.jsx   | 170 ++++++++++++++++++
 .../components/elements/Navbar/NavbarMobile.jsx    |  48 ++++++
 3 files changed, 222 insertions(+), 188 deletions(-)
 create mode 100644 src/core/components/elements/Navbar/NavbarDesktop.jsx
 create mode 100644 src/core/components/elements/Navbar/NavbarMobile.jsx

(limited to 'src/core/components/elements')

diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index 1c559faf..57904498 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -1,197 +1,13 @@
 import dynamic from 'next/dynamic'
-import Image from 'next/image'
-import IndoteknikLogo from '@/images/logo.png'
-import {
-  Bars3Icon,
-  ChevronDownIcon,
-  DocumentCheckIcon,
-  HeartIcon,
-  ShoppingCartIcon
-} from '@heroicons/react/24/outline'
-import Link from '../Link/Link'
-import useSidebar from '@/core/hooks/useSidebar'
-import MobileView from '../../views/MobileView'
-import DesktopView from '../../views/DesktopView'
 
-const Search = dynamic(() => import('./Search'))
+const NavbarDesktop = dynamic(() => import('./NavbarDesktop'))
+const NavbarMobile = dynamic(() => import('./NavbarMobile'))
 
 const Navbar = () => {
-  const { Sidebar, open } = useSidebar()
   return (
     <>
-      <MobileView>
-        <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
-          <div className='flex justify-between items-center mb-2'>
-            <Link href='/'>
-              <Image
-                src={IndoteknikLogo}
-                alt='Indoteknik Logo'
-                width={120}
-                height={40}
-              />
-            </Link>
-            <div className='flex gap-x-3'>
-              <Link href='/my/wishlist'>
-                <HeartIcon className='w-6 text-gray_r-12' />
-              </Link>
-              <Link href='/shop/cart'>
-                <ShoppingCartIcon className='w-6 text-gray_r-12' />
-              </Link>
-              <button
-                type='button'
-                onClick={open}
-              >
-                <Bars3Icon className='w-6 text-gray_r-12' />
-              </button>
-            </div>
-          </div>
-          <Search />
-        </nav>
-        {Sidebar}
-      </MobileView>
-
-      <DesktopView>
-        <div className='py-3 bg-yellow_r-10/60'>
-          <div className='container mx-auto flex justify-between'>
-            <Link
-              href='/'
-              className='!text-gray_r-12'
-            >
-              Tentang Indoteknik.com
-            </Link>
-            <div className='flex gap-x-6'>
-              <Link
-                href='/'
-                className='!text-gray_r-12'
-              >
-                Pembayaran Tempo
-              </Link>
-              <Link
-                href='/'
-                className='!text-gray_r-12'
-              >
-                F.A.Q
-              </Link>
-              <Link
-                href='/'
-                className='!text-gray_r-12'
-              >
-                Fitur Layanan
-              </Link>
-            </div>
-          </div>
-        </div>
-
-        <nav className='py-6 sticky top-0 z-50 bg-white border-b border-gray_r-6'>
-          <div className='container mx-auto flex gap-x-6'>
-            <Link href='/'>
-              <Image
-                src={IndoteknikLogo}
-                alt='Indoteknik Logo'
-                width={180}
-                height={60}
-              />
-            </Link>
-            <Search />
-            <div className='flex gap-x-4'>
-              <Link
-                href='/my/transactions'
-                className='flex items-center gap-x-2 !text-gray_r-12/80'
-              >
-                <DocumentCheckIcon className='w-7' />
-                Pending
-                <br />
-                Quotation
-              </Link>
-              <Link
-                href='/shop/cart'
-                className='flex items-center gap-x-2 !text-gray_r-12/80'
-              >
-                <ShoppingCartIcon className='w-7' />
-                Keranjang
-                <br />
-                Belanja
-              </Link>
-              <Link
-                href='/my/wishlist'
-                className='flex items-center gap-x-2 !text-gray_r-12/80'
-              >
-                <HeartIcon className='w-7' />
-                Wishlist
-              </Link>
-              <a
-                href='https://wa.me/628'
-                className='flex items-center gap-x-1 !text-gray_r-12/80'
-              >
-                <Image
-                  src='/images/socials/Whatsapp-2.png'
-                  alt='Whatsapp'
-                  width={48}
-                  height={48}
-                />
-                <div>
-                  <div className='font-semibold'>Order Via WA</div>
-                  0812 8080 622 (Chat)
-                </div>
-              </a>
-            </div>
-          </div>
-        </nav>
-
-        <div className='container mx-auto mt-6'>
-          <div className='flex bg-gray_r-2'>
-            <div className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center'>
-              <div>Kategori Produk</div>
-              <button
-                type='button'
-                className='ml-auto pl-3'
-              >
-                <ChevronDownIcon className='w-6' />
-              </button>
-            </div>
-            <div className='w-6/12 flex gap-x-1 px-1 bg-gray_r-1'>
-              <Link
-                href='/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
-              >
-                Promo Produk
-              </Link>
-              <Link
-                href='/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
-              >
-                Semua Brand
-              </Link>
-              <Link
-                href='/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
-              >
-                Ready Stock
-              </Link>
-              <Link
-                href='/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
-              >
-                Blog Indoteknik
-              </Link>
-            </div>
-            <div className='w-3/12 flex gap-x-1'>
-              <Link
-                href='/login'
-                className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none'
-              >
-                Masuk
-              </Link>
-              <Link
-                href='/register'
-                className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none rounded-tr-xl'
-              >
-                Daftar
-              </Link>
-            </div>
-          </div>
-        </div>
-      </DesktopView>
+      <NavbarMobile />
+      <NavbarDesktop />
     </>
   )
 }
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
new file mode 100644
index 00000000..2f7a6e23
--- /dev/null
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -0,0 +1,170 @@
+import {
+  ChevronDownIcon,
+  HeartIcon,
+  ShoppingCartIcon,
+  DocumentCheckIcon
+} from '@heroicons/react/24/outline'
+import Link from '../Link/Link'
+import Image from 'next/image'
+import DesktopView from '../../views/DesktopView'
+import dynamic from 'next/dynamic'
+import IndoteknikLogo from '@/images/logo.png'
+import Category from '@/lib/category/components/Category'
+import { useState } from 'react'
+
+const Search = dynamic(() => import('./Search'))
+
+const NavbarDesktop = () => {
+  const [isOpenCategory, setIsOpenCategory] = useState(false)
+
+  return (
+    <DesktopView>
+      <div className='py-3 bg-yellow_r-10/60'>
+        <div className='container mx-auto flex justify-between'>
+          <Link
+            href='/'
+            className='!text-gray_r-12'
+          >
+            Tentang Indoteknik.com
+          </Link>
+          <div className='flex gap-x-6'>
+            <Link
+              href='/'
+              className='!text-gray_r-12'
+            >
+              Pembayaran Tempo
+            </Link>
+            <Link
+              href='/'
+              className='!text-gray_r-12'
+            >
+              F.A.Q
+            </Link>
+            <Link
+              href='/'
+              className='!text-gray_r-12'
+            >
+              Fitur Layanan
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <nav className='py-6 sticky top-0 z-50 bg-white border-b border-gray_r-6'>
+        <div className='container mx-auto flex gap-x-6'>
+          <Link href='/'>
+            <Image
+              src={IndoteknikLogo}
+              alt='Indoteknik Logo'
+              width={180}
+              height={60}
+            />
+          </Link>
+          <Search />
+          <div className='flex gap-x-4'>
+            <Link
+              href='/my/transactions'
+              className='flex items-center gap-x-2 !text-gray_r-12/80'
+            >
+              <DocumentCheckIcon className='w-7' />
+              Pending
+              <br />
+              Quotation
+            </Link>
+            <Link
+              href='/shop/cart'
+              className='flex items-center gap-x-2 !text-gray_r-12/80'
+            >
+              <ShoppingCartIcon className='w-7' />
+              Keranjang
+              <br />
+              Belanja
+            </Link>
+            <Link
+              href='/my/wishlist'
+              className='flex items-center gap-x-2 !text-gray_r-12/80'
+            >
+              <HeartIcon className='w-7' />
+              Wishlist
+            </Link>
+            <a
+              href='https://wa.me/628'
+              className='flex items-center gap-x-1 !text-gray_r-12/80'
+            >
+              <Image
+                src='/images/socials/Whatsapp-2.png'
+                alt='Whatsapp'
+                width={48}
+                height={48}
+              />
+              <div>
+                <div className='font-semibold'>Order Via WA</div>
+                0812 8080 622 (Chat)
+              </div>
+            </a>
+          </div>
+        </div>
+      </nav>
+
+      <div className='container mx-auto mt-6'>
+        <div className='flex bg-gray_r-2'>
+          <div className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center relative'>
+            <div>Kategori Produk</div>
+            <button
+              type='button'
+              className='ml-auto pl-3'
+              onClick={() => setIsOpenCategory((category) => !category)}
+            >
+              <ChevronDownIcon className={`w-6 ${isOpenCategory ? 'rotate-180' : ''}`} />
+            </button>
+            <div className={`category-mega-box-wrapper ${isOpenCategory ? 'show' : ''}`}>
+              <Category />
+            </div>
+          </div>
+          <div className='w-6/12 flex gap-x-1 px-1 bg-gray_r-1'>
+            <Link
+              href='/'
+              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
+            >
+              Promo Produk
+            </Link>
+            <Link
+              href='/'
+              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
+            >
+              Semua Brand
+            </Link>
+            <Link
+              href='/'
+              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
+            >
+              Ready Stock
+            </Link>
+            <Link
+              href='/'
+              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
+            >
+              Blog Indoteknik
+            </Link>
+          </div>
+          <div className='w-3/12 flex gap-x-1'>
+            <Link
+              href='/login'
+              className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none'
+            >
+              Masuk
+            </Link>
+            <Link
+              href='/register'
+              className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none rounded-tr-xl'
+            >
+              Daftar
+            </Link>
+          </div>
+        </div>
+      </div>
+    </DesktopView>
+  )
+}
+
+export default NavbarDesktop
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
new file mode 100644
index 00000000..3998875b
--- /dev/null
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -0,0 +1,48 @@
+import Image from 'next/image'
+import MobileView from '../../views/MobileView'
+import Link from '../Link/Link'
+import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline'
+import useSidebar from '@/core/hooks/useSidebar'
+import dynamic from 'next/dynamic'
+import IndoteknikLogo from '@/images/logo.png'
+
+const Search = dynamic(() => import('./Search'))
+
+const NavbarMobile = () => {
+  const { Sidebar, open } = useSidebar()
+
+  return (
+    <MobileView>
+      <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
+        <div className='flex justify-between items-center mb-2'>
+          <Link href='/'>
+            <Image
+              src={IndoteknikLogo}
+              alt='Indoteknik Logo'
+              width={120}
+              height={40}
+            />
+          </Link>
+          <div className='flex gap-x-3'>
+            <Link href='/my/wishlist'>
+              <HeartIcon className='w-6 text-gray_r-12' />
+            </Link>
+            <Link href='/shop/cart'>
+              <ShoppingCartIcon className='w-6 text-gray_r-12' />
+            </Link>
+            <button
+              type='button'
+              onClick={open}
+            >
+              <Bars3Icon className='w-6 text-gray_r-12' />
+            </button>
+          </div>
+        </div>
+        <Search />
+      </nav>
+      {Sidebar}
+    </MobileView>
+  )
+}
+
+export default NavbarMobile
-- 
cgit v1.2.3