Reskin | sidebar

package.json

@@ -5,7 +5,7 @@
     "@adraffy/ens-normalize": "^1.10.1",
     "@apollo/client": "^3.7.10",
     "@chakra-ui/react": "^2.8.2",
-    "@decent-org/fractal-ui": "^0.2.5",
+    "@decent-org/fractal-ui": "^0.3.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@ethersproject/abstract-signer": "^5.7.0",

src/components/ui/menus/OptionMenu/index.tsx

@@ -41,7 +41,6 @@ export function OptionMenu({
       >
         <MenuButton
           as={buttonAs}
-          h="fit-content"
           onClick={(event: MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
           }}

src/components/ui/page/Layout/index.tsx

@@ -47,10 +47,9 @@ export default function Layout() {
         area={'nav'}
         display="flex"
         flexDirection="column"
-        flexGrow="1"
         position="fixed"
-        w="4.25rem"
-        minHeight={{ base: undefined, md: '100vh' }}
+        ml={6}
+        minHeight={{ base: undefined, md: `calc(100vh - ${HEADER_HEIGHT})` }}
       >
         <Navigation />
       </GridItem>

src/components/ui/page/Navigation/NavigationLink.tsx

@@ -1,74 +1,102 @@
-import { Box, ComponentWithAs, Hide, IconProps, Text } from '@chakra-ui/react';
-import { useCallback } from 'react';
+import { Box, Hide, Text, 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, useMatch } from 'react-router-dom';
-import { NavigationTooltip } from './NavigationTooltip';
+import { Link } from 'react-router-dom';
 
-interface INavigationLink {
-  href: string;
+function LinkContainer({ link }: { link: ReactElement }) {
+  return <Box py={3}>{link}</Box>;
+}
+
+function LinkContent({
+  labelKey,
+  NavigationIcon,
+  t,
+}: {
   labelKey: string;
-  tooltipKey?: string;
-  testId: string;
-  Icon: ComponentWithAs<'svg', IconProps>;
-  target?: string;
-  rel?: string;
-  closeDrawer?: () => void;
+  NavigationIcon: Icon;
+  t: TFunction<'navigation', undefined>;
+}) {
+  return (
+    <Flex>
+      <Box w={6}>{<NavigationIcon size={24} />}</Box>
+      <Box
+        mx={3}
+        whiteSpace="nowrap"
+      >
+        {t(labelKey)}
+      </Box>
+      <Hide above="md">
+        <Text textStyle="text-md-mono-medium">{t(labelKey)}</Text>
+      </Hide>
+    </Flex>
+  );
 }
 
 export function NavigationLink({
+  href,
   labelKey,
   testId,
-  Icon,
-  tooltipKey,
+  NavigationIcon,
+  scope,
   closeDrawer,
-  href,
   ...rest
-}: INavigationLink) {
-  const tooltipTranslationKey = tooltipKey || labelKey;
-
+}: {
+  href: string;
+  labelKey: string;
+  testId: string;
+  NavigationIcon: Icon;
+  scope: 'internal' | 'external';
+  closeDrawer?: () => void;
+}) {
   const { t } = useTranslation('navigation');
-  const isActive = useMatch(href);
-
-  const activeColors = useCallback(() => {
-    return {
-      color: isActive ? 'gold.500' : 'inherit',
-      _hover: {
-        color: 'gold.500-hover',
-      },
-    };
-  }, [isActive]);
 
-  return (
-    <NavigationTooltip label={t(tooltipTranslationKey)}>
-      <Link
-        data-testid={testId}
-        aria-label={t(tooltipTranslationKey)}
-        to={href}
-        {...rest}
-        onClick={closeDrawer}
-      >
-        <Box
-          display={{ base: 'flex', md: undefined }}
-          gap={8}
-          justifyContent="space-between"
-          alignItems="center"
-          {...activeColors()}
-        >
-          <Icon
-            boxSize="1.5rem"
-            sx={{
-              'g path': {
-                transitionProperty: 'all',
-                transitionDuration: '300ms',
-                transitionTimingFunction: 'ease-out',
-              },
-            }}
-          />
-          <Hide above="md">
-            <Text textStyle="text-md-mono-medium">{t(labelKey)}</Text>
-          </Hide>
-        </Box>
-      </Link>
-    </NavigationTooltip>
+  const linkContent = (
+    <LinkContent
+      labelKey={labelKey}
+      NavigationIcon={NavigationIcon}
+      t={t}
+    />
   );
+
+  if (scope === 'internal') {
+    return (
+      <LinkContainer
+        link={
+          <Link
+            data-testid={testId}
+            aria-label={t(labelKey)}
+            to={href}
+            onClick={closeDrawer}
+            {...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>
+        }
+      />
+    );
+  }
+
+  return null;
 }