Merge pull request #4876 from weseek/imprv/83624-animate-triangle-icon

Imprv/83624 animate triangle icon

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

@@ -177,7 +177,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   const opacityStyle = { opacity: 1.0 };
   if (page.isTarget) opacityStyle.opacity = 0.7;
 
-  const buttonClass = isOpen ? 'rotate' : '';
+  const buttonClass = isOpen ? 'grw-pagetree-open' : '';
 
   return (
     <>

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

@@ -14,8 +14,14 @@
 
     .grw-pagetree-button {
       background-color: transparent;
+      transition: all 0.2s ease-out;
+      transform: rotate(0deg);
 
-      &.rotate {
+      &:focus {
+        box-shadow: none;
+      }
+
+      &.grw-pagetree-open {
         transform: rotate(90deg);
       }
     }