WIP

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

@@ -86,8 +86,8 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
         >
           <i className="icon-control-play"></i>
         </button>
-        <a href={page._id} className="d-block flex-grow-1">
-          <p className="grw-pagetree-title">{nodePath.basename(page.path as string) || '/'}</p>
+        <a href={page._id} className="flex-grow-1">
+          <p className="grw-pagetree-title m-auto">{nodePath.basename(page.path as string) || '/'}</p>
         </a>
         <div className="grw-pagetree-control">
           Ctrl

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

@@ -85,7 +85,7 @@ const ItemsTree: FC = () => {
 
   const isOpen = true;
   return (
-    <div className="grw-page-tree p-3">
+    <div className="grw-pagetree p-3">
       <Item key={(initialNode as ItemNode).page.path} itemNode={(initialNode as ItemNode)} isOpen={isOpen} />
     </div>
   );

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

@@ -30,6 +30,6 @@
 }
 
 // TODO: improve style
-.grw-prvt-legacy-pages {
-  border-top: solid 1px $border-color;
-}
+// .grw-prvt-legacy-pages {
+//   border-top: solid 1px $border-color;
+// }

packages/app/src/styles/_sidebar.scss

@@ -233,6 +233,12 @@
       font-size: 18px;
     }
   }
+
+  .grw-sidebar-content-footer {
+    position: fixed;
+    bottom: 0;
+    border-top: solid 1px $border-color;
+  }
 }
 
 // Dock Mode