Modified

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -1,5 +1,4 @@
-import React, { memo, useState } from 'react';
-import { IPage } from '../../../interfaces/page';
+import React, { memo } from 'react';
 import { ItemNode } from './ItemNode';
 
 
@@ -13,7 +12,7 @@ const Item = memo<ItemProps>((props: ItemProps) => {
 
   const { page, children, isPartialChildren } = itemNode;
 
-  // TODO: fetch data if isPartialChildren
+  // TODO: fetch children if isPartialChildren
 
   if (page == null) {
     return null;

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC } from 'react';
 
 import { IPage } from '../../../interfaces/page';
 import { ItemNode } from './ItemNode';
@@ -33,7 +33,11 @@ const generateInitialTreeFromAncestors = (ancestors: Partial<IPage>[]): ItemNode
   const rootPage = ancestors[ancestors.length - 1]; // the last item is the root
   if (rootPage?.path !== '/') throw Error('/ not exist in ancestors');
 
-  const ancestorNodes = ancestors.map((page): ItemNode => new ItemNode(page, [], true));
+  const ancestorNodes = ancestors.map((page, i): ItemNode => {
+    // isPartialChildren will be false for the target page
+    const isPartialChildren = i !== 0;
+    return new ItemNode(page, [], isPartialChildren);
+  });
 
   const rootNode = ancestorNodes.reduce((child, parent) => {
     parent.children = [child];