Add EditorSidebarHead

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

@@ -27,7 +27,7 @@ const AppTitleSubstance = memo((props: Props): JSX.Element => {
   const { data: isXlSize } = useIsDeviceLargerThanXl();
 
   const isEditorMode = editorMode === EditorMode.Editor;
-  const shouldHideTitle = isEditorMode && isXlSize; //
+  const isEditorXlMode = isEditorMode && isXlSize;
 
   return (
     <div className={`${styles['grw-app-title']} ${className} d-flex`}>
@@ -36,7 +36,7 @@ const AppTitleSubstance = memo((props: Props): JSX.Element => {
         <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
       </Link>
       <div className="flex-grow-1 d-flex align-items-center justify-content-between gap-3 overflow-hidden">
-        {!shouldHideTitle && (
+        {!isEditorXlMode && (
           <div id="grw-site-name" className="grw-site-name text-truncate">
             <Link href="/" className="fs-4">
               {appTitle}
@@ -65,5 +65,17 @@ export const AppTitleOnSubnavigation = memo((): JSX.Element => {
 });
 
 export const AppTitleOnSidebarHead = memo((): JSX.Element => {
-  return <AppTitleSubstance className={`position-absolute z-1 ${styles['on-sidebar-head']}`} />;
+  const { data: editorMode } = useEditorMode();
+  const { data: isXlSize } = useIsDeviceLargerThanXl();
+
+  const isEditorMode = editorMode === EditorMode.Editor;
+  const isEditorXlMode = isEditorMode && isXlSize;
+
+  const positionClass = isEditorXlMode ? '' : 'position-absolute z-1';
+
+  return (
+    <AppTitleSubstance
+      className={`${positionClass} ${styles['on-sidebar-head']}`}
+    />
+  );
 });

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

@@ -11,6 +11,7 @@ import { useIsomorphicLayoutEffect } from 'usehooks-ts';
 
 import { SidebarMode } from '~/interfaces/ui';
 import { useIsSearchPage } from '~/stores-universal/context';
+import { EditorMode, useEditorMode } from '~/stores-universal/ui';
 import {
   useDrawerOpened,
   useCollapsedContentsOpened,
@@ -19,15 +20,15 @@ import {
   useSidebarMode,
   useSidebarScrollerRef,
   useIsDeviceLargerThanMd,
+  useIsDeviceLargerThanXl,
 } from '~/stores/ui';
-import { EditorMode, useEditorMode } from '~/stores-universal/ui';
 
 import { DrawerToggler } from '../Common/DrawerToggler';
 
 import { AppTitleOnSidebarHead, AppTitleOnSubnavigation } from './AppTitle/AppTitle';
 import { ResizableAreaFallback } from './ResizableArea/ResizableAreaFallback';
 import type { ResizableAreaProps } from './ResizableArea/props';
-import { SidebarHead } from './SidebarHead';
+import { SidebarHead, EditorSidebarHead } from './SidebarHead';
 import { SidebarNav, type SidebarNavProps } from './SidebarNav';
 
 import 'simplebar-react/dist/simplebar.min.css';
@@ -234,9 +235,11 @@ export const Sidebar = (): JSX.Element => {
   const { data: isSearchPage } = useIsSearchPage();
   const { data: editorMode } = useEditorMode();
   const { data: isMdSize } = useIsDeviceLargerThanMd();
+  const { data: isXlSize } = useIsDeviceLargerThanXl();
 
   const isEditorMode = editorMode === EditorMode.Editor;
   const shouldHideTitle = isEditorMode && isMdSize && (isDrawerMode() || isCollapsedMode());
+  const shouldShowEditorHead = isEditorMode && isXlSize;
 
   // css styles
   const grwSidebarClass = styles['grw-sidebar'];
@@ -267,7 +270,7 @@ export const Sidebar = (): JSX.Element => {
       <DrawableContainer className={`${grwSidebarClass} ${modeClass} border-end flex-expand-vh-100`} divProps={{ 'data-testid': 'grw-sidebar' }}>
         <ResizableContainer>
           { sidebarMode != null && !isCollapsedMode() && <AppTitleOnSidebarHead /> }
-          <SidebarHead />
+          {shouldShowEditorHead ? <EditorSidebarHead /> : <SidebarHead />}
           <CollapsibleContainer Nav={SidebarNav} className="border-top">
             <SidebarContents />
           </CollapsibleContainer>

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

@@ -0,0 +1,17 @@
+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 +1,2 @@
-export * from './SidebarHead';
+export { SidebarHead } from './SidebarHead';
+export { EditorSidebarHead } from './EditorSidebarHead';