WIP: impl AppTitle

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

@@ -0,0 +1,76 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use '@growi/core/scss/growi-official-colors';
+
+@use '../button-styles';
+@use '../variables' as var;
+
+// GROWI Logo
+.grw-app-title :global {
+  .grw-logo {
+    $width: var.$grw-sidebar-nav-width;
+    $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
+    $logomark-width: 27.7px;
+    $logomark-height: 24px;
+
+    width: $width;
+
+    svg {
+      width: $width;
+      height: $height;
+      padding: (($height - $logomark-height) / 2) (($width - $logomark-width) / 2);
+    }
+  }
+}
+
+
+// Collapsed Mode
+.grw-app-title {
+  &:global {
+    &.collapsed {
+      left: 48px;
+    }
+  }
+}
+
+// == Colors
+.grw-app-title :global {
+  .grw-logo {
+    // set transition for fill
+    svg, svg * {
+      transition: fill 0.8s ease-out;
+    }
+
+    &:hover {
+      svg {
+        .group1 {
+          fill: growi-official-colors.$growi-green;
+        }
+
+        .group2 {
+          fill: growi-official-colors.$growi-blue;
+        }
+      }
+    }
+  }
+}
+@include bs.color-mode(light) {
+  .grw-app-title :global {
+    .grw-logo {
+      fill: var(--grw-logo-color, var(--bs-gray-500));
+    }
+    .grw-site-name {
+      color: var(--grw-app-title-color, var(--bs-gray-600));
+    }
+  }
+}
+@include bs.color-mode(dark) {
+  .grw-app-title :global {
+    .grw-logo {
+      fill: var(--grw-logo-color, var(--bs-gray-600));
+    }
+    .grw-site-name {
+      color: var(--grw-app-title-color, var(--bs-gray-500));
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+import React, {
+  type FC, memo,
+} from 'react';
+
+import Link from 'next/link';
+
+import { useIsDefaultLogo } from '~/stores/context';
+import { useSidebarMode } from '~/stores/ui';
+
+import { SidebarBrandLogo } from '../SidebarBrandLogo';
+
+import styles from './AppTitle.module.scss';
+
+
+export const AppTitle: FC = memo(() => {
+
+  const { isCollapsedMode } = useSidebarMode();
+
+  const { data: isDefaultLogo } = useIsDefaultLogo();
+
+  const collapsedModeClass = isCollapsedMode() ? 'collapsed' : '';
+
+  return (
+    <div className={`${styles['grw-app-title']} ${collapsedModeClass} position-absolute d-flex justify-content-end w-100`}>
+      {/* Brand Logo  */}
+      <Link href="/" className="grw-logo d-block">
+        <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
+      </Link>
+      <div className="flex-grow-1 d-flex align-items-center justify-content-between gap-3 overflow-hidden">
+        <div className="grw-site-name text-truncate">
+          <span className="fs-4">GROWI</span>
+        </div>
+      </div>
+    </div>
+  );
+
+});

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

@@ -15,6 +15,7 @@ import {
   useSidebarMode,
 } from '~/stores/ui';
 
+import { AppTitle } from './AppTitle/AppTitle';
 import { ResizableArea } from './ResizableArea/ResizableArea';
 import { SidebarHead } from './SidebarHead';
 import { SidebarNav, type SidebarNavProps } from './SidebarNav';
@@ -186,13 +187,16 @@ export const Sidebar = (): JSX.Element => {
   }
 
   return (
-    <DrawableContainer className={`${grwSidebarClass} ${modeClass} border-end vh-100`} data-testid="grw-sidebar">
-      <ResizableContainer>
-        <SidebarHead />
-        <CollapsibleContainer Nav={SidebarNav} className="border-top">
-          <SidebarContents />
-        </CollapsibleContainer>
-      </ResizableContainer>
-    </DrawableContainer>
+    <>
+      <AppTitle />
+      <DrawableContainer className={`${grwSidebarClass} ${modeClass} border-end vh-100`} data-testid="grw-sidebar">
+        <ResizableContainer>
+          <SidebarHead />
+          <CollapsibleContainer Nav={SidebarNav} className="border-top">
+            <SidebarContents />
+          </CollapsibleContainer>
+        </ResizableContainer>
+      </DrawableContainer>
+    </>
   );
 };

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

@@ -1,66 +1,7 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-@use '@growi/core/scss/growi-official-colors';
-
-@use '../button-styles';
-@use '../variables' as var;
-
-// GROWI Logo
-.grw-sidebar-head :global {
-  .grw-logo {
-    $width: var.$grw-sidebar-nav-width;
-    $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
-    $logomark-width: 27.7px;
-    $logomark-height: 24px;
-
-    width: $width;
-
-    svg {
-      width: $width;
-      height: $height;
-      padding: (($height - $logomark-height) / 2) (($width - $logomark-width) / 2);
-    }
-  }
-}
-
-// Popout for the collapsed mode
-.grw-sidebar-head :global {
-  .popout {
-    position: absolute;
-
-    &.grw-logo {
-      left: var.$grw-sidebar-nav-width;
-    }
-
-    &.grw-app-title {
-      left: var.$grw-sidebar-nav-width * 2;
-    }
-  }
-}
-
-
 
 // == Colors
-.grw-sidebar-head :global {
-  .grw-logo {
-    // set transition for fill
-    svg, svg * {
-      transition: fill 0.8s ease-out;
-    }
-
-    &:hover {
-      svg {
-        .group1 {
-          fill: growi-official-colors.$growi-green;
-        }
-
-        .group2 {
-          fill: growi-official-colors.$growi-blue;
-        }
-      }
-    }
-  }
-}
 @include bs.color-mode(light) {
   .grw-sidebar-head :global {
     background-color: var(
@@ -70,13 +11,6 @@
         var(--grw-highlight-100)
       )
     );
-
-    .grw-logo {
-      fill: var(--grw-logo-color, var(--bs-gray-500));
-    }
-    .grw-app-title {
-      color: var(--grw-app-title-color, var(--bs-gray-600));
-    }
   }
 }
 @include bs.color-mode(dark) {
@@ -88,12 +22,5 @@
         var(--grw-highlight-800)
       )
     );
