SVGSidebar: Improve style with depth

src/Components/SVGSidebar/SVGSidebar.tsx

@@ -8,7 +8,7 @@ interface ISVGSidebarProps {
 }
 
 export class SVGSidebar extends React.Component<ISVGSidebarProps> {
-  public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode {
+  public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode {
     const root = this.props.MainContainer;
     if (!root) {
       return null;
@@ -16,18 +16,24 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
 
     const queue = [root];
     const visited = new Set([root]);
+    let depth = 0;
     while (queue.length > 0) {
-      const container = queue.shift() as Container;
+      let size = queue.length;
 
-      handleContainer(container);
+      while (size-- > 0) {
+        const container = queue.shift() as Container;
 
-      container.props.children.forEach((child) => {
-        if (visited.has(child)) {
-          return;
-        }
-        visited.add(child);
-        queue.push(child);
-      });
+        handleContainer(container, depth);
+
+        container.props.children.forEach((child) => {
+          if (visited.has(child)) {
+            return;
+          }
+          visited.add(child);
+          queue.push(child);
+        });
+      }
+      depth++;
     }
   }
 
@@ -35,11 +41,12 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
 
     const containerRows: React.ReactNode[] = [];
-    this.iterateChilds((container: Container) => {
+    this.iterateChilds((container: Container, depth: number) => {
       const key = container.props.id.toString();
+      const text = '\t\t'.repeat(depth) + key;
       containerRows.push(
-        <button className='hover:bg-slate-600 transition-all sidebar-row' key={key} >
-          { key }
+        <button className='sidebar-row whitespace-pre text-left hover:bg-slate-600 transition-all' key={key}>
+          { text }
         </button>
       );
     });
@@ -52,7 +59,9 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
         <div className='bg-slate-500 sidebar-row'>
           Liste des éléments
         </div>
-        { containerRows }
+        <div className='overflow-auto divide-y divide-solid'>
+          { containerRows }
+        </div>
       </div>
     );
   }