Merge pull request #8562 from weseek/fix/142284-admin-return-button

Fix: Add Admin header return button

apps/app/src/components/Icons/GrowiLogo.jsx

@@ -1,34 +1,40 @@
 import React, { memo } from 'react';
 
+import styles from './GrowiLogo.module.scss';
+
+const moduleClass = styles['grw-logo'];
+
 const GrowiLogo = memo(() => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 226.44 196.11"
-  >
-    <path
-      d="M56.61 196.11L169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11z"
-      className="group2"
+  <div className={`${moduleClass}`}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 226.44 196.11"
     >
-    </path>
-    <path
+      <path
+        d="M56.61 196.11L169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11z"
+        className="group2"
+      >
+      </path>
+      <path
       // eslint-disable-next-line max-len
-      d="M75.48 98.05L94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M0 98.06L56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M75.48 163.43L56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43z"
-      className="group1"
-    >
-    </path>
-  </svg>
+        d="M75.48 98.05L94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05z"
+        className="group1"
+      >
+      </path>
+      <path
+        d="M0 98.06L56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06z"
+        className="group1"
+      >
+      </path>
+      <path
+        d="M75.48 163.43L56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43z"
+        className="group1"
+      >
+      </path>
+    </svg>
+  </div>
 ));
 
 GrowiLogo.displayName = 'GrowiLogo';

apps/app/src/components/Icons/GrowiLogo.module.scss

@@ -0,0 +1,26 @@
+@use '@growi/core/scss/growi-official-colors';
+
+// == Colors
+.grw-logo :global {
+  // set transition for fill
+  svg, svg * {
+    transition: fill 0.8s ease-out;
+  }
+
+  fill: var(--grw-app-title-color, var(--bs-tertiary-color));
+}
+
+.grw-logo {
+  &:global {
+    &:hover {
+      .group1 {
+        fill: growi-official-colors.$growi-green;
+      }
+
+      .group2 {
+        fill: growi-official-colors.$growi-blue;
+      }
+    }
+  }
+}
+

apps/app/src/components/Layout/AdminLayout.tsx

@@ -1,8 +1,11 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 
 import { AdminNavigation } from '../Admin/Common/AdminNavigation';
+import GrowiLogo from '../Icons/GrowiLogo';
 
 import { RawLayout } from './RawLayout';
 
@@ -29,7 +32,12 @@ const AdminLayout = ({
       <div className={`admin-page ${styles['admin-page']}`}>
 
         <header className="py-0 container-fluid">
-          <h1 className="p-3 fs-2">{componentTitle}</h1>
+          <h1 className="p-3 fs-2 d-flex align-items-center">
+            <Link href="/" className="d-block mb-1 me-2">
+              <GrowiLogo />
+            </Link>
+            {componentTitle}
+          </h1>
         </header>
         <div id="main" className="main">
           <div className="container-fluid">

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

@@ -85,27 +85,6 @@
 
 // == Colors
 .grw-app-title :global {
-  .grw-logo {
-    // set transition for fill
-    svg, svg * {
-      transition: fill 0.8s ease-out;
-    }
-
-    fill: var(--grw-app-title-color, var(--bs-tertiary-color));
-
-    &:hover {
-      svg {
-        .group1 {
-          fill: growi-official-colors.$growi-green;
-        }
-
-        .group2 {
-          fill: growi-official-colors.$growi-blue;
-        }
-      }
-    }
-  }
-
   .grw-site-name {
     --bs-link-color-rgb: var(--grw-app-title-color-rgb, var(--bs-tertiary-color-rgb));
     --bs-link-opacity: 0.5;