add default at dock mode

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

@@ -149,8 +149,13 @@
     }
   },
   "customize_setting": {
-    "default_sidebar_mode": "Default sidebar mode",
-    "default_sidebar_mode_desc": "You can set the sidebar mode for new users and guests visiting the page.",
+    "default_sidebar_mode": {
+      "title": "Default sidebar mode",
+      "desc": "You can set the sidebar mode for new users and guests visiting the page.",
+      "dock_mode_default_desc": "You can set the initial state of the sidebar when Dock Mode is selected.",
+      "dock_mode_default_open": "Open the page as it was opened from the beginning",
+      "dock_mode_default_close": "Open the page as it was closed from the beginning"
+    },
     "layout": "Layout",
     "layout_options": {
       "default": "Default content width",

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

@@ -149,8 +149,13 @@
     }
   },
   "customize_setting": {
-    "default_sidebar_mode": "デフォルトのサイドバーモード",
-    "default_sidebar_mode_desc": "新規ユーザー、ページを訪れたゲストのサイドバーモードを設定できます。",
+    "default_sidebar_mode": {
+      "title": "デフォルトのサイドバーモード",
+      "desc": "新規ユーザー、ページを訪れたゲストのサイドバーモードを設定できます。",
+      "dock_mode_default_desc": "Dock Mode選択時のサイドバーの初期状態を設定できます。",
+      "dock_mode_default_open": "初めから開いた状態でページを開く",
+      "dock_mode_default_close": "初めから閉じた状態でページを開く"
+    },
     "layout": "レイアウト",
     "layout_options": {
       "default": "デフォルトのコンテンツ幅",

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

@@ -148,8 +148,13 @@
     }
   },
   "customize_setting": {
-    "default_sidebar_mode": "默认的侧边栏模式",
-    "default_sidebar_mode_desc": "你可以为新用户和访问该网页的客人设置侧边栏模式。",
+    "default_sidebar_mode": {
+      "title": "默认的侧边栏模式",
+      "desc": "你可以为新用户和访问该网页的客人设置侧边栏模式。",
+      "dock_mode_default_desc": "当选择Dock模式时，可以设置侧边栏的初始状态。",
+      "dock_mode_default_open": "从头开始翻页",
+      "dock_mode_default_close": "从头开始打开关闭的页面"
+    },
     "layout": "布局",
     "layout_options": {
       "default": "默认内容宽度 ",

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

@@ -8,6 +8,7 @@ import { isDarkMode as isDarkModeByUtil } from '~/client/util/color-scheme';
 const CustomizeSidebarsetting = (): JSX.Element => {
   const { t } = useTranslation();
   const [isDrawerMode, setIsDrawerMode] = useState(false);
+  const [isDefaultOpenAtDockMode, setIsDefaultOpenAtDockMode] = useState(false);
 
   const isDarkMode = isDarkModeByUtil();
   const colorText = isDarkMode ? 'dark' : 'light';
@@ -21,11 +22,11 @@ const CustomizeSidebarsetting = (): JSX.Element => {
       <div className="row">
         <div className="col-12">
 
-          <h2 className="admin-setting-header">{t('admin:customize_setting.default_sidebar_mode')}</h2>
+          <h2 className="admin-setting-header">{t('admin:customize_setting.default_sidebar_mode.title')}</h2>
 
           <Card className="card well my-3">
             <CardBody className="px-0 py-2">
-              {t('admin:customize_setting.default_sidebar_mode_desc')}
+              {t('admin:customize_setting.default_sidebar_mode.desc')}
             </CardBody>
           </Card>
 
@@ -56,6 +57,43 @@ const CustomizeSidebarsetting = (): JSX.Element => {
             </div>
           </div>
 
+          <Card className="card well my-3">
+            <CardBody className="px-0 py-2">
+              {t('admin:customize_setting.default_sidebar_mode.dock_mode_default_desc')}
+            </CardBody>
+          </Card>
+
+          <div className="d-flex flex-column align-items-center">
+            <div className="custom-control custom-radio my-3">
+              <input
+                type="radio"
+                id="radio-email-show"
+                className="custom-control-input"
+                name="mailVisibility"
+                checked={!isDrawerMode && isDefaultOpenAtDockMode}
+                disabled={isDrawerMode}
+                onChange={() => { setIsDefaultOpenAtDockMode(true) }}
+              />
+              <label className="custom-control-label" htmlFor="radio-email-show">
+                {t('admin:customize_setting.default_sidebar_mode.dock_mode_default_open')}
+              </label>
+            </div>
+            <div className="custom-control custom-radio my-3">
+              <input
+                type="radio"
+                id="radio-email-show"
+                className="custom-control-input"
+                name="mailVisibility"
+                checked={!isDrawerMode && !isDefaultOpenAtDockMode}
+                disabled={isDrawerMode}
+                onChange={() => { setIsDefaultOpenAtDockMode(false) }}
+              />
+              <label className="custom-control-label" htmlFor="radio-email-show">
+                {t('admin:customize_setting.default_sidebar_mode.dock_mode_default_close')}
+              </label>
+            </div>
+          </div>
+
           <div className="row my-3">
             <div className="mx-auto">
               <button type="button" onClick={onClickSubmit} className="btn btn-primary">{ t('Update') }</button>