Merge pull request #4925 from weseek/imprv/84051-make-pagetree-list

realize a hierarchical structure

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

@@ -218,7 +218,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
       )}
       {
         isOpen && hasChildren() && currentChildren.map(node => (
-          <div key={node.page._id} className="ml-3 mt-2">
+          <div key={node.page._id} className="grw-pagetree-item-container mt-2">
             <Item
               isEnableActions={isEnableActions}
               itemNode={node}

packages/app/src/styles/_page-tree.scss

@@ -1,5 +1,6 @@
 $grw-sidebar-content-header-height: 58px;
 $grw-sidebar-content-footer-height: 50px;
+$grw-pagetree-item-padding-left: 10px;
 
 .grw-pagetree {
   min-height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
@@ -55,4 +56,57 @@ $grw-sidebar-content-footer-height: 50px;
       }
     }
   }
+
+  // Set multiplied padding-left to each pagetree-item　to realize a hierarchical structure
+
+  > .grw-pagetree-item-container {
+    > .grw-pagetree-item {
+      padding-left: $grw-pagetree-item-padding-left;
+    }
+    > .grw-pagetree-item-container {
+      > .grw-pagetree-item {
+        padding-left: $grw-pagetree-item-padding-left * 2;
+      }
+      > .grw-pagetree-item-container {
+        > .grw-pagetree-item {
+          padding-left: $grw-pagetree-item-padding-left * 3;
+        }
+        > .grw-pagetree-item-container {
+          > .grw-pagetree-item {
+            padding-left: $grw-pagetree-item-padding-left * 4;
+          }
+          > .grw-pagetree-item-container {
+            > .grw-pagetree-item {
+              padding-left: $grw-pagetree-item-padding-left * 5;
+            }
+            > .grw-pagetree-item-container {
+              > .grw-pagetree-item {
+                padding-left: $grw-pagetree-item-padding-left * 6;
+              }
+              > .grw-pagetree-item-container {
+                > .grw-pagetree-item {
+                  padding-left: $grw-pagetree-item-padding-left * 7;
+                }
+                > .grw-pagetree-item-container {
+                  > .grw-pagetree-item {
+                    padding-left: $grw-pagetree-item-padding-left * 8;
+                  }
+                  > .grw-pagetree-item-container {
+                    > .grw-pagetree-item {
+                      padding-left: $grw-pagetree-item-padding-left * 9;
+                    }
+                    > .grw-pagetree-item-container {
+                      > .grw-pagetree-item {
+                        padding-left: $grw-pagetree-item-padding-left * 10;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }