From a3d42d386bb4e270c84cbc66a8ab139b8e915a45 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 6 Mar 2023 16:58:14 +0700
Subject: create desktop header

---
 src/core/components/elements/Navbar/Navbar.jsx | 171 +++++++++++++++++++++----
 1 file changed, 146 insertions(+), 25 deletions(-)

(limited to 'src/core/components/elements/Navbar/Navbar.jsx')

diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index 8cecee5b..0198ea5e 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -1,9 +1,17 @@
 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 {
+  Bars3Icon,
+  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'
+import DocumentTimeIcon from '@/icons/document_time.svg'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -11,34 +19,147 @@ 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' />
+      <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>
-            <Link href='/shop/cart'>
-              <ShoppingCartIcon className='w-6 text-gray_r-12' />
-            </Link>
-            <button
-              type='button'
-              onClick={open}
+            <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'>
+          <div className='container mx-auto flex justify-between'>
+            <Link
+              href='/'
+              className='!text-gray_r-12'
             >
-              <Bars3Icon className='w-6 text-gray_r-12' />
-            </button>
+              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 shadow'>
+          <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 my-6'>
+          <div className='flex bg-gray_r-4 rounded-t-xl'>
+            <div className="w-3/12 p-4 font-semibold">
+              Kategori Produk
+            </div>
+            <div className='w-6/12 border-x border-gray_r-1 flex'>
+              <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'>
+                Promo Produk
+              </Link>
+              <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'>
+                Semua Brand
+              </Link>
+              <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'>
+                Ready Stock
+              </Link>
+              <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'>
+                Blog Indoteknik
+              </Link>
+            </div>
           </div>
         </div>
-        <Search />
-      </nav>
-      {Sidebar}
+      </DesktopView>
     </>
   )
 }
-- 
cgit v1.2.3