improve css dom construction

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

@@ -215,58 +215,61 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   return (
     <>
-      <div
-        ref={(c) => { drag(c); drop(c) }}
-        className={`grw-pagetree-item d-flex align-items-center pr-1 ${page.isTarget ? 'grw-pagetree-is-target' : ''} ${isOver ? 'grw-pagetree-is-over' : ''}`}
-      >
-        <button
-          type="button"
-          className={`grw-pagetree-button btn ${isOpen ? 'grw-pagetree-open' : ''}`}
-          onClick={onClickLoadChildren}
+      <div className={`hogehoge ${isOver ? 'grw-pagetree-is-over' : ''}`}>
+
+        <div
+          ref={(c) => { drag(c); drop(c) }}
+          className={`grw-pagetree-item d-flex align-items-center pr-1 ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
         >
-          <div className="grw-triangle-icon">
-            <TriangleIcon />
+          <button
+            type="button"
+            className={`grw-pagetree-button btn ${isOpen ? 'grw-pagetree-open' : ''}`}
+            onClick={onClickLoadChildren}
+          >
+            <div className="grw-triangle-icon">
+              <TriangleIcon />
+            </div>
+          </button>
+          <a href={page._id} className="grw-pagetree-title-anchor flex-grow-1">
+            <p className={`text-truncate m-auto ${page.isEmpty && 'text-muted'}`}>{nodePath.basename(page.path as string) || '/'}</p>
+          </a>
+          <div className="grw-pagetree-count-wrapper">
+            <ItemCount />
           </div>
-        </button>
-        <a href={page._id} className="grw-pagetree-title-anchor flex-grow-1">
-          <p className={`text-truncate m-auto ${page.isEmpty && 'text-muted'}`}>{nodePath.basename(page.path as string) || '/'}</p>
-        </a>
-        <div className="grw-pagetree-count-wrapper">
-          <ItemCount />
-        </div>
-        <div className="grw-pagetree-control d-none">
-          <ItemControl
-            page={page}
-            onClickDeleteButtonHandler={onClickDeleteButtonHandler}
-            onClickPlusButtonHandler={() => { setNewPageInputShown(true) }}
-            isEnableActions={isEnableActions}
-            isDeletable={!page.isEmpty && !isTopPage(page.path as string)}
-          />
-        </div>
-      </div>
-
-      {isEnableActions && (
-        <ClosableTextInput
-          isShown={isNewPageInputShown}
-          placeholder={t('Input page name')}
-          onClickOutside={() => { setNewPageInputShown(false) }}
-          onPressEnter={onPressEnterHandler}
-          inputValidator={inputValidator}
-        />
-      )}
-      {
-        isOpen && hasChildren() && currentChildren.map(node => (
-          <div key={node.page._id} className="grw-pagetree-item-container">
-            <Item
+          <div className="grw-pagetree-control d-none">
+            <ItemControl
+              page={page}
+              onClickDeleteButtonHandler={onClickDeleteButtonHandler}
+              onClickPlusButtonHandler={() => { setNewPageInputShown(true) }}
               isEnableActions={isEnableActions}
-              itemNode={node}
-              isOpen={false}
-              targetPathOrId={targetPathOrId}
-              onClickDeleteByPage={onClickDeleteByPage}
+              isDeletable={!page.isEmpty && !isTopPage(page.path as string)}
             />
           </div>
-        ))
-      }
+        </div>
+
+        {isEnableActions && (
+          <ClosableTextInput
+            isShown={isNewPageInputShown}
+            placeholder={t('Input page name')}
+            onClickOutside={() => { setNewPageInputShown(false) }}
+            onPressEnter={onPressEnterHandler}
+            inputValidator={inputValidator}
+          />
+        )}
+        {
+          isOpen && hasChildren() && currentChildren.map(node => (
+            <div key={node.page._id} className="grw-pagetree-item-container">
+              <Item
+                isEnableActions={isEnableActions}
+                itemNode={node}
+                isOpen={false}
+                targetPathOrId={targetPathOrId}
+                onClickDeleteByPage={onClickDeleteByPage}
+              />
+            </div>
+          ))
+        }
+      </div>
     </>
   );
 

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

@@ -46,47 +46,55 @@ $grw-pagetree-item-padding-left: 10px;
   }
 
   // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
+  > .hogehoge {
+    // > .grw-pagetree-item {
+    //   background: blue;
+    > .grw-pagetree-item-container {
+      > .hogehoge {
+        > .grw-pagetree-item {
+          padding-left: $grw-pagetree-item-padding-left;
+          background: red;
+        }
+      }
+    }
+    // }
+  }
 
   > .grw-pagetree-item-container {
     > .grw-pagetree-item {
-      padding-left: $grw-pagetree-item-padding-left;
+      padding-left: $grw-pagetree-item-padding-left * 2;
     }
     > .grw-pagetree-item-container {
       > .grw-pagetree-item {
-        padding-left: $grw-pagetree-item-padding-left * 2;
+        padding-left: $grw-pagetree-item-padding-left * 3;
       }
       > .grw-pagetree-item-container {
         > .grw-pagetree-item {
-          padding-left: $grw-pagetree-item-padding-left * 3;
+          padding-left: $grw-pagetree-item-padding-left * 4;
         }
         > .grw-pagetree-item-container {
           > .grw-pagetree-item {
-            padding-left: $grw-pagetree-item-padding-left * 4;
+            padding-left: $grw-pagetree-item-padding-left * 5;
           }
           > .grw-pagetree-item-container {
             > .grw-pagetree-item {
-              padding-left: $grw-pagetree-item-padding-left * 5;
+              padding-left: $grw-pagetree-item-padding-left * 6;
             }
             > .grw-pagetree-item-container {
               > .grw-pagetree-item {
-                padding-left: $grw-pagetree-item-padding-left * 6;
+                padding-left: $grw-pagetree-item-padding-left * 7;
               }
               > .grw-pagetree-item-container {
                 > .grw-pagetree-item {
-                  padding-left: $grw-pagetree-item-padding-left * 7;
+                  padding-left: $grw-pagetree-item-padding-left * 8;
                 }
                 > .grw-pagetree-item-container {
                   > .grw-pagetree-item {
-                    padding-left: $grw-pagetree-item-padding-left * 8;
+                    padding-left: $grw-pagetree-item-padding-left * 9;
                   }
-                  > .grw-pagetree-item-container {
+                  .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;
-                      }
+                      padding-left: $grw-pagetree-item-padding-left * 10;
                     }
                   }
                 }

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -258,12 +258,12 @@ ul.pagination {
   // Pagetree
   .grw-pagetree {
     .grw-pagetree-item {
+      .grw-pagetree-is-over {
+        background: $gray-900;
+      }
       &.grw-pagetree-is-target {
         background: $bgcolor-list-hover;
       }
-      &.grw-pagetree-is-over {
-        background: $gray-900;
-      }
 
       .grw-pagetree-count {
         background: $bgcolor-sidebar-list-group;

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -170,13 +170,13 @@ $border-color: $border-color-global;
 
   // Pagetree
   .grw-pagetree {
+    .grw-pagetree-is-over {
+      background: $gray-200;
+    }
     .grw-pagetree-item {
       &.grw-pagetree-is-target {
         background: $bgcolor-list-hover;
       }
-      &.grw-pagetree-is-over {
-        background: $gray-200;
-      }
 
       .grw-pagetree-count {
         background: $bgcolor-sidebar-list-group;