diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx
index 2f442c9b6..bf12a1852 100644
--- a/packages/web/components/templates/navMenu/NavigationMenu.tsx
+++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx
@@ -57,6 +57,8 @@ export type Shortcut = {
label?: Label
join?: string
+
+ children?: Shortcut[]
}
type NavigationMenuProps = {
@@ -93,7 +95,20 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
zIndex: 5,
}}
>
+ {/* This gives a header when scrolling so the menu button is visible still */}
+
+
@@ -518,8 +533,38 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
[tree, router]
)
+ function countTotalShortcuts(shortcuts: Shortcut[]): number {
+ let total = 0
+
+ for (const shortcut of shortcuts) {
+ // Count the current shortcut
+ total++
+
+ // If the shortcut has children, recursively count them
+ if (shortcut.children && shortcut.children.length > 0) {
+ total += countTotalShortcuts(shortcut.children)
+ }
+ }
+
+ return total
+ }
+
+ const maximumHeight = useMemo(() => {
+ // recurse the tree
+ return countTotalShortcuts(data as Shortcut[]) * 36
+ }, [data])
+
+ console.log('maximumHeight: ', maximumHeight)
+
return (
-
+
{!isValidating && (
{
rowHeight={36}
initialOpenState={folderOpenState}
width={width}
- height={640}
+ height={maximumHeight}
>
{NodeRenderer}
)}
-
+
)
}