change mobile and desktop view

4 files changed, 66 insertions, 25 deletions

diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index c88bfad3..1c559faf 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -3,6 +3,7 @@ import Image from 'next/image'
 import IndoteknikLogo from '@/images/logo.png'
 import {
   Bars3Icon,
+  ChevronDownIcon,
   DocumentCheckIcon,
   HeartIcon,
   ShoppingCartIcon
@@ -50,7 +51,7 @@ const Navbar = () => {
       </MobileView>
 
       <DesktopView>
-        <div className='py-3 bg-yellow_r-10'>
+        <div className='py-3 bg-yellow_r-10/60'>
           <div className='container mx-auto flex justify-between'>
             <Link
               href='/'
@@ -81,7 +82,7 @@ const Navbar = () => {
           </div>
         </div>
 
-        <nav className='py-6 sticky top-0 z-50 bg-white shadow'>
+        <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
@@ -123,7 +124,7 @@ const Navbar = () => {
                 className='flex items-center gap-x-1 !text-gray_r-12/80'
               >
                 <Image
-                  src='/images/socials/whatsapp-2.png'
+                  src='/images/socials/Whatsapp-2.png'
                   alt='Whatsapp'
                   width={48}
                   height={48}
@@ -137,35 +138,57 @@ const Navbar = () => {
           </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'>
+        <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 text-center !text-gray_r-12/80'
+                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 text-center !text-gray_r-12/80'
+                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 text-center !text-gray_r-12/80'
+                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 text-center !text-gray_r-12/80'
+                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>
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index e78f7f29..32a8d170 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -7,20 +7,14 @@ import { useRouter } from 'next/router'
 const Search = () => {
   const router = useRouter()
   const queryRef = useRef()
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = useState(router.query.q || '')
   const [suggestions, setSuggestions] = useState([])
 
-  useEffect(() => {
-    setQuery(router.query.q)
-  }, [router.query])
-
   const loadSuggestion = useCallback(() => {
     if (query && document.activeElement == queryRef.current) {
-      ;(async () => {
-        const dataSuggestion = await searchSuggestApi({ query })
-        setSuggestions(dataSuggestion.data.suggestions)
-      })()
-      return
+      searchSuggestApi({ query }).then((response) => {
+        setSuggestions(response.data.suggestions)
+      })
     } else {
       setSuggestions([])
     }
diff --git a/src/core/components/views/DesktopView.jsx b/src/core/components/views/DesktopView.jsx
index 31a67936..08c4b310 100644
--- a/src/core/components/views/DesktopView.jsx
+++ b/src/core/components/views/DesktopView.jsx
@@ -1,11 +1,23 @@
-import isMobile from 'is-mobile'
 import { useEffect, useState } from 'react'
 
 const DesktopView = ({ children }) => {
   const [view, setView] = useState(<></>)
 
   useEffect(() => {
-    if (!isMobile()) setView(children)
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setView(children)
+      } else {
+        setView(<></>)
+      }
+    }
+
+    handleResize()
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
   }, [children])
 
   return view
diff --git a/src/core/components/views/MobileView.jsx b/src/core/components/views/MobileView.jsx
index be8aa293..348572c6 100644
--- a/src/core/components/views/MobileView.jsx
+++ b/src/core/components/views/MobileView.jsx
@@ -1,11 +1,23 @@
-import isMobile from 'is-mobile'
 import { useEffect, useState } from 'react'
 
 const MobileView = ({ children }) => {
   const [view, setView] = useState(<></>)
 
   useEffect(() => {
-    if (isMobile()) setView(children)
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setView(children)
+      } else {
+        setView(<></>)
+      }
+    }
+
+    handleResize()
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
   }, [children])
 
   return view