feat: add tooltip to closed router sidebar icons

aleph-im · Jul 24, 2024 · 0631cce · 0631cce
1 parent 484a3c5
commit 0631cce
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 26 deletions.
diff --git a/src/components/common/Tooltip/cmp.tsx b/src/components/common/Tooltip/cmp.tsx
@@ -10,6 +10,7 @@ import {
   StyledContentContainer,
   StyledContainer,
   StyledHeaderCloseIcon,
+  StyledChildrenContainer,
 } from './styles'
 import { TooltipProps } from './types'
 import { useFloatPosition } from '../../../hooks/useFloatPosition'
@@ -26,6 +27,7 @@ export const Tooltip = ({
   at = 'top-center',
   margin = { x: 5, y: 5 },
   offset = { x: 0, y: 0 },
+  variant = 1,
   onOpen,
   onClose,
   onCloseClick,
@@ -110,6 +112,7 @@ export const Tooltip = ({
               ref: tooltipRef,
               $position: position,
               $stage: stage,
+              $variant: variant,
               ...rest,
             }}
           >
@@ -118,14 +121,16 @@ export const Tooltip = ({
                 <StyledHeaderCloseIcon onClick={handleCloseClick} />
               </div>
             )}
-            <StyledContentContainer>{content}</StyledContentContainer>
+            <StyledContentContainer $variant={variant}>
+              {content}
+            </StyledContentContainer>
           </StyledContainer>
         )}
       </Portal>
       {children && (
-        <span style={{ display: 'inline-block' }} ref={targetRef}>
+        <StyledChildrenContainer ref={targetRef}>
           {children}
-        </span>
+        </StyledChildrenContainer>
       )}
     </>
   )

diff --git a/src/components/common/Tooltip/styles.tsx b/src/components/common/Tooltip/styles.tsx
@@ -2,28 +2,40 @@ import { HTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { addClasses } from '../../../utils'
 import Icon from '../Icon'
-import { TooltipPosition } from './types'
+import { TooltipPosition, TooltipVariant } from './types'
 import tw from 'twin.macro'
 import { getResponsiveCss } from '../../../styles'
 import { Stage } from 'transition-hook'
 
 export type StyledContainerProps = {
   $position: TooltipPosition
   $stage: Stage
+  $variant: TooltipVariant
 } & HTMLAttributes<HTMLDivElement>
 
 export const StyledContainer = styled.div.attrs(
   addClasses('fx-glass-base2'),
 )<StyledContainerProps>`
-  ${({ theme, $stage, $position: { x = 0, y = 0 } }) => {
+  ${({ theme, $stage, $variant, $position: { x = 0, y = 0 } }) => {
     const [g0, g1] = theme.gradient.main0.colors
 
     return css`
       ${tw`fixed inline-flex flex-col items-stretch justify-start gap-4 p-6 inset-6 z-10`}
 
-      border-radius: 1.5rem;
+      ${$variant === 1 &&
+      css`
+        border-radius: 1.5rem;
+        color: ${theme.color.text};
+      `}
+
+      ${$variant === 2 &&
+      css`
+        color: ${theme.color.white};
+        background: ${theme.color.black};
+        padding: 0.1428rem 0.4286rem;
+      `}
+
       backdrop-filter: blur(50px);
-      color: ${theme.color.text};
       opacity: ${$stage === 'enter' ? 1 : 0};
       will-change: opacity, transform;
       transition-property: opacity;
@@ -41,21 +53,24 @@ export const StyledContainer = styled.div.attrs(
       )}
 
       /* BORDER */
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: -1;
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(90deg, ${g0} 0%, ${g1} 100%);
-        padding: 0.0625rem;
-        border-radius: 1.5rem;
-        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-        mask-composite: exclude;
-        -webkit-mask-composite: xor;
-      }
+      ${$variant === 1 &&
+      css`
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: -1;
+          height: 100%;
+          width: 100%;
+          background-image: linear-gradient(90deg, ${g0} 0%, ${g1} 100%);
+          padding: 0.0625rem;
+          border-radius: 1.5rem;
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask-composite: exclude;
+          -webkit-mask-composite: xor;
+        }
+      `}
     `
   }}
 `
