fix: disable tippy by default

- disabled tippy by default. - avoided using nested interactive elements.
dezswap · Mar 26, 2024 · a126cd3 · a126cd3
1 parent d2e1885
commit a126cd3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -52,19 +52,29 @@ interface NavBarProps {
 function NavBar({ items, flex = true }: NavBarProps) {
   return (
     <Wrapper>
-      {items.map(({ key, disabled, to, tippyProps, ...navItemProps }) => (
-        <Tippy {...tippyProps}>
-          <NavItem
-            className={`${navItemProps.className ?? ""} ${
-              disabled ? "disabled" : ""
-            }`}
-            key={key ?? `${to.toString()}`}
-            to={disabled ? "#" : to}
-            {...navItemProps}
-            flex={flex}
-          />
-        </Tippy>
-      ))}
+      {items.map(
+        ({
+          key,
+          disabled,
+          to,
+          tippyProps = {
+            disabled: true,
+          },
+          ...navItemProps
+        }) => (
+          <Tippy {...tippyProps}>
+            <NavItem
+              className={`${navItemProps.className ?? ""} ${
+                disabled ? "disabled" : ""
+              }`}
+              key={key ?? `${to.toString()}`}
+              to={disabled ? "#" : to}
+              {...navItemProps}
+              flex={flex}
+            />
+          </Tippy>
+        ),
+      )}
     </Wrapper>
   );
 }

diff --git a/src/layout/Main/index.tsx b/src/layout/Main/index.tsx
@@ -7,7 +7,6 @@ import Header, {
   BANNER_HEIGHT,
 } from "layout/Main/Header";
 import NavBar from "components/NavBar";
-import IconButton from "components/IconButton";
 import Typography from "components/Typography";
 import iconOverview from "assets/icons/icon-overview-24px.svg";
 import iconTrade from "assets/icons/icon-trade.svg";
@@ -56,6 +55,15 @@ const NavBarOffset = styled.div`
   pointer-events: none;
 `;
 
+const NavBarIcon = styled.div`
+  width: 100%;
+  height: 24px;
+  position: relative;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+`;
+
 const FooterWrapper = styled.div`
   width: 100%;
   height: auto;
@@ -97,7 +105,7 @@ const navBar = (
     items={navLinks.map((navLink) => {
       const children = (
         <div>
-          <IconButton icons={{ default: navLink.icon }} size={24} />
+          <NavBarIcon style={{ backgroundImage: `url(${navLink.icon})` }} />
           <Typography size={12} weight={900} color="primary">
             {navLink.label}
           </Typography>