summaryrefslogtreecommitdiff
path: root/src/core/components/elements/Navbar
diff options
context:
space:
mode:
Diffstat (limited to 'src/core/components/elements/Navbar')
-rw-r--r--src/core/components/elements/Navbar/Navbar.jsx192
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx170
-rw-r--r--src/core/components/elements/Navbar/NavbarMobile.jsx48
3 files changed, 222 insertions, 188 deletions
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:07:02 +0000