Merge pull request #8428 from weseek/fix/139755-current-page-item-in-page-tree-is-not-active

fix: Current page item in page tree is not active

apps/app/src/components/ItemsTree/Item.module.scss → apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.module.scss

@@ -1,7 +1,6 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-// TODO: relocate following styles into PageTreeItem.mdoule.scss after refactoring
-// https://redmine.weseek.co.jp/issues/127544
+// == Colors
 @include bs.color-mode(light) {
   .pagetree-item :global {
     .list-group-item-action {
@@ -13,6 +12,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .pagetree-item :global {
     .list-group-item-action {

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -24,6 +24,7 @@ import {
 
 import { Ellipsis } from './Ellipsis';
 
+import styles from './PageTreeItem.module.scss';
 
 const logger = loggerFactory('growi:cli:Item');
 

apps/app/src/components/TreeItem/SimpleItem.tsx

@@ -188,8 +188,7 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
       <li
         ref={itemRef}
         role="button"
-        className={`list-group-item list-group-item-action rounded border-0 py-0 pr-3 d-flex align-items-center
-        ${page.isTarget ? 'grw-pagetree-current-page-item' : ''}`}
+        className={`list-group-item border-0 py-0 pr-3 d-flex align-items-center text-muted ${page.isTarget ? 'active' : 'list-group-item-action'}`}
         id={page.isTarget ? 'grw-pagetree-current-page-item' : `grw-pagetree-list-${page._id}`}
         onClick={itemClickHandler}
       >

apps/app/src/styles/molecules/_list-group-item.scss

@@ -5,10 +5,20 @@
     --bs-list-group-action-hover-bg: var(--grw-primary-100);
     --bs-list-group-action-active-bg: var(--grw-primary-200);
   }
+
+  .list-group-item {
+    --bs-list-group-active-bg: var(--grw-primary-100);
+  }
 }
+
 @include bs.color-mode(dark) {
   .list-group-item-action {
     --bs-list-group-action-hover-bg: var(--grw-primary-800);
     --bs-list-group-action-active-bg: var(--grw-primary-700);
   }
+
+  .list-group-item {
+    --bs-list-group-active-bg: var(--grw-primary-800);
+  }
+
 }