create sidebar mode setting

packages/app/resource/locales/en_US/admin/admin.json

@@ -149,6 +149,7 @@
     }
   },
   "customize_setting": {
+    "default_sidebar_mode": "Default sidebar mode",
     "layout": "Layout",
     "layout_options": {
       "default": "Default content width",

packages/app/resource/locales/ja_JP/admin/admin.json

@@ -149,6 +149,7 @@
     }
   },
   "customize_setting": {
+    "default_sidebar_mode": "デフォルトのサイドバーモード",
     "layout": "レイアウト",
     "layout_options": {
       "default": "デフォルトのコンテンツ幅",

packages/app/resource/locales/zh_CN/admin/admin.json

@@ -148,6 +148,7 @@
     }
   },
   "customize_setting": {
+    "default_sidebar_mode": "默认的侧边栏模式",
     "layout": "布局",
     "layout_options": {
       "default": "默认内容宽度 ",

packages/app/src/components/Admin/Customize/Customize.jsx

@@ -1,23 +1,25 @@
 
 import React, { Fragment } from 'react';
+
 import PropTypes from 'prop-types';
 
-import loggerFactory from '~/utils/logger';
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
 import AppContainer from '~/client/services/AppContainer';
-
-import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
+import loggerFactory from '~/utils/logger';
+
 import { withLoadingSppiner } from '../../SuspenseUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
-import CustomizeLayoutSetting from './CustomizeLayoutSetting';
-import CustomizeThemeSetting from './CustomizeThemeSetting';
+import CustomizeCssSetting from './CustomizeCssSetting';
 import CustomizeFunctionSetting from './CustomizeFunctionSetting';
+import CustomizeHeaderSetting from './CustomizeHeaderSetting';
 import CustomizeHighlightSetting from './CustomizeHighlightSetting';
-import CustomizeCssSetting from './CustomizeCssSetting';
+import CustomizeLayoutSetting from './CustomizeLayoutSetting';
 import CustomizeScriptSetting from './CustomizeScriptSetting';
-import CustomizeHeaderSetting from './CustomizeHeaderSetting';
+import CustomizeSidebarSetting from './CustomizeSidebarSetting';
+import CustomizeThemeSetting from './CustomizeThemeSetting';
 import CustomizeTitle from './CustomizeTitle';
 
 const logger = loggerFactory('growi:services:AdminCustomizePage');
@@ -53,6 +55,9 @@ function Customize(props) {
       <div className="mb-5">
         <CustomizeThemeSetting />
       </div>
+      <div className="mb-5">
+        <CustomizeSidebarSetting />
+      </div>
       <div className="mb-5">
         <CustomizeFunctionSetting />
       </div>

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+const CustomizeSidebarsetting = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      <div className="row">
+        <div className="col-12">
+          <h2 className="admin-setting-header">{t('admin:customize_setting.default_sidebar_mode')}</h2>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default CustomizeSidebarsetting;