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,10 +16,14 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
 
     const queue = [root];
     const visited = new Set([root]);
+    let depth = 0;
     while (queue.length > 0) {
+      let size = queue.length;
+
+      while (size-- > 0) {
         const container = queue.shift() as Container;
 
-      handleContainer(container);
+        handleContainer(container, depth);
 
         container.props.children.forEach((child) => {
           if (visited.has(child)) {
@@ -29,17 +33,20 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
           queue.push(child);
         });
       }
+      depth++;
+    }
   }
 
   public render() {
     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,8 +59,10 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
         <div className='bg-slate-500 sidebar-row'>
           Liste des éléments
         </div>
+        <div className='overflow-auto divide-y divide-solid'>
           { containerRows }
         </div>
+      </div>
     );
   }
 }