improve dom structure

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

@@ -215,9 +215,9 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   return (
     <div className={`grw-pagetree-item-container ${isOver ? 'grw-pagetree-is-over' : ''}`}>
-      <div
+      <li
         ref={(c) => { drag(c); drop(c) }}
-        className={`grw-pagetree-item d-flex align-items-center pr-1 ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
+        className={`list-group-item border-0 py-1 d-flex align-items-center  ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
       >
         <button
           type="button"
@@ -243,7 +243,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
             isDeletable={!page.isEmpty && !isTopPage(page.path as string)}
           />
         </div>
-      </div>
+      </li>
 
       {isEnableActions && (
         <ClosableTextInput

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

@@ -67,7 +67,7 @@ const renderByInitialNode = (
     initialNode: ItemNode, DeleteModal: JSX.Element, isEnableActions: boolean, targetPathOrId?: string, onClickDeleteByPage?: (page: IPageForPageDeleteModal) => void,
 ): JSX.Element => {
   return (
-    <div className="grw-pagetree p-3">
+    <ul className="grw-pagetree list-group p-3">
       <Item
         key={initialNode.page.path}
         targetPathOrId={targetPathOrId}
@@ -77,7 +77,7 @@ const renderByInitialNode = (
         onClickDeleteByPage={onClickDeleteByPage}
       />
       {DeleteModal}
-    </div>
+    </ul>
   );
 };
 

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

@@ -5,7 +5,7 @@ $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));
 
-  .grw-pagetree-item {
+  .list-group-item {
     &:hover {
       .grw-pagetree-control {
         display: flex !important;
@@ -47,54 +47,57 @@ $grw-pagetree-item-padding-left: 10px;
 
   // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
   > .grw-pagetree-item-container {
+    > .list-group-item {
+      padding-left: 0;
+    }
     > .grw-pagetree-item-children {
       > .grw-pagetree-item-container {
-        > .grw-pagetree-item {
+        > .list-group-item {
           padding-left: $grw-pagetree-item-padding-left;
         }
         > .grw-pagetree-item-children {
           > .grw-pagetree-item-container {
-            > .grw-pagetree-item {
+            > .list-group-item {
               padding-left: $grw-pagetree-item-padding-left * 2;
             }
             > .grw-pagetree-item-children {
               > .grw-pagetree-item-container {
-                > .grw-pagetree-item {
+                > .list-group-item {
                   padding-left: $grw-pagetree-item-padding-left * 3;
                 }
                 > .grw-pagetree-item-children {
                   > .grw-pagetree-item-container {
-                    > .grw-pagetree-item {
+                    > .list-group-item {
                       padding-left: $grw-pagetree-item-padding-left * 4;
                     }
                     > .grw-pagetree-item-children {
                       > .grw-pagetree-item-container {
-                        > .grw-pagetree-item {
+                        > .list-group-item {
                           padding-left: $grw-pagetree-item-padding-left * 5;
                         }
                         > .grw-pagetree-item-children {
                           > .grw-pagetree-item-container {
-                            > .grw-pagetree-item {
+                            > .list-group-item {
                               padding-left: $grw-pagetree-item-padding-left * 6;
                             }
                             > .grw-pagetree-item-children {
                               > .grw-pagetree-item-container {
-                                > .grw-pagetree-item {
+                                > .list-group-item {
                                   padding-left: $grw-pagetree-item-padding-left * 7;
                                 }
                                 > .grw-pagetree-item-children {
                                   > .grw-pagetree-item-container {
-                                    > .grw-pagetree-item {
+                                    > .list-group-item {
                                       padding-left: $grw-pagetree-item-padding-left * 8;
                                     }
                                     > .grw-pagetree-item-children {
                                       > .grw-pagetree-item-container {
-                                        > .grw-pagetree-item {
+                                        > .list-group-item {
                                           padding-left: $grw-pagetree-item-padding-left * 9;
                                         }
                                         .grw-pagetree-item-children {
                                           > .grw-pagetree-item-container {
-                                            > .grw-pagetree-item {
+                                            > .list-group-item {
                                               padding-left: $grw-pagetree-item-padding-left * 10;
                                             }
                                           }

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

@@ -260,7 +260,7 @@ ul.pagination {
     .grw-pagetree-is-over {
       background: $bgcolor-list-hover;
     }
-    .grw-pagetree-item {
+    .list-group-item {
       &.grw-pagetree-is-target {
         background: $bgcolor-list-hover;
       }

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

@@ -173,7 +173,7 @@ $border-color: $border-color-global;
     .grw-pagetree-is-over {
       background: $bgcolor-list-hover;
     }
-    .grw-pagetree-item {
+    .list-group-item {
       &.grw-pagetree-is-target {
         background: $bgcolor-list-hover;
       }

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

@@ -311,7 +311,7 @@ ul.pagination {
   }
 
   .grw-pagetree {
-    .grw-pagetree-item {
+    .list-group-item {
       .grw-pagetree-title-anchor {
         color: inherit;
       }