fix: Ensure modal appears above iframe by adjusting z-index

Signed-off-by: Faheem Mushtaq <[email protected]>
layer5io · Jan 4, 2025 · 626408f · 626408f
1 parent a3d1122
commit 626408f
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 104 deletions.
diff --git a/src/sections/General/Navigation/index.js b/src/sections/General/Navigation/index.js
@@ -24,109 +24,124 @@ import KanvasIcon from "./utility/KanvasIcon.js";
 
 const Navigation = () => {
   let data = useStaticQuery(
-    graphql`{
-  Learn: allMdx(
-    sort: {frontmatter: {date: DESC}}
-    filter: {fields: {collection: {eq: "service-mesh-books"}}}
-    limit: 2
-  ) {
-    nodes {
-      id
-      frontmatter {
-        title
-        thumbnail {
-          childImageSharp {
-            gatsbyImageData(width: 1050, height: 1360, layout: CONSTRAINED)
+    graphql`
+      {
+        Learn: allMdx(
+          sort: { frontmatter: { date: DESC } }
+          filter: { fields: { collection: { eq: "service-mesh-books" } } }
+          limit: 2
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              thumbnail {
+                childImageSharp {
+                  gatsbyImageData(
+                    width: 1050
+                    height: 1360
+                    layout: CONSTRAINED
+                  )
+                }
+              }
+            }
+            fields {
+              slug
+            }
           }
         }
-      }
-      fields {
-        slug
-      }
-    }
-  }
-  Community: allMdx(
-    sort: {frontmatter: {date: DESC}}
-    filter: {fields: {collection: {eq: "events"}}, frontmatter: {published: {eq: true}}}
-    limit: 2
-  ) {
-    nodes {
-      id
-      frontmatter {
-        title
-        thumbnail {
-          childImageSharp {
-            gatsbyImageData(
-              width: 240
-              height: 160
-              transformOptions: {cropFocus: CENTER}
-              layout: FIXED
-            )
+        Community: allMdx(
+          sort: { frontmatter: { date: DESC } }
+          filter: {
+            fields: { collection: { eq: "events" } }
+            frontmatter: { published: { eq: true } }
+          }
+          limit: 2
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              thumbnail {
+                childImageSharp {
+                  gatsbyImageData(
+                    width: 240
+                    height: 160
+                    transformOptions: { cropFocus: CENTER }
+                    layout: FIXED
+                  )
+                }
+                publicURL
+                extension
+              }
+            }
+            fields {
+              slug
+            }
           }
-          publicURL
-          extension
         }
-      }
-      fields {
-        slug
-      }
-    }
-  }
-  Resources: allMdx(
-    sort: {frontmatter: {date: DESC}}
-    filter: {fields: {collection: {eq: "blog"}}, frontmatter: {featured: {eq: true}}}
-    limit: 2
-  ) {
-    nodes {
-      id
-      frontmatter {
-        title
-        thumbnail {
-          childImageSharp {
-            gatsbyImageData(
-              width: 240
-              height: 160
-              transformOptions: {cropFocus: CENTER}
-              layout: FIXED
-            )
+        Resources: allMdx(
+          sort: { frontmatter: { date: DESC } }
+          filter: {
+            fields: { collection: { eq: "blog" } }
+            frontmatter: { featured: { eq: true } }
+          }
+          limit: 2
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              thumbnail {
+                childImageSharp {
+                  gatsbyImageData(
+                    width: 240
+                    height: 160
+                    transformOptions: { cropFocus: CENTER }
+                    layout: FIXED
+                  )
+                }
+                publicURL
+                extension
+              }
+            }
+            fields {
+              slug
+            }
           }
-          publicURL
-          extension
         }
-      }
-      fields {
-        slug
-      }
-    }
-  }
-  Home: allMdx(
-    sort: {frontmatter: {date: DESC}}
-    filter: {fields: {collection: {eq: "projects"}}, frontmatter: {published: {eq: true}}}
-    limit: 2
-  ) {
-    nodes {
-      id
-      frontmatter {
-        title
-        thumbnail {
-          childImageSharp {
-            gatsbyImageData(
-              width: 240
-              height: 160
-              transformOptions: {cropFocus: CENTER}
-              layout: FIXED
-            )
+        Home: allMdx(
+          sort: { frontmatter: { date: DESC } }
+          filter: {
+            fields: { collection: { eq: "projects" } }
+            frontmatter: { published: { eq: true } }
+          }
+          limit: 2
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              thumbnail {
+                childImageSharp {
+                  gatsbyImageData(
+                    width: 240
+                    height: 160
+                    transformOptions: { cropFocus: CENTER }
+                    layout: FIXED
+                  )
+                }
+                extension
+                publicURL
+              }
+            }
+            fields {
+              slug
+            }
           }
-          extension
-          publicURL
         }
       }
-      fields {
-        slug
-      }
-    }
-  }
-}`
+    `
   );
   data["Products"] = {
     nodes: [
@@ -182,8 +197,7 @@ const Navigation = () => {
       cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
   }
   useEffect(() => {
-    const CLOUD_USER_API =
-      "https://cloud.layer5.io/api/identity/users/profile";
+    const CLOUD_USER_API = "https://cloud.layer5.io/api/identity/users/profile";
     const fetchData = async () => {
       try {
         const token = getCookieValue("provider_token");
@@ -218,7 +232,8 @@ const Navigation = () => {
       }
     };
 
-    expand && setTimeout(() => document.addEventListener("click", outsideClickHandler));
+    expand &&
+      setTimeout(() => document.addEventListener("click", outsideClickHandler));
 
     return () => {
       document.removeEventListener("click", outsideClickHandler);

diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js
@@ -16,6 +16,7 @@ const NavigationWrap = styled.header`
     }
   }
   .meshery-cta {
+    z-index: 999;
     position: relative;
     display: flex;
     align-items: center;
@@ -618,12 +619,12 @@ const NavigationWrap = styled.header`
     .mobile-nav-item {
       padding: 1px;
       ul:after {
-          content: "";
-          display: block;
-          height: 1px;
-          width: 40%;
-          margin: 10px;
-          background: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3};
+        content: "";
+        display: block;
+        height: 1px;
+        width: 40%;
+        margin: 10px;
+        background: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3};
       }
       .menu-item {
         font-size: 16px;
@@ -757,7 +758,8 @@ const NavigationWrap = styled.header`
   }
   .dark-theme-toggle {
     /* margin-left: 2rem; */
-    visibility: ${(props) => typeof props.theme.DarkTheme === "boolean" ? "visible" : "hidden"};
+    visibility: ${(props) =>
+  typeof props.theme.DarkTheme === "boolean" ? "visible" : "hidden"};
   }
 
   .toggle {