-
-    .grw-logo {
-      fill: var(--grw-logo-color, var(--bs-gray-600));
-    }
-    .grw-app-title {
-      color: var(--grw-app-title-color, var(--bs-gray-500));
-    }
   }
 }

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

@@ -2,37 +2,14 @@ import React, {
   type FC, memo,
 } from 'react';
 
-import Link from 'next/link';
-
-import { useIsDefaultLogo } from '~/stores/context';
-import { useCollapsedContentsOpened } from '~/stores/ui';
-
-import { SidebarBrandLogo } from '../SidebarBrandLogo';
-
 import { ToggleCollapseButton } from './ToggleCollapseButton';
 
 import styles from './SidebarHead.module.scss';
 
 
 export const SidebarHead: FC = memo(() => {
-
-  // const { data: isCollapsedMode, mutate: mutateCollapsedMode } = useCollapsedMode();
-  const { mutate: mutateCollapsedContentsOpened } = useCollapsedContentsOpened();
-
-  const { data: isDefaultLogo } = useIsDefaultLogo();
-
   return (
     <div className={`${styles['grw-sidebar-head']} d-flex justify-content-end w-100`}>
-      {/* Brand Logo  */}
-      {/* <Link href="/" className="grw-logo d-block">
-        <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
-      </Link> */}
-      {/* <div className="flex-grow-1 d-flex align-items-center justify-content-between gap-3 overflow-hidden">
-        <div className="grw-app-title text-truncate">
-          <span className="fs-4">GROWI</span>
-        </div>
-        <ToggleCollapseButton />
-      </div> */}
       <ToggleCollapseButton />
     </div>
   );