@@ -78,6 +93,21 @@ export const StyledHeaderCloseIcon = styled(Icon).attrs((props) => {
   flex: 0 0 auto;
 `
 
-export const StyledContentContainer = styled.div.attrs(
-  addClasses('tp-body1 fs-12'),
-)``
+export type StyledContentContainerProps = {
+  $variant: TooltipVariant
+} & HTMLAttributes<HTMLDivElement>
+
+export const StyledContentContainer = styled.div.attrs<StyledContentContainerProps>(
+  (props) => {
+    switch (props.$variant) {
+      case 1:
+        return addClasses('tp-body1 fs-12')(props)
+      case 2:
+        return addClasses('tp-body3 fs-12')(props)
+    }
+  },
+)<StyledContentContainerProps>``
+
+export const StyledChildrenContainer = styled.span`
+  display: inline-block;
+`
diff --git a/src/components/common/Tooltip/types.ts b/src/components/common/Tooltip/types.ts
@@ -3,6 +3,7 @@ import { FloatPosition, FloatPositionType } from '../../../hooks'
 
 export type TooltipPositionType = FloatPositionType
 export type TooltipPosition = FloatPosition
+export type TooltipVariant = 1 | 2
 
 export type TooltipProps = {
   my: TooltipPositionType
@@ -15,6 +16,7 @@ export type TooltipProps = {
 
   open?: boolean
   content?: ReactNode
+  variant?: TooltipVariant
 
   onOpen?: () => void
   onClose?: () => void

diff --git a/src/components/modules/RouterSidebar/cmp.tsx b/src/components/modules/RouterSidebar/cmp.tsx
@@ -22,6 +22,7 @@ import {
   StyledNav2MainTitle,
   StyledOpenedNav2LinkContainer,
   StyledClosedNav2LinkContainer,
+  StyledTooltip,
 } from './styles'
 import { RouteProps, RouterSidebarProps } from './types'
 import { RouterLinkProps } from '../RouterLink'
@@ -178,8 +179,14 @@ const ClosedNav2Route = (props: RouteProps) => {
             />
           ))}
         </>
-      ) : (
+      ) : $route.highlighted ? (
         <StyledRouterLink2 {...linkProps} />
+      ) : (
+        <div tw="w-full flex justify-center items-center">
+          <StyledTooltip content={[route.name, route.label].join(' ')}>
+            <StyledRouterLink2 {...linkProps} />
+          </StyledTooltip>
+        </div>
       )}
     </StyledClosedNav2Link>
   )

diff --git a/src/components/modules/RouterSidebar/styles.tsx b/src/components/modules/RouterSidebar/styles.tsx
@@ -14,6 +14,8 @@ import {
   StyledDisabledRouterLink,
 } from '../RouterLink/styles'
 import { StyledTextGradientContainer } from '../../common/TextGradient/styles'
+import Tooltip from '../../common/Tooltip'
+import { StyledChildrenContainer as StyledTooltipChildrenContainer } from '../../common/Tooltip/styles'
 
 const nav1OpenSize = 4.5
 const nav1CloseSize = 0.375
@@ -164,6 +166,17 @@ export const StyledRouterLink2 = styled(
   }}
 `
 
+export const StyledTooltip = styled(Tooltip).attrs((props) => {
+  return {
+    ...props,
+    variant: 2,
+    my: 'center-left',
+    at: 'center-left',
+    offset: { x: 63, y: 0 },
+    margin: { x: 5, y: 0 },
+  }
+})``
+
 export const StyledNav2LinkContainer = styled.div`
   ${tw`flex flex-col items-start cursor-auto w-full overflow-auto absolute`}
   margin-top: 6.5rem;
@@ -213,6 +226,10 @@ export const StyledClosedNav2LinkContainer = styled(StyledNav2LinkContainer)`
     ${tw`flex items-center justify-center text-center`}
   }
 
+  & ${StyledTooltipChildrenContainer} {
+    ${tw`w-full`}
+  }
+
   & ${StyledNotificationBadge} {
     position: absolute;
     left: 66%;