diff options
Diffstat (limited to 'src/core')
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarDesktop.jsx | 141 |
1 files changed, 70 insertions, 71 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 0bc9e967..fcb54802 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -41,7 +41,7 @@ const NavbarDesktop = () => { </div> </div> - <nav className='py-6 sticky top-0 z-50 bg-white border-b border-gray_r-6'> + <nav className='pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500'> <div className='container mx-auto flex gap-x-6'> <Link href='/'> <Image src={IndoteknikLogo} alt='Indoteknik Logo' width={210} height={210 / 3} /> @@ -52,7 +52,7 @@ const NavbarDesktop = () => { <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 + Daftar <br /> Quotation </Link> @@ -80,81 +80,80 @@ const NavbarDesktop = () => { </a> </div> </div> - </nav> - - <div className='container mx-auto mt-6'> - <div className='flex bg-gray_r-2'> - <button - type='button' - onClick={() => setIsOpenCategory((isOpen) => !isOpen)} - onBlur={() => setIsOpenCategory(false)} - className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center relative' - > - <div>Kategori Produk</div> - <ChevronDownIcon className={`ml-auto w-6 ${isOpenCategory ? 'rotate-180' : ''}`} /> + <div className='container mx-auto mt-6'> + <div className='flex'> + <button + type='button' + onClick={() => setIsOpenCategory((isOpen) => !isOpen)} + onBlur={() => setIsOpenCategory(false)} + className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative' + > + <div>Kategori Produk</div> + <ChevronDownIcon className={`ml-auto w-6 ${isOpenCategory ? 'rotate-180' : ''}`} /> - <div className={`category-mega-box-wrapper ${isOpenCategory ? 'show' : ''}`}> - <Category /> + <div className={`category-mega-box-wrapper ${isOpenCategory ? 'show' : ''}`}> + <Category /> + </div> + </button> + <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'> + <Link + href='/shop/brands' + className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + > + Semua Brand + </Link> + <Link + href='/shop/search?orderBy=stock' + className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + > + Ready Stock + </Link> + <Link + href='/blog' + className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + > + Blog Indoteknik + </Link> + <Link + href='/video' + className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + > + Indoteknik TV + </Link> </div> - </button> - <div className='w-6/12 flex gap-x-1 px-1 bg-gray_r-1'> - <Link - href='/shop/brands' - 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='/shop/search?orderBy=stock' - 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='/blog' - 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> - <Link - href='/video' - 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' - > - Indoteknik TV - </Link> - </div> - <div className='w-3/12 flex gap-x-1 relative'> - {!auth && ( - <> - <Link - href='/login' - className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none' - > - Masuk - </Link> - <Link - href='/register' - className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-tr-xl' - > - Daftar - </Link> - </> - )} - {auth && ( - <> - <div href='/' className='navbar-user-dropdown-button'> - <span>Halo, {auth?.name}</span> - <div className='ml-auto'> - <ChevronDownIcon className='w-6' /> + <div className='w-3/12 flex gap-x-1 relative'> + {!auth && ( + <> + <Link + href='/login' + className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl' + > + Masuk + </Link> + <Link + href='/register' + className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl' + > + Daftar + </Link> + </> + )} + {auth && ( + <> + <div href='/' className='navbar-user-dropdown-button'> + <span>Halo, {auth?.name}</span> + <div className='ml-auto'> + <ChevronDownIcon className='w-6' /> + </div> </div> - </div> - <NavbarUserDropdown /> - </> - )} + <NavbarUserDropdown /> + </> + )} + </div> </div> </div> - </div> + </nav> </DesktopView> ) } |