toaster

3 files changed, 20 insertions, 3 deletions

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 380b0a16..c01cb777 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -22,7 +22,7 @@ const NavbarDesktop = () => {
 
   return (
     <DesktopView>
-      <div className='py-3 bg-yellow_r-10/80'>
+      <div className='py-3 bg-yellow_r-10/80' id='desktop-nav-top'>
         <div className='container mx-auto flex justify-between'>
           <Link href='/' className='!text-gray_r-12'>
             Tentang Indoteknik.com
diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 4fd17ed0..1276d6e0 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -53,7 +53,7 @@ const BottomPopup = ({ children, active = false, title, close }) => {
                 animate={{ bottom: '50%', opacity: 1 }}
                 exit={{ bottom: '45%', opacity: 0 }}
                 transition={transition}
-                className='fixed left-1/2 -translate-x-1/2 translate-y-1/2 w-2/5 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white'
+                className='fixed left-1/2 -translate-x-1/2 translate-y-1/2 md:w-1/4 lg:w-1/3 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white'
               >
                 <div className='flex justify-between py-4'>
                   <div className='font-semibold text-h-sm'>{title}</div>
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 7b04fea2..634e631f 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -5,6 +5,7 @@ import { AnimatePresence } from 'framer-motion'
 import { Toaster } from 'react-hot-toast'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import useDevice from '@/core/hooks/useDevice'
+import { useEffect, useState } from 'react'
 
 const queryClient = new QueryClient()
 
@@ -12,10 +13,26 @@ function MyApp({ Component, pageProps }) {
   const router = useRouter()
   const { isMobile } = useDevice()
 
+  const [toasterStyle, setToasterStyle] = useState({})
+
+  useEffect(() => {
+    let elems = document.querySelectorAll('nav')
+    let totalNavHeight = 0
+
+    elems.forEach(function (elem) {
+      totalNavHeight += elem.offsetHeight
+    })
+
+    setToasterStyle({
+      marginTop: isMobile ? totalNavHeight - 8 : totalNavHeight
+    })
+  }, [isMobile])
+
   return (
     <>
       <Toaster
-        position={isMobile ? 'top-center' : 'bottom-center'}
+        position='top-center'
+        containerStyle={toasterStyle}
         toastOptions={{
           duration: 3000,
           className: 'border border-gray_r-8'