reorganize button styles

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

@@ -1,16 +1,15 @@
 @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 {
-  // declare $height with the same value as the sidebar nav width
-  $height: var.$grw-sidebar-nav-width;
-
-  height: $height;
-
   .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;
 
@@ -22,7 +21,16 @@
       padding: (($height - $logomark-height) / 2) (($width - $logomark-width) / 2);
     }
   }
+}
+
+// toggle button
+.grw-sidebar-head :global {
+  .btn-toggle-collapse {
+    @extend %btn-primary-basis;
 
+    $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
+    height: $height;
+  }
 }
 
 
@@ -83,3 +91,27 @@
     }
   }
 }
+
+
+// == Colors for the toggle button
+.grw-sidebar-head :global {
+  .btn.btn-toggle-collapse {
+    @extend %btn-primary-color-vars;
+  }
+}
+@include bs.color-mode(light) {
+  .grw-sidebar-head :global {
+    .btn-toggle-collapse {
+      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-600));
+      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-300));
+    }
+  }
+}
+@include bs.color-mode(dark) {
+  .grw-sidebar-head :global {
+    .btn-toggle-collapse {
+      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-500));
+      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
+    }
+  }
+}

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

@@ -26,8 +26,8 @@ export const SidebarHead: FC = memo(() => {
         <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 type="button" className="btn btn-primary btn-toggle-collapse p-2">
+          <span className="material-icons fs-2">first_page</span>
         </button>
       </div>
     </div>

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

@@ -1,13 +1,16 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use '../button-styles';
 @use '../variables' as var;
 
-@use './button-styles';
+@use './variables' as sidebarNavVar;
 
 .grw-primary-items :global {
   .btn {
     @extend %btn-primary-basis;
 
+    height: sidebarNavVar.$grw-sidebar-primary-button-height;
+
     i {
       opacity: 0.7;
 
@@ -21,7 +24,7 @@
 
 // Add indicator
 .grw-primary-items :global {
-  $btn-height: var.$grw-sidebar-primary-button-height;
+  $btn-height: sidebarNavVar.$grw-sidebar-primary-button-height;
   $btn-active-indicator-height: 34px;
 
   .btn {

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

@@ -1,11 +1,15 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-@use './button-styles';
+@use '../button-styles';
+
+@use './variables' as sidebarNavVar;
 
 .grw-secondary-items :global {
   .btn {
     @extend %btn-primary-basis;
 
+    height: sidebarNavVar.$grw-sidebar-primary-button-height;
+
     i {
       opacity: 0.6;
 

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

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

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

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

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

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