From 1218d8109380488ab7d15538fe3f828883dbc822 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 10 Mar 2023 17:23:04 +0700
Subject: change mobile and desktop view

---
 src/core/components/elements/Navbar/Navbar.jsx | 45 +++++++++++++++++++-------
 src/core/components/elements/Navbar/Search.jsx | 14 +++-----
 src/core/components/views/DesktopView.jsx      | 16 +++++++--
 src/core/components/views/MobileView.jsx       | 16 +++++++--
 src/lib/category/components/Category.jsx       | 31 ++++++++++++++++++
 src/pages/index.jsx                            | 27 ++++++++++++----
 src/styles/globals.css                         | 23 ++++++++++++-
 7 files changed, 140 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/category/components/Category.jsx

(limited to 'src')

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
diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
new file mode 100644
index 00000000..21e2ec6f
--- /dev/null
+++ b/src/lib/category/components/Category.jsx
@@ -0,0 +1,31 @@
+import Link from '@/core/components/elements/Link/Link'
+import DesktopView from '@/core/components/views/DesktopView'
+
+const Category = () => {
+  return (
+    <DesktopView>
+      <div className='category-box'>
+        <div>
+          <Link href='/'>Alat Potong & Pelengkap Mesin</Link>
+          <div>
+            <div className='font-medium'>Alat Potong & Pelengkap Mesin</div>
+          </div>
+        </div>
+        <div>
+          <Link href='/'>Alat Ukur & Instrument</Link>
+          <div>
+            <div className='font-medium'>Alat Ukur & Instrument</div>
+          </div>
+        </div>
+        <div>
+          <Link href='/'>Komponen Mekanikal & Hardware</Link>
+          <div>
+            <div className='font-medium'>Komponen Mekanikal & Hardware</div>
+          </div>
+        </div>
+      </div>
+    </DesktopView>
+  )
+}
+
+export default Category
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 19d3e59c..2c63e772 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -2,6 +2,9 @@ import dynamic from 'next/dynamic'
 import Seo from '@/core/components/Seo'
 import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
 import PopularProductSkeleton from '@/lib/home/components/Skeleton/PopularProductSkeleton'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Category from '@/lib/category/components/Category'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 
@@ -25,12 +28,24 @@ export default function Home() {
   return (
     <BasicLayout>
       <Seo title='Beranda - Indoteknik' />
-      <HeroBanner />
-      <div className='flex flex-col gap-y-6 my-6'>
-        <PreferredBrand />
-        <PopularProduct />
-        <CategoryHomeId />
-      </div>
+      <DesktopView>
+        <div className="container mx-auto">
+          <div className='flex'>
+            <div className='w-3/12'>
+              <Category />
+            </div>
+          </div>
+        </div>
+      </DesktopView>
+
+      <MobileView>
+        <HeroBanner />
+        <div className='flex flex-col gap-y-6 my-6'>
+          <PreferredBrand />
+          <PopularProduct />
+          <CategoryHomeId />
+        </div>
+      </MobileView>
     </BasicLayout>
   )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0137351e..f551f9f7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -18,7 +18,7 @@ body {
 }
 
 #__next main {
-    @apply min-h-screen
+    @apply min-h-screen;
 }
 
 button {
@@ -380,3 +380,24 @@ button {
 .form-select__control--menu-is-open {
     @apply !border-yellow_r-9;
 }
+
+.category-box {
+    @apply py-2 border border-gray_r-6;
+}
+
+.category-box > div {
+    @apply relative text-gray_r-12/80;
+}
+
+.category-box a {
+    @apply py-2.5 px-4 idt-transition text-gray_r-12/80 hover:bg-gray_r-4;
+}
+
+.category-box a + div {
+    @apply absolute left-[100%] top-0 w-[40vw] bg-gray_r-1 border border-gray_r-6 p-4 hidden;
+}
+
+.category-box a:hover + div,
+.category-box a + div:hover {
+    @apply block;
+}
-- 
cgit v1.2.3