fix: fixed a problem with the zoom z-index and the navigation bar

Franqsanz · Nov 30, 2023 · eb741ca · eb741ca · vercel · Nov 30, 2023
1 parent 27d727e
commit eb741ca
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 6 deletions.
diff --git a/src/components/ImageZoom.tsx b/src/components/ImageZoom.tsx
@@ -13,7 +13,7 @@ export function ImageZoom({ options, ...props }: ImageZoomProps) {
     if (zoomRef.current === null) {
       zoomRef.current = mediumZoom({
         background: '#000000d6',
-        margin: 70,
+        margin: 24,
       });
     }
 
@@ -30,5 +30,5 @@ export function ImageZoom({ options, ...props }: ImageZoomProps) {
     }
   }
 
-  return <Image {...props} ref={attachZoom} />;
+  return <Image {...props} ref={attachZoom} position='relative' zIndex='2' />;
 }
diff --git a/src/components/nav/DesktopNav.tsx b/src/components/nav/DesktopNav.tsx
@@ -63,7 +63,7 @@ export function DesktopNav() {
         boxShadow='sm'
         backdropFilter='auto'
         backdropBlur='12px'
-        zIndex='999'
+        zIndex='1'
       >
         <Flex as='nav' w='100%' justify='space-around' align='center'>
           <Flex align='center'>

diff --git a/src/components/nav/MobileNav.tsx b/src/components/nav/MobileNav.tsx
@@ -70,7 +70,7 @@ export function MobileNav() {
         position='sticky'
         top='0'
         p='2'
-        zIndex='999'
+        zIndex='1'
       >
         <Flex as='nav' w='100%' justify='space-between' align='center'>
           <Flex align='center'>

diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -331,8 +331,8 @@ export default function Book() {
             <Flex
               as='figure'
               justifyContent='center'
-              zIndex='9999'
               position='relative'
+              zIndex='1'
             >
               <LazyLoad width={290} height={420} offset={0} threshold={0.99}>
                 <ImageZoom
@@ -347,7 +347,6 @@ export default function Book() {
                   filter='blur(10px)'
                   transition='filter 0.5s ease-in-out'
                   onLoad={handleImageLoad}
-                  zIndex='9999'
                 />
               </LazyLoad>
             </Flex>

diff --git a/theme.ts b/theme.ts
@@ -33,6 +33,9 @@ export default extendTheme({
           borderRadius: '30px',
           border: '4px solid #f2f2f2',
         },
+        '.medium-zoom-overlay, .medium-zoom--opened': {
+          zIndex: 2,
+        },
       },
       h1: {
         fontWeight: 'extrabold',