Merge pull request #8181 from weseek/imprv/sidebar-on-edit

imprv: Sidebar on edit

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,10 +5,9 @@
 
 // global imported
 .layout-root.editing {
-  overflow-y: hidden !important;
+  overflow: hidden !important;
 
   .page-wrapper {
-    top: 0;
     height: 100vh;
   }
 
@@ -26,6 +25,10 @@
   /*****************
    * Expand Editor
    *****************/
+  .dynamic-layout-root {
+    width: calc(100vw - var.$grw-sidebar-nav-width);
+    height: 100vh;
+  }
   .grw-editor-navbar-bottom {
     height: var.$grw-editor-navbar-bottom-height;
 

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;
 

packages/editor/index.html

@@ -7,7 +7,7 @@
     <title>Vite + React + TS</title>
   </head>
   <body>
-    <div id="root" class="d-flex flex-column vw-100 vh-100"></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

packages/editor/src/components/playground/Playground.tsx

@@ -49,7 +49,7 @@ export const Playground = (): JSX.Element => {
   }, [codeMirrorEditor]);
 
   return (
-    <>
+    <div className="d-flex flex-column vw-100 vh-100">
       <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '83px' }}>
         <div className="text-white">GrowiSubNavigation</div>
       </div>
@@ -71,6 +71,6 @@ export const Playground = (): JSX.Element => {
       <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '50px' }}>
         <div className="text-white">EditorNavbarBottom</div>
       </div>
-    </>
+    </div>
   );
 };