show sidebar in collpsed mode

apps/app/src/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -2,8 +2,9 @@
 
 @use '@growi/core/scss/growi-official-colors';
 
+@use '~/styles/variables' as var;
+
 @use '../button-styles';
-@use '../variables' as var;
 
 // GROWI Logo
 .grw-app-title :global {

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -1,9 +1,8 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use '~/styles/variables' as var;
 @use '~/styles/mixins';
 
-@use './variables' as var;
-
 .grw-sidebar :global {
   top: 0;
 

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

@@ -1,7 +1,8 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use '~/styles/variables' as var;
+
 @use '../button-styles';
-@use '../variables' as var;
 
 .btn-toggle-collapse :global {
   @extend %btn-primary-basis;

apps/app/src/components/Sidebar/SidebarNav/PrimaryItems.module.scss

@@ -1,7 +1,7 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use '~/styles/variables' as var;
 @use '../button-styles';
-@use '../variables' as var;
 
 @use './variables' as sidebarNavVar;
 

apps/app/src/components/Sidebar/SidebarNav/SidebarNav.module.scss

@@ -1,6 +1,6 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-@use '../variables' as var;
+@use '~/styles/variables' as var;
 
 .grw-sidebar-nav :global {
   // set position and z-index to prevent dropdowns covered by other element

apps/app/src/components/Sidebar/_button-styles.scss

@@ -1,4 +1,4 @@
-@use './variables' as var;
+@use '~/styles/variables' as var;
 
 %btn-primary-basis {
   padding-top: .75rem;

apps/app/src/components/Sidebar/_variables.scss

@@ -1 +0,0 @@
-$grw-sidebar-nav-width: 48px;

apps/app/src/stores/ui.tsx

@@ -231,34 +231,6 @@ export const useCurrentProductNavWidth = (initialData?: number): SWRResponse<num
   return useSWRStatic('productNavWidth', initialData, { fallbackData: 320 });
 };
 
-export const useDrawerMode = (): SWRResponse<boolean, Error> => {
-  const { data: editorMode } = useEditorMode();
-  const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
-
-  const condition = editorMode != null && isDeviceSmallerThanMd != null;
-
-  const calcDrawerMode = (
-      _keyString: string,
-      editorMode: EditorMode,
-      isDeviceSmallerThanMd: boolean,
-  ): boolean => {
-    return isDeviceSmallerThanMd
-      ? true
-      : editorMode === EditorMode.Editor;
-  };
-
-  return useSWRImmutable(
-    condition ? ['isDrawerMode', editorMode, isDeviceSmallerThanMd] : null,
-    // calcDrawerMode,
-    key => calcDrawerMode(...key),
-    condition
-      ? {
-        fallbackData: calcDrawerMode('isDrawerMode', editorMode, isDeviceSmallerThanMd),
-      }
-      : undefined,
-  );
-};
-
 export const useDrawerOpened = (isOpened?: boolean): SWRResponse<boolean, Error> => {
   return useSWRStatic('isDrawerOpened', isOpened, { fallbackData: false });
 };
@@ -278,23 +250,28 @@ type DetectSidebarModeUtils = {
 }
 
 export const useSidebarMode = (): SWRResponseWithUtils<DetectSidebarModeUtils, SidebarMode> => {
-  const { data: isDrawerMode } = useDrawerMode();
+  const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
+  const { data: editorMode } = useEditorMode();
   const { data: isCollapsedModeUnderDockMode } = usePreferCollapsedMode();
 
-  const condition = isDrawerMode != null && isCollapsedModeUnderDockMode != null;
+  const condition = isDeviceSmallerThanMd != null && editorMode != null && isCollapsedModeUnderDockMode != null;
+
+  const isEditorMode = editorMode === EditorMode.Editor;
 
-  const fetcher = useCallback(([, isDrawerMode, isCollapsedModeUnderDockMode]: [Key, boolean|undefined, boolean|undefined]) => {
-    if (isDrawerMode) {
+  const fetcher = useCallback((
+      [, isDeviceSmallerThanMd, isEditorMode, isCollapsedModeUnderDockMode]: [Key, boolean|undefined, boolean|undefined, boolean|undefined],
+  ) => {
+    if (isDeviceSmallerThanMd) {
       return SidebarMode.DRAWER;
     }
-    return isCollapsedModeUnderDockMode ? SidebarMode.COLLAPSED : SidebarMode.DOCK;
+    return isEditorMode || isCollapsedModeUnderDockMode ? SidebarMode.COLLAPSED : SidebarMode.DOCK;
   }, []);
 
   const swrResponse = useSWRImmutable(
-    condition ? ['sidebarMode', isDrawerMode, isCollapsedModeUnderDockMode] : null,
+    condition ? ['sidebarMode', isDeviceSmallerThanMd, isEditorMode, isCollapsedModeUnderDockMode] : null,
     // calcDrawerMode,
     fetcher,
-    { fallbackData: fetcher(['sidebarMode', isDrawerMode, isCollapsedModeUnderDockMode]) },
+    { fallbackData: fetcher(['sidebarMode', isDeviceSmallerThanMd, isEditorMode, isCollapsedModeUnderDockMode]) },
   );
 
   const _isDrawerMode = useCallback(() => swrResponse.data === SidebarMode.DRAWER, [swrResponse.data]);

apps/app/src/styles/_editor.scss

@@ -5,7 +5,7 @@
 
 // global imported
 .layout-root.editing {
-  overflow-y: hidden !important;
+  overflow: hidden !important;
 
   .page-wrapper {
     top: 0;
@@ -27,9 +27,8 @@
    * Expand Editor
    *****************/
   .dynamic-layout-root {
-    // left: var.$grw-sidebar-nav-width;
-    // width: calc(100vw - var.$grw-sidebar-nav-width);
-    width: 100vw;
+    left: var.$grw-sidebar-nav-width;
+    width: calc(100vw - var.$grw-sidebar-nav-width);
     height: 100vh;
   }
   .grw-editor-navbar-bottom {

apps/app/src/styles/_variables.scss

@@ -6,6 +6,8 @@ $grw-marker-cyan: #6ff;
 $grw-marker-green: #6f6;
 
 //== Layout
+$grw-sidebar-nav-width: 48px;
+
 $grw-navbar-bottom-height: 48px;
 $grw-editor-navbar-bottom-height: 48px;