Refactoring

apps/app/src/client/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -81,6 +81,30 @@
   width: calc(100% - $toggle-collapse-button-width);
 }
 
+// ==Sidebar Head when Editor
+@include bs.color-mode(light) {
+  .on-editor-sidebar-head {
+    background-color: var(
+      --on-editor-sidebar-head-bg,
+      var(
+        --grw-sidebar-nav-bg,
+        var(--grw-highlight-100)
+      )
+    );
+  }
+}
+
+@include bs.color-mode(dark) {
+  .on-editor-sidebar-head {
+    background-color: var(
+      --on-editor-sidebar-head-bg,
+      var(
+        --grw-sidebar-nav-bg,
+        var(--grw-highlight-800)
+      )
+    );
+  }
+}
 
 // == Interaction
 @keyframes bounce-to-right {

apps/app/src/client/components/Sidebar/AppTitle/AppTitle.tsx

@@ -64,10 +64,12 @@ export const AppTitleOnSidebarHead = memo((): JSX.Element => {
   );
 });
 
-// export const AppTitleOnEditorSidebarHead = memo((): JSX.Element => {
-//   return (
-//     <AppTitleSubstance
-//       className={`${styles['on-sidebar-head']}`}
-//     />
-//   );
-// });
+export const AppTitleOnEditorSidebarHead = memo((): JSX.Element => {
+  return (
+    <div className={`${styles['on-editor-sidebar-head']}`}>
+      <AppTitleSubstance
+        className={`${styles['on-sidebar-head']}`}
+      />
+    </div>
+  );
+});

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

@@ -25,10 +25,10 @@ import {
 
 import { DrawerToggler } from '../Common/DrawerToggler';
 
-import { AppTitleOnSidebarHead, AppTitleOnSubnavigation } from './AppTitle/AppTitle';
+import { AppTitleOnSidebarHead, AppTitleOnEditorSidebarHead, AppTitleOnSubnavigation } from './AppTitle/AppTitle';
 import { ResizableAreaFallback } from './ResizableArea/ResizableAreaFallback';
 import type { ResizableAreaProps } from './ResizableArea/props';
-import { SidebarHead, EditorSidebarHead } from './SidebarHead';
+import { SidebarHead } from './SidebarHead';
 import { SidebarNav, type SidebarNavProps } from './SidebarNav';
 
 import 'simplebar-react/dist/simplebar.min.css';
@@ -273,7 +273,7 @@ export const Sidebar = (): JSX.Element => {
           { sidebarMode != null && !isCollapsedMode() && (
             <AppTitleOnSidebarHead hideAppTitle={shouldHideSiteName} />
           )}
-          {shouldShowEditorSidebarHead ? <EditorSidebarHead /> : <SidebarHead />}
+          {shouldShowEditorSidebarHead ? <AppTitleOnEditorSidebarHead /> : <SidebarHead />}
           <CollapsibleContainer Nav={SidebarNav} className="border-top">
             <SidebarContents />
           </CollapsibleContainer>

apps/app/src/client/components/Sidebar/SidebarHead/EditorSidebarHead.tsx

@@ -1,17 +0,0 @@
-import React, {
-  type FC, memo,
-} from 'react';
-
-import { AppTitleOnSidebarHead } from '../AppTitle/AppTitle';
-
-
-import styles from './SidebarHead.module.scss';
-
-
-export const EditorSidebarHead: FC = memo(() => {
-  return (
-    <div className={`${styles['grw-sidebar-head']}`}>
-      <AppTitleOnSidebarHead />
-    </div>
-  );
-});

apps/app/src/client/components/Sidebar/SidebarHead/index.ts

@@ -1,2 +1 @@
-export { SidebarHead } from './SidebarHead';
-export { EditorSidebarHead } from './EditorSidebarHead';
+export * from './SidebarHead';