Merge pull request #2073 from ashiishme/fix-dropdown-toggle

feat: sidebar dropdown toggle with subpages #1427
iterative · Feb 16, 2021 · 7d88307 · 7d88307
2 parents 0b4b4b7 + 99fadb2
commit 7d88307
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 29 deletions.
diff --git a/src/components/Documentation/Layout/SidebarMenu/index.tsx b/src/components/Documentation/Layout/SidebarMenu/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState, SyntheticEvent } from 'react'
 import { useLocation } from '@reach/router'
 import cn from 'classnames'
 import { Collapse } from 'react-collapse'
@@ -50,11 +50,33 @@ const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
   icon,
   type
 }) => {
-  const isActive = activePaths && includes(activePaths, path)
+  const [isExpanded, setIsExpanded] = useState(
+    activePaths && includes(activePaths, path)
+  )
+
+  useEffect(() => {
+    setIsExpanded(activePaths && includes(activePaths, path))
+  }, [activePaths])
+
   const isRootParent =
     activePaths && activePaths.length > 1 && activePaths[0] === path
+
   const isLeafItem = children === undefined || children.length === 0
-  const currentLevelOnClick = (): void => onClick(isLeafItem)
+
+  const currentLevelOnClick = (
+    event: SyntheticEvent<HTMLAnchorElement>
+  ): void => {
+    if (event.currentTarget.getAttribute('aria-current') === 'page') {
+      event.preventDefault()
+      setIsExpanded(!isExpanded)
+    }
+    onClick(isLeafItem)
+  }
+
+  const bulletIconClick = (event: SyntheticEvent<HTMLSpanElement>): void => {
+    event.preventDefault()
+    setIsExpanded(!isExpanded)
+  }
 
   // Fetch a special icon if one is defined
   const IconComponent = icon && ICONS[icon]
@@ -64,7 +86,7 @@ const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
 
   const className = cn(
     styles.sectionLink,
-    isActive && styles.active,
+    isExpanded && styles.active,
     isRootParent && 'docSearch-lvl0',
     'link-with-focus',
     style ? styles[style] : styles.sidebarDefault,
@@ -73,6 +95,12 @@ const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
     icon ? undefined : styles.withDefaultBullet
   )
 
+  const bulletIconClassName = cn(
+    styles.sidebarDefaultBullet,
+    isExpanded && styles.active,
+    isLeafItem && styles.sidebarLeafBullet
+  )
+
   const parentElement =
     type === 'external' ? (
       <Link
@@ -82,7 +110,11 @@ const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
         onClick={currentLevelOnClick}
         target="_blank"
       >
-        {iconElement}
+        {iconElement ? (
+          iconElement
+        ) : (
+          <span className={bulletIconClassName}></span>
+        )}
         {label} <ExternalLinkIcon />
       </Link>
     ) : (
@@ -92,7 +124,17 @@ const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
         className={className}
         onClick={currentLevelOnClick}
       >
-        {iconElement}
+        {iconElement ? (
+          iconElement
+        ) : (
+          <span
+            className={bulletIconClassName}
+            onClick={bulletIconClick}
+            onKeyDown={bulletIconClick}
+            role="button"
+            tabIndex={0}
+          ></span>
+        )}
         {label}
       </Link>
     )
@@ -101,8 +143,8 @@ const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
     <>
       {parentElement}
       {children && (
-        <span hidden={!isActive}>
-          <Collapse isOpened={!!isActive}>
+        <span hidden={!isExpanded}>
+          <Collapse isOpened={!!isExpanded}>
             {children.map(item => (
               <SidebarMenuItem
                 key={item.path}

diff --git a/src/components/Documentation/Layout/SidebarMenu/styles.module.css b/src/components/Documentation/Layout/SidebarMenu/styles.module.css
@@ -20,7 +20,7 @@
   }
 
   :global(.ReactCollapse--collapse) {
-    transition: height 250ms;
+    transition: height 500ms;
     padding-left: 10px;
   }
 }
@@ -63,27 +63,10 @@
 
   &.active {
     color: var(--color-gray-hover);
-  }
-}
-
-.withDefaultBullet {
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 9px;
-    display: block;
-    height: 8px;
-    width: 8px;
-    background: url('/img/triangle_dark.svg') no-repeat center center;
-  }
-
-  &.active::before {
-    animation: rotateIcon 0.5s forwards;
-  }
 
-  &.leafItem::before {
-    background: url('/img/default_bullet_dark.svg') no-repeat center center;
+    .sidebarDefaultBullet {
+      animation: rotateIcon 0.5s forwards;
+    }
   }
 }
 
@@ -106,3 +89,28 @@
   top: 0.5rem;
   left: -0.08rem;
 }
+
+.sidebarDefaultBullet {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 9px;
+  display: block;
+  height: 8px;
+  width: 8px;
+  background: url('/img/triangle_dark.svg') no-repeat center center;
+  transition: 0.5s all;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    transform: scale(1.5);
+  }
+
+  &.sidebarLeafBullet {
+    background: url('/img/default_bullet_dark.svg') no-repeat center center;
+    transform: unset;
+  }
+}