WIP

packages/app/src/components/Navbar/PersonalDropdown.jsx

@@ -9,6 +9,7 @@ import { UserPicture } from '@growi/ui';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import NavigationContainer from '~/client/services/NavigationContainer';
+import { useDrawerMode } from '~/stores/ui';
 
 import {
   isUserPreferenceExists,
@@ -34,6 +35,8 @@ const PersonalDropdown = (props) => {
   const [useOsSettings, setOsSettings] = useState(!isUserPreferenceExists());
   const [isDarkMode, setIsDarkMode] = useState(isDarkModeByUtil());
 
+  const { mutate } = useDrawerMode();
+
   const logoutHandler = () => {
     const { interceptorManager } = appContainer;
 
@@ -47,7 +50,8 @@ const PersonalDropdown = (props) => {
   };
 
   const preferDrawerModeSwitchModifiedHandler = (bool) => {
-    navigationContainer.setDrawerModePreference(bool);
+    // navigationContainer.setDrawerModePreference(bool);
+    mutate(bool);
   };
 
   const preferDrawerModeOnEditSwitchModifiedHandler = (bool) => {

packages/app/src/components/Sidebar.tsx

@@ -1,9 +1,9 @@
 import React, {
-  FC, useCallback, useEffect, useRef, useState,
+  FC, useCallback, useEffect, useRef, useState, memo,
 } from 'react';
 
 import {
-  useDrawerMode, useDrawerOpened, usePreferDrawerModeByUser,
+  useDrawerMode, useDrawerOpened,
   useSidebarCollapsed,
   useCurrentSidebarContents,
   useCurrentProductNavWidth,
@@ -95,13 +95,15 @@ const SidebarSkeltonContents = () => {
 type Props = {
 }
 
-const Sidebar: FC<Props> = (props: Props) => {
+const Sidebar: FC<Props> = memo((props: Props) => {
   const { data: isDrawerMode } = useDrawerMode();
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
   const { data: currentProductNavWidth, mutate: mutateProductNavWidth } = useCurrentProductNavWidth();
   const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
   const { data: isResizeDisabled, mutate: mutateSidebarResizeDisabled } = useSidebarResizeDisabled();
 
+  console.log('Sidebar Component has rendered: ', isDrawerMode, isDrawerOpened);
+
   /**
    * hack and override UIController.storeState
    *
@@ -325,6 +327,6 @@ const Sidebar: FC<Props> = (props: Props) => {
     </>
   );
 
-};
+});
 
 export default Sidebar;

packages/app/src/stores/ui.tsx

@@ -94,12 +94,17 @@ export const usePreferDrawerModeOnEditByUser = (isPrefered?: boolean): SWRRespon
 
 export const useDrawerMode = (): SWRResponse<boolean, Error> => {
   const key = isServer ? null : 'isDrawerMode';
+  const { localStorage } = window;
 
   const { data: editorMode } = useEditorMode();
-  const { data: preferDrawerModeByUser } = usePreferDrawerModeByUser();
-  const { data: preferDrawerModeOnEditByUser } = usePreferDrawerModeOnEditByUser();
+  const { data: preferDrawerModeByUser } = usePreferDrawerModeByUser(localStorage?.preferDrawerModeByUser === 'true');
+  const { data: preferDrawerModeOnEditByUser } = usePreferDrawerModeOnEditByUser(
+    localStorage.preferDrawerModeOnEditByUser == null || localStorage?.preferDrawerModeOnEditByUser === 'true',
+  );
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
 
+  console.log('useDrawerMode hook called:', editorMode, preferDrawerModeByUser, preferDrawerModeOnEditByUser);
+
   // get preference on view or edit
   const preferDrawerMode = editorMode !== EditorMode.View ? preferDrawerModeOnEditByUser : preferDrawerModeByUser;