toaster

1 files changed, 18 insertions, 1 deletions

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'