feat: refactor UISetting component

apps/app/src/components/Me/UISettings.module.scss

@@ -0,0 +1,12 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+.grw-sidebar-mode-icon {
+  width: 20px;
+  height:  20px;
+  :global {
+    svg {
+      display: block;
+      fill: bs.$secondary;
+    }
+  }
+}

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

@@ -1,4 +1,96 @@
 import { useTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
+
+import SidebarDockIcon from '../Icons/SidebarDockIcon';
+import SidebarDrawerIcon from '../Icons/SidebarDrawerIcon';
+
+import styles from './UISettings.module.scss';
+
+const IconWithTooltip = ({
+  id, label, children, additionalClasses,
+}: {
+id: string,
+label: string,
+children: JSX.Element,
+additionalClasses: string
+}) => (
+  <>
+    <div id={id} className={`${additionalClasses != null ? additionalClasses : ''}`}>{children}</div>
+    <UncontrolledTooltip placement="bottom" fade={false} target={id}>{label}</UncontrolledTooltip>
+  </>
+);
+
+const renderSidebarModeSwitch = () => {
+  return (
+    <>
+      <div className="d-flex align-items-start">
+        <div className="d-flex align-items-center">
+          <IconWithTooltip
+            id="iwt-sidebar-drawer"
+            label="Drawer"
+            additionalClasses={styles['grw-sidebar-mode-icon']}
+          >
+            <SidebarDrawerIcon />
+          </IconWithTooltip>
+          <div className="form-check form-switch ms-2">
+
+            <input
+              id="swSidebarMode"
+              className="form-check-input"
+              type="checkbox"
+            />
+            <label className="form-label form-check-label" htmlFor="swSidebarMode"></label>
+          </div>
+          <IconWithTooltip id="iwt-sidebar-dock" label="Dock" additionalClasses={styles['grw-sidebar-mode-icon']}>
+            <SidebarDockIcon />
+          </IconWithTooltip>
+        </div>
+        <div className="ms-2">
+          <label className="form-label form-check-label" htmlFor="swSidebarMode">
+            サイドバーのモードを設定する
+          </label>
+          <p className="form-text text-muted small">サイドバーを常時開いた状態にするかどうかを設定できます。</p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const renderEditSidebarModeSwitch = () => {
+  return (
+    <>
+      <div className="d-flex align-items-start">
+        <div className="d-flex align-items-center">
+          <IconWithTooltip
+            id="iwt-sidebar-editor-drawer"
+            label="Drawer"
+            additionalClasses={styles['grw-sidebar-mode-icon']}
+          >
+            <SidebarDrawerIcon />
+          </IconWithTooltip>
+          <div className="form-check form-switch ms-2">
+
+            <input
+              id="swSidebarModeOnEditor"
+              className="form-check-input"
+              type="checkbox"
+            />
+            <label className="form-label form-check-label" htmlFor="swSidebarModeOnEditor"></label>
+          </div>
+          <IconWithTooltip id="iwt-sidebar-editor-dock" label="Dock" additionalClasses={styles['grw-sidebar-mode-icon']}>
+            <SidebarDockIcon />
+          </IconWithTooltip>
+        </div>
+        <div className="ms-2">
+          <label className="form-label form-check-label" htmlFor="swSidebarModeOnEditor">
+            編集時のサイドバーのモードを設定する
+          </label>
+          <p className="form-text text-muted small">コンテンツ編集時に、サイドバーを常時開いた状態にするかどうかを設定できます。</p>
+        </div>
+      </div>
+    </>
+  );
+};
 
 
 export const UISettings = (): JSX.Element => {
@@ -9,12 +101,12 @@ export const UISettings = (): JSX.Element => {
 
       <div className="row justify-content-center">
         <div className="col-md-6">
-          <div className="form-check form-switch form-check-primary">
-            <input type="checkbox" className="form-check-input" id="isQuestionnaireEnabled" onChange={() => {}} />
-            <label className="form-label form-check-label" htmlFor="isQuestionnaireEnabled">
-              ワイドビューを有効にする
-            </label>
-            <p className="form-text text-muted small">ワイドビューを有効にすると、ページ内コンテンツがページの横幅いっぱいに広がります</p>
+          { renderSidebarModeSwitch() }
+          <div className="mt-5">
+
+            { renderEditSidebarModeSwitch() }
+          </div>
+          <div>
           </div>
         </div>
       </div>