devide components

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

@@ -23,16 +23,6 @@
   }
 }
 
-// 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;
-  }
-}
-
 
 // == Colors
 .grw-sidebar-head :global {
@@ -91,27 +81,3 @@
     }
   }
 }
-
-
-// == 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

@@ -1,24 +1,30 @@
 import React, {
-  FC, memo,
+  type FC, memo,
 } from 'react';
 
 import Link from 'next/link';
 
 import { useIsDefaultLogo } from '~/stores/context';
+import { useCollapsedContentsOpened, useCollapsedMode } from '~/stores/ui';
 
 import { SidebarBrandLogo } from '../SidebarBrandLogo';
 
+import { ToggleCollapseButton } from './ToggleCollapseButton';
 
 import styles from './SidebarHead.module.scss';
 
 
 export const SidebarHead: FC = memo(() => {
 
+  const { data: isCollapsedMode, mutate: mutateCollapsedMode } = useCollapsedMode();
+  const { mutate: mutateCollapsedContentsOpened } = useCollapsedContentsOpened();
+
   const { data: isDefaultLogo } = useIsDefaultLogo();
 
   return (
     <div className={`${styles['grw-sidebar-head']} d-flex w-100`}>
       {/* Brand Logo  */}
+      <ToggleCollapseButton />
       <Link href="/" className="grw-logo d-block">
         <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
       </Link>
@@ -26,9 +32,7 @@ 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-primary btn-toggle-collapse p-2">
-          <span className="material-icons fs-2">first_page</span>
-        </button>
+        <ToggleCollapseButton />
       </div>
     </div>
   );

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

@@ -0,0 +1,40 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use '../button-styles';
+@use '../variables' as var;
+
+.btn-toggle-collapse :global {
+  @extend %btn-primary-basis;
+
+  $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
+  height: $height;
+}
+
+// == Colors
+.btn-toggle-collapse {
+  &:global {
+    &.btn.btn-primary {
+      @extend %btn-primary-color-vars;
+    }
+  }
+}
+@include bs.color-mode(light) {
+  .btn-toggle-collapse {
+    &:global {
+      &.btn.btn-primary {
+        --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) {
+  .btn-toggle-collapse {
+    &:global {
+      &.btn.btn-primary {
+        --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/ToggleCollapseButton.tsx

@@ -0,0 +1,24 @@
+import { memo, useCallback } from 'react';
+
+import { useCollapsedContentsOpened, useCollapsedMode } from '~/stores/ui';
+
+
+import styles from './ToggleCollapseButton.module.scss';
+
+
+export const ToggleCollapseButton = memo((): JSX.Element => {
+
+  const { data: isCollapsedMode, mutate: mutateCollapsedMode } = useCollapsedMode();
+  const { mutate: mutateCollapsedContentsOpened } = useCollapsedContentsOpened();
+
+  const toggle = useCallback(() => {
+    mutateCollapsedMode(!isCollapsedMode);
+    mutateCollapsedContentsOpened(false);
+  }, [isCollapsedMode, mutateCollapsedContentsOpened, mutateCollapsedMode]);
+
+  return (
+    <button type="button" className={`btn btn-primary ${styles['btn-toggle-collapse']} p-2`} onClick={toggle}>
+      <span className="material-icons fs-2">first_page</span>
+    </button>
+  );
+});