3 files changed, 54 insertions, 20 deletions

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 328bc0c9..c6e80e87 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -20,6 +20,14 @@ import Link from '../Link/Link';
 import NavbarUserDropdown from './NavbarUserDropdown';
 import NextImage from 'next/image';
 import style from "./style/NavbarDesktop.module.css";
+import {
+  Button,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  useDisclosure,
+} from '@chakra-ui/react';
 
 const Search = dynamic(() => import('./Search'), { ssr: false });
 const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
@@ -37,6 +45,7 @@ const NavbarDesktop = () => {
   const router = useRouter();
 
   const { product } = useProductContext();
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   useEffect(() => {
     if (router.pathname === '/shop/product/[slug]') {
@@ -79,7 +88,31 @@ const NavbarDesktop = () => {
             </div>
           </div>
           <div className='flex gap-x-6'>
-            <Link href='/tentang-kami' className='!text-gray_r-12'>
+            <Menu isOpen={isOpen}>
+              <MenuButton
+                rightIcon={<ChevronDownIcon />}
+                onMouseEnter={onOpen}
+                onMouseLeave={onClose}
+              >
+                <div className='flex gap-x-1'>
+                  <div>Fitur Layanan </div>
+                  <ChevronDownIcon className='w-5'/>
+                </div>
+              </MenuButton>
+              <MenuList
+                zIndex={100}
+                onMouseEnter={onOpen}
+                onMouseLeave={onClose}
+              >
+                <MenuItem as='a' href='/tentang-kami'>
+                  Tentang Indoteknik
+                </MenuItem>
+                <MenuItem as='a' href='/my/pembayaran-tempo'>
+                  Pembayaran Tempo
+                </MenuItem>
+              </MenuList>
+            </Menu>
+            {/* <Link href='/tentang-kami' className='!text-gray_r-12'>
               Tentang Indoteknik.com
             </Link>
             <Link href='/my/pembayaran-tempo' className='!text-gray_r-12'>
@@ -87,7 +120,7 @@ const NavbarDesktop = () => {
             </Link>
             <Link href='/' className='!text-gray_r-12'>
               Fitur Layanan
-            </Link>
+            </Link> */}
           </div>
         </div>
       </div>
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index bcf45e0a..90314671 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -11,7 +11,7 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
-// import TopBanner from './TopBanner';
+import TopBanner from './TopBanner';
 
 const Search = dynamic(() => import('./Search'));
 
@@ -39,7 +39,7 @@ const NavbarMobile = () => {
 
   return (
     <MobileView>
-      {/* <TopBanner /> */}
+      <TopBanner />
       <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='/'>
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 722a7501..df47e87d 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,39 +1,40 @@
 import Image from 'next/image';
-import { useQuery } from 'react-query';
-
+import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice'
 import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
 import Link from '../Link/Link';
+import { background } from '@chakra-ui/react';
 
 const TopBanner = () => {
+  const { isDesktop, isMobile } = useDevice()
   const topBanner = useQuery({
     queryKey: 'topBanner',
     queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
     refetchOnWindowFocus: false,
   });
 
-  const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
+  // const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
   const hasData = topBanner.data?.length > 0;
   const data = topBanner.data?.[0] || null;
 
   return (
     <SmoothRender
       isLoaded={hasData}
-      height='36px'
+      // height='36px'
       duration='700ms'
       delay='300ms'
-      style={{ backgroundColor }}
-    >
-      <Link href={data?.url}>
-        <Image
-          src={data?.image}
-          alt={data?.name}
-          width={1440}
-          height={40}
-          className='object-cover object-center h-full mx-auto'
-        />
-      </Link>
-    </SmoothRender>
+      className='h-auto'
+      >
+      <Link
+          href={data?.url}
+          className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]"
+          style={{
+            backgroundImage: `url('${data?.image}')`,
+          }}
+        >
+        </Link>
+
+      </SmoothRender>
   );
 };