WIP: refactor sidebar mode

apps/app/src/components/Admin/Customize/CustomizeSidebarSetting.tsx

@@ -11,7 +11,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
   const { t } = useTranslation(['admin', 'commons']);
 
   const {
-    update, isSidebarDrawerMode, isSidebarClosedAtDockMode, setIsSidebarDrawerMode, setIsSidebarClosedAtDockMode,
+    update, isSidebarCollapsedMode, setIsSidebarCollapsedMode,
   } = useSWRxSidebarConfig();
 
   const { resolvedTheme } = useNextThemes();
@@ -45,8 +45,8 @@ const CustomizeSidebarsetting = (): JSX.Element => {
             <div id="layoutOptions" className="row row-cols-2">
               <div className="col">
                 <div
-                  className={`card customize-layout-card ${isSidebarDrawerMode ? 'border-active' : ''}`}
-                  onClick={() => setIsSidebarDrawerMode(true)}
+                  className={`card customize-layout-card ${isSidebarCollapsedMode ? 'border-active' : ''}`}
+                  onClick={() => setIsSidebarCollapsedMode(true)}
                   role="button"
                 >
                   <img src={drawerIconFileName} />
@@ -57,8 +57,8 @@ const CustomizeSidebarsetting = (): JSX.Element => {
               </div>
               <div className="col">
                 <div
-                  className={`card customize-layout-card ${!isSidebarDrawerMode ? 'border-active' : ''}`}
-                  onClick={() => setIsSidebarDrawerMode(false)}
+                  className={`card customize-layout-card ${!isSidebarCollapsedMode ? 'border-active' : ''}`}
+                  onClick={() => setIsSidebarCollapsedMode(false)}
                   role="button"
                 >
                   <img src={dockIconFileName} />
@@ -83,9 +83,8 @@ const CustomizeSidebarsetting = (): JSX.Element => {
                 id="is-open"
                 className="form-check-input"
                 name="mailVisibility"
-                checked={isSidebarDrawerMode === false && isSidebarClosedAtDockMode === false}
-                disabled={isSidebarDrawerMode}
-                onChange={() => setIsSidebarClosedAtDockMode(false)}
+                checked={isSidebarCollapsedMode === false}
+                onChange={() => setIsSidebarCollapsedMode(false)}
               />
               <label className="form-label form-check-label" htmlFor="is-open">
                 {t('customize_settings.default_sidebar_mode.dock_mode_default_open')}
@@ -97,9 +96,8 @@ const CustomizeSidebarsetting = (): JSX.Element => {
                 id="is-closed"
                 className="form-check-input"
                 name="mailVisibility"
-                checked={isSidebarDrawerMode === false && isSidebarClosedAtDockMode === true}
-                disabled={isSidebarDrawerMode}
-                onChange={() => setIsSidebarClosedAtDockMode(true)}
+                checked={isSidebarCollapsedMode === true}
+                onChange={() => setIsSidebarCollapsedMode(true)}
               />
               <label className="form-label form-check-label" htmlFor="is-closed">
                 {t('customize_settings.default_sidebar_mode.dock_mode_default_close')}

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

@@ -61,13 +61,13 @@ export const SidebarSubstance = memo((): JSX.Element => {
 
   const resizeDoneHandler = useCallback((newWidth: number) => {
     mutateProductNavWidth(newWidth, false);
-    scheduleToPut({ isSidebarCollapsed: false, currentProductNavWidth: newWidth });
+    scheduleToPut({ preferCollapsedModeByUser: false, currentProductNavWidth: newWidth });
   }, [mutateProductNavWidth, scheduleToPut]);
 
   const collapsedByResizableAreaHandler = useCallback(() => {
     mutateSidebarCollapsed(true);
     mutateProductNavWidth(sidebarMinWidth, false);
-    scheduleToPut({ isSidebarCollapsed: true, currentProductNavWidth: sidebarMinWidth });
+    scheduleToPut({ preferCollapsedModeByUser: true, currentProductNavWidth: sidebarMinWidth });
   }, [mutateProductNavWidth, mutateSidebarCollapsed, scheduleToPut]);
 
   useEffect(() => {

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

@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic';
 
 import { useUserUISettings } from '~/client/services/user-ui-settings';
 import { SidebarContentsType } from '~/interfaces/ui';
-import { useCurrentSidebarContents, useDrawerMode, useSidebarCollapsed } from '~/stores/ui';
+import { useCurrentSidebarContents } from '~/stores/ui';
 
 import styles from './PrimaryItems.module.scss';
 
@@ -17,7 +17,7 @@ type PrimaryItemProps = {
   contents: SidebarContentsType,
   label: string,
   iconName: string,
-  onItemSelected: (contents: SidebarContentsType) => void,
+  onItemSelected?: (contents: SidebarContentsType) => void,
 }
 
 const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
@@ -31,13 +31,9 @@ const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
   const isSelected = contents === currentContents;
 
   const itemSelectedHandler = useCallback(() => {
-    if (onItemSelected != null) {
-      onItemSelected(contents);
-    }
-
     mutate(contents, false);
-
     scheduleToPut({ currentSidebarContents: contents });
+    onItemSelected?.(contents);
   }, [contents, mutate, onItemSelected, scheduleToPut]);
 
   const labelForTestId = label.toLowerCase().replace(' ', '-');
@@ -55,38 +51,13 @@ const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
 };
 
 export const PrimaryItems: FC = memo(() => {
-
-  const { scheduleToPut } = useUserUISettings();
-
-  const { data: isDrawerMode } = useDrawerMode();
-  const { data: currentContents } = useCurrentSidebarContents();
-  const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
-
-  const itemSelectedHandler = useCallback((selectedContents) => {
-    if (isDrawerMode) {
-      return;
-    }
-
-    let newValue = false;
-
-    // already selected
-    if (currentContents === selectedContents) {
-      // toggle collapsed
-      newValue = !isCollapsed;
-    }
-
-    mutateSidebarCollapsed(newValue, false);
-    scheduleToPut({ isSidebarCollapsed: newValue });
-
-  }, [currentContents, isCollapsed, isDrawerMode, mutateSidebarCollapsed, scheduleToPut]);
-
   return (
     <div className={styles['grw-primary-items']}>
-      <PrimaryItem contents={SidebarContentsType.TREE} label="Page Tree" iconName="format_list_bulleted" onItemSelected={itemSelectedHandler} />
-      <PrimaryItem contents={SidebarContentsType.CUSTOM} label="Custom Sidebar" iconName="code" onItemSelected={itemSelectedHandler} />
-      <PrimaryItem contents={SidebarContentsType.RECENT} label="Recent Changes" iconName="update" onItemSelected={itemSelectedHandler} />
-      <PrimaryItem contents={SidebarContentsType.BOOKMARKS} label="Bookmarks" iconName="bookmark" onItemSelected={itemSelectedHandler} />
-      <PrimaryItem contents={SidebarContentsType.TAG} label="Tags" iconName="local_offer" onItemSelected={itemSelectedHandler} />
+      <PrimaryItem contents={SidebarContentsType.TREE} label="Page Tree" iconName="format_list_bulleted" />
+      <PrimaryItem contents={SidebarContentsType.CUSTOM} label="Custom Sidebar" iconName="code" />
+      <PrimaryItem contents={SidebarContentsType.RECENT} label="Recent Changes" iconName="update" />
+      <PrimaryItem contents={SidebarContentsType.BOOKMARKS} label="Bookmarks" iconName="bookmark" />
+      <PrimaryItem contents={SidebarContentsType.TAG} label="Tags" iconName="local_offer" />
       <InAppNotificationDropdown />
     </div>
   );

apps/app/src/interfaces/sidebar-config.ts

@@ -1,5 +1,4 @@
 
 export interface ISidebarConfig {
-  isSidebarDrawerMode: boolean,
-  isSidebarClosedAtDockMode: boolean
+  isSidebarCollapsedMode: boolean,
 }

apps/app/src/interfaces/ui.ts

@@ -1,5 +1,13 @@
 import type { Nullable } from '@growi/core';
 
+
+// export const SidebarMode = {
+//   DRAWER: 'drawer',
+//   COLLAPSED: 'collapsed',
+//   DOCK: 'dock',
+// } as const;
+// export type SidebarMode = typeof SidebarMode[keyof typeof SidebarMode];
+
 export const SidebarContentsType = {
   CUSTOM: 'custom',
   RECENT: 'recent',

apps/app/src/interfaces/user-ui-settings.ts

@@ -1,9 +1,7 @@
 import { SidebarContentsType } from './ui';
 
 export interface IUserUISettings {
-  isSidebarCollapsed: boolean,
   currentSidebarContents: SidebarContentsType,
   currentProductNavWidth: number,
-  preferDrawerModeByUser: boolean,
-  preferDrawerModeOnEditByUser: boolean,
+  preferCollapsedModeByUser: boolean,
 }

apps/app/src/pages/_private-legacy-pages.page.tsx

@@ -89,8 +89,7 @@ async function injectServerConfigurations(context: GetServerSidePropsContext, pr
   props.isEnabledMarp = configManager.getConfig('crowi', 'customize:isEnabledMarp');
 
   props.sidebarConfig = {
-    isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
-    isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
+    isSidebarCollapsedMode: configManager.getConfig('crowi', 'customize:isSidebarCollapsedMode'),
   };
 
   props.rendererConfig = {

apps/app/src/pages/_search.page.tsx

@@ -113,8 +113,7 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
   props.isContainerFluid = configManager.getConfig('crowi', 'customize:isContainerFluid');
 
   props.sidebarConfig = {
-    isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
-    isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
+    isSidebarCollapsedMode: configManager.getConfig('crowi', 'customize:isSidebarCollapsedMode'),
   };
 
   props.rendererConfig = {

apps/app/src/pages/me/[[...path]].page.tsx

@@ -158,8 +158,7 @@ async function injectServerConfigurations(context: GetServerSidePropsContext, pr
   props.showPageLimitationXL = crowi.configManager.getConfig('crowi', 'customize:showPageLimitationXL');
 
   props.sidebarConfig = {
-    isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
-    isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
+    isSidebarCollapsedMode: configManager.getConfig('crowi', 'customize:isSidebarCollapsedMode'),
   };
 
   props.rendererConfig = {

apps/app/src/pages/tags.page.tsx

@@ -134,8 +134,7 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
   props.isSearchScopeChildrenAsDefault = configManager.getConfig('crowi', 'customize:isSearchScopeChildrenAsDefault');
 
   props.sidebarConfig = {
-    isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
-    isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
+    isSidebarCollapsedMode: configManager.getConfig('crowi', 'customize:isSidebarCollapsedMode'),
   };
 
 }

apps/app/src/pages/trash.page.tsx

@@ -114,8 +114,7 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
   props.showPageLimitationXL = crowi.configManager.getConfig('crowi', 'customize:showPageLimitationXL');
 
   props.sidebarConfig = {
-    isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
-    isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
+    isSidebarCollapsedMode: configManager.getConfig('crowi', 'customize:isSidebarCollapsedMode'),
   };
 
 }

apps/app/src/pages/utils/commons.ts

@@ -14,7 +14,7 @@ import type { IUserUISettings } from '~/interfaces/user-ui-settings';
 import type { PageDocument } from '~/server/models/page';
 import type { UserUISettingsDocument } from '~/server/models/user-ui-settings';
 import {
-  useCurrentProductNavWidth, useCurrentSidebarContents, usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed,
+  useCurrentProductNavWidth, useCurrentSidebarContents, usePreferCollapsedModeByUser,
 } from '~/stores/ui';
 
 export type CommonProps = {
@@ -100,8 +100,7 @@ export const getServerSideCommonProps: GetServerSideProps<CommonProps> = async(c
     forcedColorScheme,
     growiCloudUri: configManager.getConfig('crowi', 'app:growiCloudUri'),
     sidebarConfig: {
-      isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
-      isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
+      isSidebarCollapsedMode: configManager.getConfig('crowi', 'customize:isSidebarCollapsedMode'),
     },
     userUISettings: userUISettings?.toObject?.() ?? userUISettings,
   };
@@ -166,9 +165,7 @@ export const generateCustomTitleForPage = (props: CommonProps, pagePath: string)
 
 export const useInitSidebarConfig = (sidebarConfig: ISidebarConfig, userUISettings?: IUserUISettings): void => {
   // UserUISettings
-  usePreferDrawerModeByUser(userUISettings?.preferDrawerModeByUser ?? sidebarConfig.isSidebarDrawerMode);
-  usePreferDrawerModeOnEditByUser(userUISettings?.preferDrawerModeOnEditByUser);
-  useSidebarCollapsed(userUISettings?.isSidebarCollapsed ?? sidebarConfig.isSidebarClosedAtDockMode);
+  usePreferCollapsedModeByUser(userUISettings?.preferCollapsedModeByUser ?? sidebarConfig.isSidebarCollapsedMode);
   useCurrentSidebarContents(userUISettings?.currentSidebarContents);
   useCurrentProductNavWidth(userUISettings?.currentProductNavWidth);
 };

apps/app/src/server/models/config.ts

@@ -133,8 +133,7 @@ export const defaultCrowiConfigs: { [key: string]: any } = {
   'customize:isAllReplyShown': false,
   'customize:isSearchScopeChildrenAsDefault': false,
   'customize:isEnabledMarp': false,
-  'customize:isSidebarDrawerMode': false,
-  'customize:isSidebarClosedAtDockMode': false,
+  'customize:isSidebarCollapsedMode': false,
 
   'notification:owner-page:isEnabled': false,
   'notification:group-page:isEnabled': false,

apps/app/src/server/models/user-ui-settings.ts

@@ -17,15 +17,13 @@ export type UserUISettingsModel = Model<UserUISettingsDocument>
 
 const schema = new Schema<UserUISettingsDocument, UserUISettingsModel>({
   user: { type: Schema.Types.ObjectId, ref: 'User', unique: true },
-  isSidebarCollapsed: { type: Boolean, default: false },
   currentSidebarContents: {
     type: String,
     enum: SidebarContentsType,
     default: SidebarContentsType.RECENT,
   },
   currentProductNavWidth: { type: Number },
-  preferDrawerModeByUser: { type: Boolean, default: false },
-  preferDrawerModeOnEditByUser: { type: Boolean, default: true },
+  preferCollapsedModeByUser: { type: Boolean, default: false },
 });
 
 

apps/app/src/server/routes/apiv3/customize-setting.js

@@ -112,8 +112,7 @@ module.exports = (crowi) => {
       body('theme').isString(),
     ],
     sidebar: [
-      body('isSidebarDrawerMode').isBoolean(),
-      body('isSidebarClosedAtDockMode').isBoolean(),
+      body('isSidebarCollapsedMode').isBoolean(),
     ],
     function: [
       body('isEnabledTimeline').isBoolean(),
@@ -342,9 +341,8 @@ module.exports = (crowi) => {
   router.get('/sidebar', loginRequiredStrictly, adminRequired, async(req, res) => {
 
     try {
-      const isSidebarDrawerMode = await crowi.configManager.getConfig('crowi', 'customize:isSidebarDrawerMode');
-      const isSidebarClosedAtDockMode = await crowi.configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode');
-      return res.apiv3({ isSidebarDrawerMode, isSidebarClosedAtDockMode });
+      const isSidebarCollapsedMode = await crowi.configManager.getConfig('crowi', 'customize:isSidebarCollapsedMode');
+      return res.apiv3({ isSidebarCollapsedMode });
     }
     catch (err) {
       const msg = 'Error occurred in getting sidebar';
@@ -355,15 +353,13 @@ module.exports = (crowi) => {
 
   router.put('/sidebar', loginRequiredStrictly, adminRequired, validator.sidebar, apiV3FormValidator, addActivity, async(req, res) => {
     const requestParams = {
-      'customize:isSidebarDrawerMode': req.body.isSidebarDrawerMode,
-      'customize:isSidebarClosedAtDockMode': req.body.isSidebarClosedAtDockMode,
+      'customize:isSidebarCollapsedMode': req.body.isSidebarCollapsedMode,
     };
 
     try {
       await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
       const customizedParams = {
-        isSidebarDrawerMode: await crowi.configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
-        isSidebarClosedAtDockMode: await crowi.configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
+        isSidebarCollapsedMode: await crowi.configManager.getConfig('crowi', 'customize:isSidebarCollapsedMode'),
       };
 
       activityEvent.emit('update', res.locals.activity._id, { action: SupportedAction.ACTION_ADMIN_SIDEBAR_UPDATE });

apps/app/src/server/routes/apiv3/user-ui-settings.ts

@@ -16,11 +16,9 @@ module.exports = (crowi) => {
 
   const validatorForPut = [
     body('settings').exists().withMessage('The body param \'settings\' is required'),
-    body('settings.isSidebarCollapsed').optional().isBoolean(),
     body('settings.currentSidebarContents').optional().isIn(AllSidebarContentsType),
     body('settings.currentProductNavWidth').optional().isNumeric(),
-    body('settings.preferDrawerModeByUser').optional().isBoolean(),
-    body('settings.preferDrawerModeOnEditByUser').optional().isBoolean(),
+    body('settings.preferCollapsedModeByUser').optional().isBoolean(),
   ];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -30,11 +28,9 @@ module.exports = (crowi) => {
 
     // extract only necessary params
     const updateData = {
-      isSidebarCollapsed: settings.isSidebarCollapsed,
       currentSidebarContents: settings.currentSidebarContents,
       currentProductNavWidth: settings.currentProductNavWidth,
-      preferDrawerModeByUser: settings.preferDrawerModeByUser,
-      preferDrawerModeOnEditByUser: settings.preferDrawerModeOnEditByUser,
+      preferCollapsedModeByUser: settings.preferCollapsedModeByUser,
     };
 
     if (user == null) {

apps/app/src/stores/ui.tsx

@@ -221,30 +221,26 @@ export const useIsDeviceSmallerThanLg = (): SWRResponse<boolean, Error> => {
   return useStaticSWR(key);
 };
 
-type PreferDrawerModeByUserUtils = {
-  update: (preferDrawerMode: boolean) => void
+type PreferCollapsedModeByUserUtils = {
+  update: (preferCollapsedMode: boolean) => void
 }
 
-export const usePreferDrawerModeByUser = (initialData?: boolean): SWRResponseWithUtils<PreferDrawerModeByUserUtils, boolean> => {
+export const usePreferCollapsedModeByUser = (initialData?: boolean): SWRResponseWithUtils<PreferCollapsedModeByUserUtils, boolean> => {
   const { scheduleToPut } = useUserUISettings();
 
-  const swrResponse: SWRResponse<boolean, Error> = useStaticSWR('preferDrawerModeByUser', initialData);
+  const swrResponse: SWRResponse<boolean, Error> = useStaticSWR('preferCollapsedModeByUser', initialData);
 
-  const utils: PreferDrawerModeByUserUtils = {
-    update: (preferDrawerMode: boolean) => {
-      swrResponse.mutate(preferDrawerMode);
-      scheduleToPut({ preferDrawerModeByUser: preferDrawerMode });
+  const utils: PreferCollapsedModeByUserUtils = {
+    update: (preferCollapsedMode: boolean) => {
+      swrResponse.mutate(preferCollapsedMode);
+      scheduleToPut({ preferCollapsedModeByUser: preferCollapsedMode });
     },
   };
 
-  return withUtils<PreferDrawerModeByUserUtils>(swrResponse, utils);
+  return withUtils<PreferCollapsedModeByUserUtils>(swrResponse, utils);
 
 };
 
-export const usePreferDrawerModeOnEditByUser = (initialData?: boolean): SWRResponse<boolean, Error> => {
-  return useStaticSWR('preferDrawerModeOnEditByUser', initialData, { fallbackData: true });
-};
-
 export const useSidebarCollapsed = (initialData?: boolean): SWRResponse<boolean, Error> => {
   return useStaticSWR('isSidebarCollapsed', initialData, { fallbackData: false });
 };
@@ -258,39 +254,28 @@ export const useCurrentProductNavWidth = (initialData?: number): SWRResponse<num
 };
 
 export const useDrawerMode = (): SWRResponse<boolean, Error> => {
-  const { data: preferDrawerModeByUser } = usePreferDrawerModeByUser();
-  const { data: preferDrawerModeOnEditByUser } = usePreferDrawerModeOnEditByUser();
   const { data: editorMode } = useEditorMode();
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
 
-  const condition = editorMode != null && preferDrawerModeByUser != null && preferDrawerModeOnEditByUser != null && isDeviceSmallerThanMd != null;
+  const condition = editorMode != null && isDeviceSmallerThanMd != null;
 
   const calcDrawerMode = (
-      endpoint: string,
+      _keyString: string,
       editorMode: EditorMode,
-      preferDrawerModeByUser: boolean,
-      preferDrawerModeOnEditByUser: boolean,
       isDeviceSmallerThanMd: boolean,
   ): boolean => {
-    // get preference on view or edit
-    const preferDrawerMode = editorMode !== EditorMode.View ? preferDrawerModeOnEditByUser : preferDrawerModeByUser;
-
-    return isDeviceSmallerThanMd ?? preferDrawerMode ?? false;
+    return isDeviceSmallerThanMd
+      ? true
+      : editorMode === EditorMode.Editor;
   };
 
-  const isViewModeWithPreferDrawerMode = editorMode === EditorMode.View && preferDrawerModeByUser;
-  const isEditModeWithPreferDrawerMode = editorMode !== EditorMode.View && preferDrawerModeOnEditByUser;
-  const isDrawerModeFixed = isViewModeWithPreferDrawerMode || isEditModeWithPreferDrawerMode;
-
   return useSWRImmutable(
-    condition ? ['isDrawerMode', editorMode, preferDrawerModeByUser, preferDrawerModeOnEditByUser, isDeviceSmallerThanMd] : null,
+    condition ? ['isDrawerMode', editorMode, isDeviceSmallerThanMd] : null,
     // calcDrawerMode,
     key => calcDrawerMode(...key),
     condition
       ? {
-        fallbackData: isDrawerModeFixed
-          ? true
-          : calcDrawerMode('isDrawerMode', editorMode, preferDrawerModeByUser, preferDrawerModeOnEditByUser, isDeviceSmallerThanMd),
+        fallbackData: calcDrawerMode('isDrawerMode', editorMode, isDeviceSmallerThanMd),
       }
       : undefined,
   );
@@ -298,16 +283,14 @@ export const useDrawerMode = (): SWRResponse<boolean, Error> => {
 
 type SidebarConfigOption = {
   update: () => Promise<void>,
-  isSidebarDrawerMode: boolean|undefined,
-  isSidebarClosedAtDockMode: boolean|undefined,
-  setIsSidebarDrawerMode: (isSidebarDrawerMode: boolean) => void,
-  setIsSidebarClosedAtDockMode: (isSidebarClosedAtDockMode: boolean) => void
+  isSidebarCollapsedMode: boolean|undefined,
+  setIsSidebarCollapsedMode: (isSidebarCollapsedMode: boolean) => void,
 }
 
 export const useSWRxSidebarConfig = (): SWRResponse<ISidebarConfig, Error> & SidebarConfigOption => {
-  const swrResponse = useSWRImmutable(
+  const swrResponse = useSWRImmutable<ISidebarConfig>(
     '/customize-setting/sidebar',
-    endpoint => apiv3Get(endpoint).then(result => result.data),
+    endpoint => apiv3Get<ISidebarConfig>(endpoint).then(result => result.data),
   );
   return {
     ...swrResponse,
@@ -318,34 +301,17 @@ export const useSWRxSidebarConfig = (): SWRResponse<ISidebarConfig, Error> & Sid
         return;
       }
 
-      const { isSidebarDrawerMode, isSidebarClosedAtDockMode } = data;
+      const { isSidebarCollapsedMode } = data;
 
       const updateData = {
-        isSidebarDrawerMode,
-        isSidebarClosedAtDockMode,
+        isSidebarCollapsedMode,
       };
 
       // invoke API
       await apiv3Put('/customize-setting/sidebar', updateData);
     },
-    isSidebarDrawerMode: swrResponse.data?.isSidebarDrawerMode,
-    isSidebarClosedAtDockMode: swrResponse.data?.isSidebarClosedAtDockMode,
-    setIsSidebarDrawerMode: (isSidebarDrawerMode) => {
-      const { data, mutate } = swrResponse;
-
-      if (data == null) {
-        return;
-      }
-
-      const updateData = {
-        isSidebarDrawerMode,
-      };
-
-      // update isSidebarDrawerMode in cache, not revalidate
-      mutate({ ...data, ...updateData }, false);
-
-    },
-    setIsSidebarClosedAtDockMode: (isSidebarClosedAtDockMode) => {
+    isSidebarCollapsedMode: swrResponse.data?.isSidebarCollapsedMode,
+    setIsSidebarCollapsedMode: (isSidebarCollapsedMode) => {
       const { data, mutate } = swrResponse;
 
       if (data == null) {
@@ -353,10 +319,10 @@ export const useSWRxSidebarConfig = (): SWRResponse<ISidebarConfig, Error> & Sid
       }
 
       const updateData = {
-        isSidebarClosedAtDockMode,
+        isSidebarCollapsedMode,
       };
 
-      // update isSidebarClosedAtDockMode in cache, not revalidate
+      // update isSidebarCollapsedMode in cache, not revalidate
       mutate({ ...data, ...updateData }, false);
     },
   };