feat: save ui setting

apps/app/src/components/Me/UISettings.tsx

@@ -1,6 +1,10 @@
+import { useCallback } from 'react';
+
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
+import { useCollapsedContentsOpened, usePreferCollapsedMode, useSidebarMode } from '~/stores/ui';
+
 import SidebarCollapsedIcon from './SidebarCollapsedIcon';
 import SidebarDockIcon from './SidebarDockIcon';
 
@@ -22,6 +26,16 @@ additionalClasses: string
 
 export const UISettings = (): JSX.Element => {
   const { t } = useTranslation();
+  const {
+    data: sidebarMode, isDrawerMode, isDockMode, isCollapsedMode,
+  } = useSidebarMode();
+  const { mutateAndSave: mutatePreferCollapsedMode } = usePreferCollapsedMode();
+  const { mutate: mutateCollapsedContentsOpened } = useCollapsedContentsOpened();
+
+  const toggleCollapsed = useCallback(() => {
+    mutatePreferCollapsedMode(!isCollapsedMode());
+    mutateCollapsedContentsOpened(false);
+  }, [isCollapsedMode, mutateCollapsedContentsOpened, mutatePreferCollapsedMode]);
 
   const renderSidebarModeSwitch = () => {
     return (
@@ -41,6 +55,8 @@ export const UISettings = (): JSX.Element => {
                 id="swSidebarMode"
                 className="form-check-input"
                 type="checkbox"
+                checked={isDockMode()}
+                onChange={toggleCollapsed}
               />
               <label className="form-label form-check-label" htmlFor="swSidebarMode"></label>
             </div>
@@ -61,25 +77,30 @@ export const UISettings = (): JSX.Element => {
 
   return (
     <>
-      <h2 className="border-bottom mb-4">{t('ui_settings.ui_settings')}</h2>
+      { sidebarMode != null && !isDrawerMode() && (
+        <>
+          <h2 className="border-bottom mb-4">{t('ui_settings.ui_settings')}</h2>
 
-      <div className="row justify-content-center">
-        <div className="col-md-6">
+          <div className="row justify-content-center">
+            <div className="col-md-6">
 
-          { renderSidebarModeSwitch() }
+              { renderSidebarModeSwitch() }
 
-          <div>
+              <div>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      <div className="row my-3">
-        <div className="offset-4 col-5">
-          <button data-testid="" type="button" className="btn btn-primary" onClick={() => {}}>
-            {t('Update')}
-          </button>
-        </div>
-      </div>
+          <div className="row my-3">
+            <div className="offset-4 col-5">
+              <button data-testid="" type="button" className="btn btn-primary" onClick={() => {}}>
+                {t('Update')}
+              </button>
+            </div>
+          </div>
+        </>
+      ) }
+
     </>
   );
 };