src/core/components/elements/Navbar/Navbar.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import dynamic from 'next/dynamic'
import Image from 'next/image'
import IndoteknikLogo from '@/images/logo.png'
import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline'
import Link from '../Link/Link'
import useSidebar from '@/core/hooks/useSidebar'

const Search = dynamic(() => import('./Search'))

const Navbar = () => {
  const { Sidebar, open } = useSidebar()
  return (
    <>
      <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}
    </>
  )
}

export default Navbar