Make link click/tap areas in nav take full heigh

decentdao · Apr 29, 2024 · 177f502 · 177f502
1 parent c33a820
commit 177f502
Showing 1 changed file with 22 additions and 33 deletions.
diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx
@@ -1,14 +1,9 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { Icon } from '@phosphor-icons/react';
 import { TFunction } from 'i18next';
-import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-function LinkContainer({ link }: { link: ReactElement }) {
-  return <Box py={3}>{link}</Box>;
-}
-
 function LinkContent({
   labelKey,
   NavigationIcon,
@@ -59,39 +54,33 @@ export function NavigationLink({
 
   if (scope === 'internal') {
     return (
-      <LinkContainer
-        link={
-          <Link
-            data-testid={testId}
-            aria-label={t(labelKey)}
-            to={href}
-            onClick={closeDrawer}
-            {...rest}
-          >
-            {linkContent}
-          </Link>
-        }
-      />
+      <Link
+        data-testid={testId}
+        aria-label={t(labelKey)}
+        to={href}
+        onClick={closeDrawer}
+        style={{ display: 'block', paddingTop: '0.75rem', paddingBottom: '0.75rem' }}
+        {...rest}
+      >
+        {linkContent}
+      </Link>
     );
   }
 
   if (scope === 'external') {
     return (
-      <LinkContainer
-        link={
-          <a
-            data-testid={testId}
-            aria-label={t(labelKey)}
-            href={href}
-            onClick={closeDrawer}
-            {...rest}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            {linkContent}
-          </a>
-        }
-      />
+      <a
+        data-testid={testId}
+        aria-label={t(labelKey)}
+        href={href}
+        onClick={closeDrawer}
+        {...rest}
+        target="_blank"
+        rel="noreferrer noopener"
+        style={{ display: 'block', paddingTop: '0.75rem', paddingBottom: '0.75rem' }}
+      >
+        {linkContent}
+      </a>
     );
   }