fix(sidebar): sidebar-section title and the icon description behavior…

… on medium screens

src/components/sidebar-section/index.tsx

@@ -36,7 +36,7 @@ const SidebarSection = ({ title, data }: SidebarSectionProps) => {
             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,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Flex, Text, Box } from '@vtex/brand-ui'
 import Link from 'next/link'
 
@@ -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,38 +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
-              }
-            />
-            <Text sx={styles.iconTitle}>{iconElement.title}</Text>
-          </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

src/components/sidebar/styles.ts

@@ -9,15 +9,25 @@ 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', '56px', '56px', '56px', '56px', '160px'],
+  maxWidth: '160px',
+  transition: 'all 0.3s ease-in-out',
   height: '692px',
   flexDirection: 'column',
   borderRight: '1px solid #E7E9EE',
@@ -26,30 +36,36 @@ const sidebarIcons: SxStyleProp = {
   paddingBottom: '32px',
 }
 
+const linkContainer: SxStyleProp = {
+  minWidth: '100%',
+}
+
 const iconBox: SxStyleProp = {
   mt: ['16px'],
-  width: ['40px', '40px', '40px', '40px', '40px', '144px'],
-  paddingLeft: ['0', '0', '0', '0', '0', '8px'],
-  py: ['0', '0', '0', '0', '0', '10px'],
+  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',
-    'center',
-    'center',
-    'center',
-    'center',
-    'flex-start',
-  ],
+  justifyContent: 'flex-start',
   background: 'transparent',
   color: 'muted.0',
   cursor: 'pointer',
   ':hover': {
     background: '#F8F7FC',
-    color: '#E31C58',
+    color: '#000711',
     path: {
-      stroke: '#E31C58',
+      stroke: [
+        '#000711',
+        '#000711',
+        '#000711',
+        '#000711',
+        '#000711',
+        '#4A596B',
+      ],
     },
   },
 }
@@ -63,8 +79,8 @@ const iconBoxActive: SxStyleProp = {
 const sidebarIconsContainer: SxStyleProp = {
   width: '100%',
   flexDirection: 'column',
-  alignItems: ['center', 'center', 'center', 'center', 'center', 'flex-start'],
-  px: ['0', '0', '0', '0', '8px'],
+  alignItems: 'flex-start',
+  px: ['0', '0', '0', '8px'],
 }
 
 const icon: SxStyleProp = {
@@ -89,22 +105,36 @@ const sectionDivider: SxStyleProp = {
 }
 
 const iconTitle: SxStyleProp = {
-  display: ['none', 'none', 'none', 'none', 'none', 'initial'],
+  display: ['none', 'none', 'none', 'none', 'none', 'block'],
+  width: '100%',
   fontSize: '14px',
-  ml: '12px',
+  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,
 }