Fix layout when using custom logo

weseek · Jan 29, 2025 · f1adf7e · f1adf7e
1 parent f0de645
commit f1adf7e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 17 deletions.
diff --git a/apps/app/src/client/components/Sidebar/AppTitle/AppTitle.module.scss b/apps/app/src/client/components/Sidebar/AppTitle/AppTitle.module.scss
@@ -5,21 +5,6 @@
 
 // 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);
-    }
-  }
-
   .confidential-tooltip {
     max-width: 180px;
   }

diff --git a/apps/app/src/client/components/Sidebar/SidebarBrandLogo.module.scss b/apps/app/src/client/components/Sidebar/SidebarBrandLogo.module.scss
@@ -0,0 +1,19 @@
+@use '~/styles/variables' as var;
+
+// GROWI Logo
+.grw-logo {
+  $width: var.$grw-sidebar-nav-width;
+  $height: var.$grw-sidebar-nav-width;
+  $logomark-width: 27.7px;
+  $logomark-height: 24px;
+
+  width: $width;
+
+  :global {
+    svg {
+      width: $width;
+      height: $height;
+      padding: (($height - $logomark-height) / 2) (($width - $logomark-width) / 2);
+    }
+  }
+}
diff --git a/apps/app/src/client/components/Sidebar/SidebarBrandLogo.tsx b/apps/app/src/client/components/Sidebar/SidebarBrandLogo.tsx
@@ -2,6 +2,8 @@ import { memo } from 'react';
 
 import GrowiLogo from '../../../components/Common/GrowiLogo';
 
+import styles from './SidebarBrandLogo.module.scss';
+
 type SidebarBrandLogoProps = {
   isDefaultLogo?: boolean
 }
@@ -10,7 +12,7 @@ export const SidebarBrandLogo = memo((props: SidebarBrandLogoProps) => {
   const { isDefaultLogo } = props;
 
   return isDefaultLogo
-    ? <GrowiLogo />
+    ? <div className={styles['grw-logo']}><GrowiLogo /></div>
     // eslint-disable-next-line @next/next/no-img-element
     : (<div><img src="/attachment/brand-logo" alt="custom logo" className="picture picture-lg p-2" id="settingBrandLogo" /></div>);
 });

diff --git a/apps/app/src/client/components/Sidebar/SidebarHead/SidebarHead.tsx b/apps/app/src/client/components/Sidebar/SidebarHead/SidebarHead.tsx
@@ -23,7 +23,7 @@ export const SidebarHead: FC = memo(() => {
       {editorMode === EditorMode.Editor ? (
         <Link
           href="/"
-          className="grw-editor-logo p-2"
+          className="grw-editor-logo"
           data-testid="btn-brand-logo"
         >
           <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />