Update and export INormalizedSidebarItem and use it in SidebarMenu

iterative · Dec 29, 2021 · a24e1d6 · a24e1d6
1 parent c127d19
commit a24e1d6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 18 deletions.
diff --git a/plugins/gatsby-theme-iterative-docs/src/sidebar.d.ts b/plugins/gatsby-theme-iterative-docs/src/sidebar.d.ts
@@ -1,4 +1,4 @@
-declare interface INormalizedSidebarItem {
+export interface INormalizedSidebarItem {
   label: string
   path: string
   source?: string
@@ -10,6 +10,7 @@ declare interface INormalizedSidebarItem {
     katacoda: string
   }
   children?: INormalizedSidebarItem[]
+  type?: string
 }
 
 declare const sidebar: INormalizedSidebarItem[]

diff --git a/src/components/Documentation/Layout/SidebarMenu/index.tsx b/src/components/Documentation/Layout/SidebarMenu/index.tsx
@@ -17,7 +17,9 @@ import {
   getParentsListFromPath,
   getPathWithSource
 } from '../../../../../plugins/gatsby-theme-iterative-docs/sidebar-helpers'
-import sidebar from '../../../../../plugins/gatsby-theme-iterative-docs/src/sidebar'
+import sidebar, {
+  INormalizedSidebarItem
+} from '../../../../../plugins/gatsby-theme-iterative-docs/src/sidebar'
 
 import 'perfect-scrollbar/css/perfect-scrollbar.css'
 import * as styles from './styles.module.css'
@@ -31,26 +33,15 @@ const ICONS: { [key: string]: React.FC<{ className?: string }> } = {
 }
 
 interface ISidebarMenuItemProps {
-  children?: Array<{ label: string; path: string; source: boolean | string }>
-  label: string
-  path: string
-  source: boolean | string
+  item: INormalizedSidebarItem
   onClick: (isLeafItemClicked: boolean) => void
   activePaths?: Array<string>
-  type?: string
-  style?: string
-  icon?: string
 }
 
 const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
-  children,
-  label,
-  path,
+  item: { children, label, path, style, icon, type },
   activePaths,
-  onClick,
-  style,
-  icon,
-  type
+  onClick
 }) => {
   const [isExpanded, setIsExpanded] = useState(
     activePaths && includes(activePaths, path)
@@ -154,7 +145,7 @@ const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
                 key={item.path}
                 activePaths={activePaths}
                 onClick={onClick}
-                {...item}
+                item={item}
               />
             ))}
           </Collapse>
@@ -233,7 +224,7 @@ const SidebarMenu: React.FC<ISidebarMenuProps> = ({ currentPath, onClick }) => {
                 includes(activePaths, item.path) ? activePaths : undefined
               }
               onClick={onClick}
-              {...item}
+              item={item}
             />
           ))}
         </div>