Merge pull request #59 from vtexdocs/fix/sidebar-style

fix(sidebar): update the sidebar style

src/components/sidebar-section/index.tsx

@@ -1,7 +1,6 @@
 import { Flex, Box, Text } from '@vtex/brand-ui'
 import { useContext, useState } from 'react'
 
-import HelpIcon from 'components/icons/help-icon'
 import SearchIcon from 'components/icons/search-icon'
 import SideBarToggleIcon from 'components/icons/sidebar-toggle-icon'
 import SideBarElements from 'components/sidebar-elements'
@@ -30,17 +29,14 @@ const SidebarSection = ({ title, data }: SidebarSectionProps) => {
         className={sidebarSectionHidden ? 'sidebarHide' : ''}
         sx={styles.sidebarElementsBox}
       >
-        <Text sx={styles.sidebarTitle}>
-          {title}
-          <HelpIcon sx={styles.sidebarHelpIcon} />
-        </Text>
+        <Text sx={styles.sidebarTitle}>{title}</Text>
         <Flex sx={styles.searchBox}>
           <SearchIcon sx={styles.searchIcon} />
           <input
             style={styles.searchInput}
             className="searchComponent"
             type="text"
-            placeholder="Filter in Title..."
+            placeholder={`Search in ${title}...`}
             value={searchValue}
             onChange={(e) => setSearchValue(e.currentTarget.value)}
           />

src/components/sidebar/functions.ts

@@ -0,0 +1,15 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+export const iconTooltipStyle: SxStyleProp = (tooltipState: boolean) => {
+  const iconTooltip: SxStyleProp = {
+    display: [
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      tooltipState ? 'flex' : 'none !important',
+    ],
+  }
+  return iconTooltip
+}

src/components/sidebar/index.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { Flex } from '@vtex/brand-ui'
+import { useEffect, useRef, useState } from 'react'
+import { Flex, Text, Box } from '@vtex/brand-ui'
 import Link from 'next/link'
 
 import styles from './styles'
@@ -12,13 +12,16 @@ import {
 } from 'utils/constants'
 
 import SidebarSection from 'components/sidebar-section'
+import Tooltip from 'components/tooltip'
+import { iconTooltipStyle } from './functions'
 
 interface SideBarSectionState {
   sectionSelected: DocumentationTitle | UpdatesTitle | ''
 }
 
 const Sidebar = ({ sectionSelected }: SideBarSectionState) => {
   const [activeSectionName, setActiveSectionName] = useState(sectionSelected)
+  const [expandDelayStatus, setExpandDelayStatus] = useState(true)
 
   const sidebarData: SidebarSectionProps[] = [
     {
@@ -224,37 +227,84 @@ const Sidebar = ({ sectionSelected }: SideBarSectionState) => {
     },
   ]
 
+  useEffect(() => {
+    setTimeout(() => setExpandDelayStatus(false), 5000)
+  }, [])
+
   const SideBarIcon = (iconElement: DocDataElement | UpdatesDataElement) => {
+    const [iconTooltip, setIconTooltip] = useState(false)
+    const [tooltipLabel, setTooltipLabel] = useState(iconElement.title)
+    const titleRef = useRef<HTMLElement>()
+
+    useEffect(() => {
+      const resizeObserver = new MutationObserver(function (entries) {
+        const target = entries[0].target as HTMLElement
+        if (target.offsetWidth < target.scrollWidth) setIconTooltip(true)
+        else setIconTooltip(false)
+
+        if (target.offsetWidth > 0)
+          setTooltipLabel(target.innerText as DocumentationTitle | UpdatesTitle)
+      })
+      if (titleRef.current) {
+        if (titleRef.current.offsetWidth < titleRef.current.scrollWidth)
+          setIconTooltip(true)
+        resizeObserver.observe(titleRef.current, {
+          childList: true,
+        })
+      }
+      return () => {
+        resizeObserver.disconnect
+      }
+    }, [titleRef.current])
+
     return (
-      <Link href={iconElement.link}>
-        <a
-          onClick={() => {
-            setActiveSectionName(iconElement.title)
-          }}
+      <Box sx={styles.linkContainer}>
+        <Tooltip
+          sx={iconTooltipStyle(iconTooltip)}
+          placement="right"
+          label={tooltipLabel}
         >
-          <Flex
-            sx={
-              activeSectionName === iconElement.title
-                ? styles.iconBoxActive
-                : styles.iconBox
-            }
-          >
-            <iconElement.Icon
-              sx={
-                activeSectionName === iconElement.title
-                  ? styles.iconActive
-                  : styles.icon
-              }
-            />
-          </Flex>
-        </a>
-      </Link>
+          <Link href={iconElement.link}>
+            <a
+              onClick={() => {
+                setActiveSectionName(iconElement.title)
+              }}
+            >
+              <Flex
+                sx={
+                  activeSectionName === iconElement.title
+                    ? styles.iconBoxActive
+                    : styles.iconBox
+                }
+              >
+                <iconElement.Icon
+                  sx={
+                    activeSectionName === iconElement.title
+                      ? styles.iconActive
+                      : styles.icon
+                  }
+                />
+                <Text
+                  className={expandDelayStatus ? 'iconDescriptionExpanded' : ''}
+                  ref={titleRef}
+                  sx={styles.iconTitle}
+                >
+                  {iconElement.title}
+                </Text>
+              </Flex>
+            </a>
+          </Link>
+        </Tooltip>
+      </Box>
     )
   }
 
   return (
     <Flex sx={styles.sidebar}>
-      <Flex sx={styles.sidebarIcons}>
+      <Flex
+        className={expandDelayStatus ? 'iconContainerExpanded' : ''}
+        sx={styles.sidebarIcons}
+      >
         <Flex sx={styles.sidebarIconsContainer}>
           {docsIcons.map((docsIconElement) => (
             <SideBarIcon
@@ -263,6 +313,9 @@ const Sidebar = ({ sectionSelected }: SideBarSectionState) => {
             />
           ))}
         </Flex>
+        <Box sx={styles.sectionDivider}>
+          <hr />
+        </Box>
         <Flex sx={styles.sidebarIconsContainer}>
           {notesIcons.map((notesIconElement) => (
             <SideBarIcon

src/components/sidebar/styles.ts

@@ -9,50 +9,78 @@ const sidebar: SxStyleProp = {
   ],
   width: 'auto',
   minWidth: 'auto',
+  transition: 'all 0.3s ease-in-out',
   '.active': {
     left: '-276px',
     marginRight: '-120px',
     transition: 'all 0.3s ease-in-out',
   },
+  '.iconContainerExpanded': {
+    transition: 'all 0.3s ease-in-out',
+    width: '160px',
+  },
+  '.iconDescriptionExpanded': {
+    display: 'block',
+  },
 }
 
 const sidebarIcons: SxStyleProp = {
-  width: '56px',
+  width: ['56px', '56px', '56px', '56px', '56px', '160px'],
+  maxWidth: '160px',
+  transition: 'all 0.3s ease-in-out',
   height: '692px',
   flexDirection: 'column',
-  justifyContent: 'space-between',
   borderRight: '1px solid #E7E9EE',
   background: '#FFFFFF',
   zIndex: '2',
   paddingBottom: '32px',
 }
 
+const linkContainer: SxStyleProp = {
+  minWidth: '100%',
+}
+
 const iconBox: SxStyleProp = {
   mt: ['16px'],
-  width: '40px',
+  width: '100%',
+  maxWidth: '144px',
+  paddingLeft: ['0', '0', '0', '8px'],
+  paddingRight: ['0', '0', '0', '8px', '8px', '0'],
+  py: ['0', '0', '0', '8px', '8px', '10px'],
   height: '40px',
   borderRadius: '4px',
   alignItems: 'center',
-  justifyContent: 'center',
+  justifyContent: 'flex-start',
   background: 'transparent',
+  color: 'muted.0',
   cursor: 'pointer',
   ':hover': {
     background: '#F8F7FC',
+    color: '#000711',
     path: {
-      stroke: '#E31C58',
+      stroke: [
+        '#000711',
+        '#000711',
+        '#000711',
+        '#000711',
+        '#000711',
+        '#4A596B',
+      ],
     },
   },
 }
 
 const iconBoxActive: SxStyleProp = {
   ...iconBox,
-  background: '#F8F7FC',
+  background: ['#F8F7FC', '#F8F7FC', '#F8F7FC', '#F8F7FC', '#F8F7FC', 'none'],
+  color: '#E31C58',
 }
 
 const sidebarIconsContainer: SxStyleProp = {
   width: '100%',
   flexDirection: 'column',
-  alignItems: 'center',
+  alignItems: 'flex-start',
+  px: ['0', '0', '0', '8px'],
 }
 
 const icon: SxStyleProp = {
@@ -67,12 +95,46 @@ const iconActive: SxStyleProp = {
   },
 }
 
+const sectionDivider: SxStyleProp = {
+  px: '8px',
+  marginTop: '16px',
+  hr: {
+    border: '1px solid #E7E9EE',
+    borderTop: 'none',
+  },
+}
+
+const iconTitle: SxStyleProp = {
+  display: ['none', 'none', 'none', 'none', 'none', 'block'],
+  width: '100%',
+  fontSize: '14px',
+  ml: ['8px', '8px', '8px', '8px', '8px', '12px'],
+  whiteSpace: 'nowrap',
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+}
+
+const iconTooltip: SxStyleProp = {
+  display: [
+    'flex !important',
+    'flex !important',
+    'flex !important',
+    'flex !important',
+    'flex !important',
+    'none !important',
+  ],
+}
+
 export default {
   sidebar,
   sidebarIcons,
   sidebarIconsContainer,
+  linkContainer,
   iconBox,
   icon,
   iconActive,
   iconBoxActive,
+  sectionDivider,
+  iconTitle,
+  iconTooltip,
 }

src/components/tooltip/index.tsx

@@ -1,17 +1,15 @@
 import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, TooltipProps } from '@vtex/brand-ui'
+import { Box, Flex, TooltipProps, SxStyleProp } from '@vtex/brand-ui'
 
 import CaretIcon from 'components/icons/caret'
 
 import styles from './styles'
-
-// type Props = Pick<TooltipProps, 'children' | 'label' | 'placement'>
-
 interface Props extends Pick<TooltipProps, 'children' | 'label' | 'placement'> {
+  sx?: SxStyleProp
   isCard?: boolean
 }
 
-const Tooltip = ({ children, label, placement, isCard }: Props) => {
+const Tooltip = ({ children, label, placement, sx, isCard }: Props) => {
   const box = useRef<HTMLDivElement>()
   const [boxWidth, setBoxWidth] = useState(0)
   const [boxHeight, setBoxHeight] = useState(0)
@@ -43,6 +41,7 @@ const Tooltip = ({ children, label, placement, isCard }: Props) => {
       {visible && (isCard ?? true) && (
         <Flex
           sx={styles.tooltipContainer(
+            sx,
             placement || 'top',
             boxWidth,
             boxHeight,

src/components/tooltip/styles.ts

@@ -3,12 +3,13 @@ import { SxStyleProp } from '@vtex/brand-ui'
 type Placement = 'top' | 'right' | 'bottom' | 'left'
 
 const tooltipContainer: (
+  sx: SxStyleProp,
   placement: Placement,
   width: number,
   height: number,
   x: number,
   y: number
-) => SxStyleProp = (placement, width, height, x, y) => {
+) => SxStyleProp = (sx, placement, width, height, x, y) => {
   const position = {
     bottom: {
       left: `${x + width / 2}px`,
@@ -43,6 +44,7 @@ const tooltipContainer: (
   }
 
   return {
+    ...sx,
     zIndex: '100',
     position: 'absolute',
     alignItems: 'center',