relocate AppTitle

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

@@ -24,15 +24,23 @@
 }
 
 
-// Collapsed Mode
-.grw-app-title {
-  &:global {
-    &.collapsed {
-      left: 48px;
-    }
-  }
+// == Location
+.on-subnavigation {
+  $grw-contextual-sub-navigation-width: 500px;
+
+  left: var.$grw-sidebar-nav-width;
+  // set width for truncation
+  width: calc(100vw - $grw-contextual-sub-navigation-width);
 }
 
+.on-sidebar-head {
+  $toggle-collapse-button-width: 50px;
+
+  // set width for truncation
+  width: calc(100% - $toggle-collapse-button-width);
+}
+
+
 // == Colors
 .grw-app-title :global {
   .grw-logo {

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

@@ -1,27 +1,27 @@
-import React, {
-  type FC, memo,
-} from 'react';
+import React, { memo } from 'react';
 
 import Link from 'next/link';
 
-import { useIsDefaultLogo } from '~/stores/context';
-import { useSidebarMode } from '~/stores/ui';
+import { useAppTitle, useIsDefaultLogo } from '~/stores/context';
 
 import { SidebarBrandLogo } from '../SidebarBrandLogo';
 
 import styles from './AppTitle.module.scss';
 
 
-export const AppTitle: FC = memo(() => {
+type Props = {
+  className?: string,
+}
 
-  const { isCollapsedMode } = useSidebarMode();
+const AppTitleSubstance = memo((props: Props): JSX.Element => {
 
-  const { data: isDefaultLogo } = useIsDefaultLogo();
+  const { className } = props;
 
-  const collapsedModeClass = isCollapsedMode() ? 'collapsed' : '';
+  const { data: isDefaultLogo } = useIsDefaultLogo();
+  const { data: appTitle } = useAppTitle();
 
   return (
-    <div className={`${styles['grw-app-title']} ${collapsedModeClass} position-absolute d-flex justify-content-end w-100`}>
+    <div className={`${styles['grw-app-title']} ${className} d-flex d-edit-none`}>
       {/* Brand Logo  */}
       <Link href="/" className="grw-logo d-block">
         <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
@@ -29,11 +29,18 @@ export const AppTitle: FC = memo(() => {
       <div className="flex-grow-1 d-flex align-items-center justify-content-between gap-3 overflow-hidden">
         <div className="grw-site-name text-truncate">
           <Link href="/" className="fs-4">
-            GROWI
+            {appTitle}
           </Link>
         </div>
       </div>
     </div>
   );
+});
+
+export const AppTitleOnSubnavigation = memo((): JSX.Element => {
+  return <AppTitleSubstance className={`position-absolute ${styles['on-subnavigation']}`} />;
+});
 
+export const AppTitleOnSidebarHead = memo((): JSX.Element => {
+  return <AppTitleSubstance className={`position-absolute z-1 ${styles['on-sidebar-head']}`} />;
 });

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

@@ -15,7 +15,7 @@ import {
   useSidebarMode,
 } from '~/stores/ui';
 
-import { AppTitle } from './AppTitle/AppTitle';
+import { AppTitleOnSidebarHead, AppTitleOnSubnavigation } from './AppTitle/AppTitle';
 import { ResizableArea } from './ResizableArea/ResizableArea';
 import { SidebarHead } from './SidebarHead';
 import { SidebarNav, type SidebarNavProps } from './SidebarNav';
@@ -27,7 +27,7 @@ const SidebarContents = dynamic(() => import('./SidebarContents').then(mod => mo
 
 
 const resizableAreaMinWidth = 348;
-const resizableAreaCollapsedWidth = 48;
+const sidebarNavCollapsedWidth = 48;
 
 
 type ResizableContainerProps = {
@@ -68,7 +68,7 @@ const ResizableContainer = memo((props: ResizableContainerProps): JSX.Element =>
       setResizableAreaWidth(undefined);
     }
     else if (isCollapsedMode()) {
-      setResizableAreaWidth(resizableAreaCollapsedWidth);
+      setResizableAreaWidth(sidebarNavCollapsedWidth);
     }
     else {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -168,7 +168,7 @@ const DrawableContainer = memo((props: DrawableContainerProps): JSX.Element => {
 
 export const Sidebar = (): JSX.Element => {
 
-  const { data: sidebarMode } = useSidebarMode();
+  const { data: sidebarMode, isCollapsedMode } = useSidebarMode();
 
   // css styles
   const grwSidebarClass = styles['grw-sidebar'];
@@ -188,9 +188,10 @@ export const Sidebar = (): JSX.Element => {
 
   return (
     <>
-      <AppTitle />
+      { isCollapsedMode() && <AppTitleOnSubnavigation /> }
       <DrawableContainer className={`${grwSidebarClass} ${modeClass} border-end vh-100`} data-testid="grw-sidebar">
         <ResizableContainer>
+          { !isCollapsedMode() && <AppTitleOnSidebarHead /> }
           <SidebarHead />
           <CollapsibleContainer Nav={SidebarNav} className="border-top">
             <SidebarContents />