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/Header/index.tsx

@@ -3,7 +3,6 @@ import {
   Drawer,
   DrawerCloseButton,
   DrawerContent,
-  DrawerOverlay,
   Flex,
   Hide,
   IconButton,
@@ -20,7 +19,6 @@ import { useFractal } from '../../../../providers/App/AppProvider';
 import { AccountDisplay } from '../../menus/AccountDisplay';
 import { DAOSearch } from '../../menus/DAOSearch';
 import { FavoritesMenu } from '../../menus/FavoritesMenu';
-import Divider from '../../utils/Divider';
 import { NavigationLinks } from '../Navigation/NavigationLinks';
 
 function HeaderLogo() {
@@ -66,39 +64,54 @@ function HeaderLogo() {
             size="full"
             isFullHeight
           >
-            <DrawerOverlay />
             <DrawerContent
-              bg="chocolate.900"
+              bg="#221D25D6"
               border="none"
+              backdropFilter="auto"
+              backdropBlur="10px"
             >
-              <DrawerCloseButton
-                size="lg"
-                zIndex="banner"
-              />
+              <Flex
+                mt={4}
+                justifyContent="space-between"
+              >
+                <Link
+                  data-testid="navigationLogo-homeLink"
+                  to={BASE_ROUTES.landing}
+                  aria-label={t('ariaLabelFractalBrand')}
+                  onClick={onClose}
+                >
+                  <DecentLogo
+                    aria-hidden
+                    h="2.5rem"
+                    w="2.125rem"
+                    ml="1.75rem"
+                  />
+                </Link>
+                <DrawerCloseButton
+                  size="lg"
+                  zIndex="banner"
+                  color="lilac-0"
+                  position="relative"
+                  top="0px"
+                />
+              </Flex>
 
               <Box
-                mt={12}
-                px={8}
-                position="relative"
+                mt={8}
+                px={6}
               >
                 <DAOSearch closeDrawer={onClose} />
               </Box>
-              <Flex
-                alignItems="center"
-                direction="column"
-                justifyContent={showDAOLinks ? 'space-evenly' : 'flex-start'}
-                flexGrow={1}
-                overflowY="auto"
-                px={8}
+              <Box
+                px={6}
                 pt={8}
               >
-                <Divider />
                 <NavigationLinks
                   showDAOLinks={showDAOLinks}
                   address={daoAddress}
                   closeDrawer={onClose}
                 />
-              </Flex>
+              </Box>
             </DrawerContent>
           </Drawer>
         </>

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

@@ -1,10 +1,15 @@
-import { Box, Container, Grid, GridItem } from '@chakra-ui/react';
+import { Box, Container, Grid, GridItem, Show } from '@chakra-ui/react';
 import { Outlet } from 'react-router-dom';
 import { CONTENT_HEIGHT, HEADER_HEIGHT } from '../../../../constants/common';
+import { useFractal } from '../../../../providers/App/AppProvider';
 import Header from '../Header';
-import Navigation from '../Navigation';
+import { NavigationLinks } from '../Navigation/NavigationLinks';
 
 export default function Layout() {
+  const {
+    node: { daoAddress },
+  } = useFractal();
+
   return (
     <Grid
       templateAreas={{
@@ -47,12 +52,16 @@ 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 />
+        <Show above="md">
+          <NavigationLinks
+            showDAOLinks={!!daoAddress}
+            address={daoAddress}
+          />
+        </Show>
       </GridItem>
     </Grid>
   );

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

@@ -1,74 +1,88 @@
-import { Box, ComponentWithAs, Hide, IconProps, Text } from '@chakra-ui/react';
-import { useCallback } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { Icon } from '@phosphor-icons/react';
+import { TFunction } from 'i18next';
 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 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>
+    </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]);
+  const linkContent = (
+    <LinkContent
+      labelKey={labelKey}
+      NavigationIcon={NavigationIcon}
+      t={t}
+    />
+  );
 
-  return (
-    <NavigationTooltip label={t(tooltipTranslationKey)}>
+  if (scope === 'internal') {
+    return (
       <Link
         data-testid={testId}
-        aria-label={t(tooltipTranslationKey)}
+        aria-label={t(labelKey)}
         to={href}
-        {...rest}
         onClick={closeDrawer}
+        style={{ display: 'block', paddingTop: '0.75rem', paddingBottom: '0.75rem' }}
+        {...rest}
       >
-        <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>
+        {linkContent}
       </Link>
-    </NavigationTooltip>
-  );
+    );
+  }
+
+  if (scope === 'external') {
+    return (
+      <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>
+    );
+  }
+
+  return null;
 }