refactor state init

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

@@ -10,8 +10,8 @@ import { useSidebarConfig } from '~/stores/ui';
 const CustomizeSidebarsetting = (): JSX.Element => {
   const { t } = useTranslation();
   const { data: sidebarConfig, update } = useSidebarConfig();
-  const [isSidebarDrawerMode, setIsSidebarDrawerMode] = useState(sidebarConfig?.isSidebarDrawerMode);
-  const [isSidebarClosedAtDockMode, setIsSidebarClosedAtDockMode] = useState(sidebarConfig?.isSidebarClosedAtDockMode);
+  const [isSidebarDrawerMode, setIsSidebarDrawerMode] = useState(false);
+  const [isSidebarClosedAtDockMode, setIsSidebarClosedAtDockMode] = useState(false);
 
   const isDarkMode = isDarkModeByUtil();
   const colorText = isDarkMode ? 'dark' : 'light';
@@ -27,6 +27,13 @@ const CustomizeSidebarsetting = (): JSX.Element => {
     toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.default_sidebar_mode.title') }));
   }, [t, isSidebarDrawerMode, isSidebarClosedAtDockMode, update]);
 
+  useEffect(() => {
+    if (sidebarConfig != null) {
+      setIsSidebarDrawerMode(sidebarConfig?.isSidebarDrawerMode);
+      setIsSidebarClosedAtDockMode(sidebarConfig?.isSidebarClosedAtDockMode);
+    }
+  }, [sidebarConfig]);
+
   return (
     <React.Fragment>
       <div className="row">