add logo and truncatable app title

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

@@ -1,5 +1,6 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use '@growi/core/scss/growi-official-colors';
 @use '../variables' as var;
 
 .grw-sidebar-head :global {
@@ -21,11 +22,30 @@
       padding: (($height - $logomark-height) / 2) (($width - $logomark-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 {
@@ -36,6 +56,13 @@
         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) {
@@ -47,5 +74,12 @@
         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

@@ -17,14 +17,19 @@ export const SidebarHead: FC = memo(() => {
   const { data: isDefaultLogo } = useIsDefaultLogo();
 
   return (
-    <div className={`${styles['grw-sidebar-head']} d-flex justify-content-between`}>
+    <div className={`${styles['grw-sidebar-head']} d-flex w-100`}>
       {/* Brand Logo  */}
       <Link href="/" className="grw-logo d-block">
         <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
       </Link>
-      <button type="button" className="btn btn-secondary btn-lg">
-        <span className="material-icons">first_page</span>
-      </button>
+      <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>
+        <button type="button" className="btn btn-secondary btn-lg">
+          <span className="material-icons">first_page</span>
+        </button>
+      </div>
     </div>
   );