add SidebarHead

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

@@ -8,6 +8,8 @@
     display: flex;
     flex-direction: row;
     height: 100%;
+
+    border-top : 1px solid var(--bs-border-color);
   }
 
   .grw-sidebar-content-header {

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

@@ -13,6 +13,7 @@ import {
 } from '~/stores/ui';
 
 import { ResizableArea } from './ResizableArea/ResizableArea';
+import { SidebarHead } from './SidebarHead';
 import { SidebarNav } from './SidebarNav';
 
 import styles from './Sidebar.module.scss';
@@ -91,7 +92,7 @@ export const SidebarSubstance = memo((): JSX.Element => {
   const disableResizing = isResizeDisabled || isDrawerMode || isCollapsedMode;
 
   return (
-    <div className="grw-navigation-wrap">
+    <div className="grw-navigation-wrap d-print-none">
       <SidebarNav />
       <div className="sidebar-contents-container">
         <ResizableArea
@@ -121,7 +122,8 @@ export const Sidebar = (): JSX.Element => {
   const isOpenClass = `${isDrawerOpened ? 'open' : ''}`;
 
   return (
-    <div className={`${grwSidebarClass} ${sidebarModeClass} ${isOpenClass} d-print-none`} data-testid="grw-sidebar">
+    <div className={`${grwSidebarClass} ${sidebarModeClass} ${isOpenClass}`} data-testid="grw-sidebar">
+      <SidebarHead />
       <SidebarSubstance />
     </div>
   );

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

@@ -0,0 +1,54 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use '../variables' as var;
+
+.grw-sidebar-head :global {
+  // declare $height with the same value as the sidebar nav width
+  $height: var.$grw-sidebar-nav-width;
+
+  // set position and z-index to prevent dropdowns covered by other element
+  position: relative;
+  z-index: bs.$zindex-fixed;
+
+  height: $height;
+  border-right : 1px solid var(--bs-border-color);
+
+  .grw-logo {
+    $width: var.$grw-sidebar-nav-width;
+    $logomark-width: 27.7px;
+    $logomark-height: 24px;
+
+    svg {
+      width: $width;
+      height: $height;
+      padding: (($height - $logomark-height) / 2) (($width - $logomark-width) / 2);
+    }
+  }
+}
+
+
+// == Colors
+.grw-sidebar-head :global {
+}
+@include bs.color-mode(light) {
+  .grw-sidebar-head :global {
+    background-color: var(
+      --grw-sidebar-head-bg,
+      var(
+        --grw-sidebar-nav-bg,
+        var(--grw-highlight-100)
+      )
+    );
+  }
+}
+@include bs.color-mode(dark) {
+  .grw-sidebar-head :global {
+    background-color: var(
+      --grw-sidebar-head-bg,
+      var(
+        --grw-sidebar-nav-bg,
+        var(--grw-highlight-800)
+      )
+    );
+  }
+}

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

@@ -0,0 +1,30 @@
+import React, {
+  FC, memo,
+} from 'react';
+
+import Link from 'next/link';
+
+import { useIsDefaultLogo } from '~/stores/context';
+
+import { SidebarBrandLogo } from '../SidebarBrandLogo';
+
+
+import styles from './SidebarHead.module.scss';
+
+
+export const SidebarHead: FC = memo(() => {
+
+  const { data: isDefaultLogo } = useIsDefaultLogo();
+
+  return (
+    <div className={styles['grw-sidebar-head']}>
+      {/* Brand Logo  */}
+      <div className="navbar-brand">
+        <Link href="/" className="grw-logo d-block">
+          <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
+        </Link>
+      </div>
+    </div>
+  );
+
+});

apps/app/src/components/Sidebar/SidebarHead/index.ts

@@ -0,0 +1 @@
+export * from './SidebarHead';

apps/app/src/components/Sidebar/SidebarNav/PrimaryItems.module.scss

@@ -1,6 +1,6 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-@use '~/styles/variables' as var;
+@use '../variables' as var;
 
 @use './button-styles';
 
@@ -21,6 +21,7 @@
 
 // Add indicator
 .grw-primary-items :global {
+  $btn-height: var.$grw-sidebar-primary-button-height;
   $btn-active-indicator-height: 34px;
 
   .btn {
@@ -37,7 +38,7 @@
         height: $btn-active-indicator-height;
         content: '';
         background-color: var(--bs-primary);
-        transform: translateY(#{(var.$grw-sidebar-nav-height - $btn-active-indicator-height) / 2});
+        transform: translateY(#{($btn-height - $btn-active-indicator-height) / 2});
       }
     }
   }

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

@@ -1,24 +1,17 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-@use '~/styles/variables' as var;
+@use '../variables' as var;
 
 .grw-sidebar-nav :global {
   // set position and z-index to prevent dropdowns covered by other element
   position: relative;
   z-index: bs.$zindex-fixed;
 
+  width: var.$grw-sidebar-nav-width;
   height: 100vh;
 
   border-right : 1px solid var(--bs-border-color);
 
-  .grw-logo {
-    svg {
-      width: var.$grw-logo-width;
-      height: var.$grw-logo-width;
-      padding: (var.$grw-logo-width - var.$grw-logomark-width) / 2;
-    }
-  }
-
   .grw-sidebar-nav-secondary-container {
     position: fixed;
     bottom: 1.5rem;

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

@@ -2,12 +2,7 @@ import React, {
   FC, memo,
 } from 'react';
 
-import Link from 'next/link';
-
-import { useIsDefaultLogo } from '~/stores/context';
-
 import { PageCreateButton } from '../PageCreateButton';
-import { SidebarBrandLogo } from '../SidebarBrandLogo';
 
 import { PrimaryItems } from './PrimaryItems';
 import { SecondaryItems } from './SecondaryItems';
@@ -16,18 +11,8 @@ import styles from './SidebarNav.module.scss';
 
 
 export const SidebarNav: FC = memo(() => {
-
-  const { data: isDefaultLogo } = useIsDefaultLogo();
-
   return (
     <div className={`grw-sidebar-nav ${styles['grw-sidebar-nav']}`}>
-      {/* Brand Logo  */}
-      <div className="navbar-brand">
-        <Link href="/" className="grw-logo d-block">
-          <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
-        </Link>
-      </div>
-
       <PageCreateButton />
 
       <div className="grw-sidebar-nav-primary-container" data-vrt-blackout-sidebar-nav>
@@ -38,5 +23,4 @@ export const SidebarNav: FC = memo(() => {
       </div>
     </div>
   );
-
 });

apps/app/src/components/Sidebar/SidebarNav/_button-styles.scss

@@ -1,8 +1,8 @@
-@use '~/styles/variables' as var;
+@use '../variables' as var;
 
 %btn-primary-basis {
   width: var.$grw-sidebar-nav-width;
-  height: var.$grw-sidebar-nav-height;
+  height: var.$grw-sidebar-primary-button-height;
   padding-top: .75rem;
   padding-bottom: .75rem;
   line-height: 1em;

apps/app/src/components/Sidebar/_variables.scss

@@ -0,0 +1,3 @@
+$grw-sidebar-nav-width: 48px;
+
+$grw-sidebar-primary-button-height: 50px;

apps/app/src/styles/_variables.scss

@@ -9,10 +9,4 @@ $grw-marker-green: #6f6;
 $grw-navbar-bottom-height: 48px;
 $grw-editor-navbar-bottom-height: 48px;
 
-$grw-sidebar-nav-width: 48px;
-$grw-sidebar-nav-height: 50px;
-
-$grw-logo-width: $grw-sidebar-nav-width;
-$grw-logomark-width: 24px;
-
 $grw-scroll-margin-top-in-view: 130px;