From 4f1de4b7b0462b33eb009bdf7a2be5b5f45530dd Mon Sep 17 00:00:00 2001
From: isqua <isqua@isqua.ru>
Date: Tue, 24 Oct 2023 01:34:24 +0300
Subject: [PATCH] refactor: simplify sub menu rendering by passing sub items as
 children

---
 src/components/Menu/Section/Section.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Menu/Section/Section.tsx b/src/components/Menu/Section/Section.tsx
index ae27bff..b784581 100644
--- a/src/components/Menu/Section/Section.tsx
+++ b/src/components/Menu/Section/Section.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, type PropsWithChildren } from 'react'
 import { type MenuItem, type PageId, type SectionHighlight } from '../../../features/toc'
 import { useIsLoading, useMenuItems } from '../Context/hooks'
 import { Item } from '../Item/Item'
@@ -9,11 +9,10 @@ type SectionProps = {
     highlight?: SectionHighlight
 }
 
-type SubMenuProps = {
+type ItemToggleProps = PropsWithChildren<{
     item: MenuItem
-    level: number
     isLoading: boolean
-}
+}>
 
 export function Section({ parentId, level, highlight }: SectionProps): JSX.Element {
     const isLoading = useIsLoading()
@@ -26,16 +25,19 @@ export function Section({ parentId, level, highlight }: SectionProps): JSX.Eleme
                     return (<Item isLoading={isLoading} key={item.id} item={item} />)
                 }
 
+                const subMenuHighlight = item.highlight === 'active' ? 'child' : item.highlight
+
                 return (
-                    <SubMenu isLoading={isLoading} key={item.id} item={item} level={level + 1} />
+                    <ItemToggle isLoading={isLoading} key={item.id} item={item}>
+                        <Section highlight={subMenuHighlight} parentId={item.id} level={level + 1} />
+                    </ItemToggle>
                 )
             })}
         </>
     )
 }
 
-function SubMenu({ item, level, isLoading }: SubMenuProps): JSX.Element {
-    const subMenuHighlight = item.highlight === 'active' ? 'child' : item.highlight
+function ItemToggle({ item, children, isLoading }: ItemToggleProps): JSX.Element {
     const [ isOpen, setOpen ]  = useState(isLoading ? true : item.defaultOpenState)
 
     const onToggle = () => {
@@ -51,9 +53,7 @@ function SubMenu({ item, level, isLoading }: SubMenuProps): JSX.Element {
                 open={isOpen}
                 onToggle={onToggle}
             />
-            {isOpen && (
-                <Section highlight={subMenuHighlight} parentId={item.id} level={level} />
-            )}
+            {isOpen && children}
         </>
     )
 }