🎨 Refactored dashboard-view

src/components/Dashboard/Views/DashboardView.tsx

@@ -2,7 +2,7 @@ import { Center, Group, Loader, Stack } from '@mantine/core';
 import { useEffect, useMemo, useRef } from 'react';
 import { useConfigContext } from '../../../config/provider';
 import { useResize } from '../../../hooks/use-resize';
-import { useScreenSmallerThan } from '../../../hooks/useScreenSmallerThan';
+import { useScreenLargerThan } from '../../../hooks/useScreenLargerThan';
 import { CategoryType } from '../../../types/category';
 import { WrapperType } from '../../../types/wrapper';
 import { DashboardCategory } from '../Wrappers/Category/Category';
@@ -12,11 +12,43 @@ import { DashboardWrapper } from '../Wrappers/Wrapper/Wrapper';
 
 export const DashboardView = () => {
   const wrappers = useWrapperItems();
-  const layoutSettings = useConfigContext()?.config?.settings.customization.layout;
-  const doNotShowSidebar = useScreenSmallerThan('md');
-  const notReady = typeof doNotShowSidebar === 'undefined';
+  const sidebarsVisible = useSidebarVisibility();
+  const { isReady, mainAreaRef } = usePrepareGridstack();
+
+  return (
+    <Group align="top" h="100%">
+      {sidebarsVisible.isLoading ?
+        <Center w="100%">
+          <Loader />
+        </Center>
+      :
+      <>
+        {sidebarsVisible.left ? (
+          <DashboardSidebar location="left" isGridstackReady={isReady} />
+        ) : null}
+
+        <Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
+          {!isReady ? null : wrappers.map((item) =>
+            item.type === 'category' ? (
+              <DashboardCategory key={item.id} category={item as unknown as CategoryType} />
+            ) : (
+              <DashboardWrapper key={item.id} wrapper={item as WrapperType} />
+            )
+          )}
+        </Stack>
+
+        {sidebarsVisible.right ? (
+          <DashboardSidebar location="right" isGridstackReady={isReady} />
+        ) : null}
+      </>
+}
+    </Group>
+  );
+};
+
+const usePrepareGridstack = () => {
   const mainAreaRef = useRef<HTMLDivElement>(null);
-  const { width } = useResize(mainAreaRef, [doNotShowSidebar]);
+  const { width } = useResize(mainAreaRef, []);
   const setMainAreaWidth = useGridstackStore(x => x.setMainAreaWidth);
   const mainAreaWidth = useGridstackStore(x => x.mainAreaWidth);
 
@@ -25,30 +57,23 @@ export const DashboardView = () => {
     setMainAreaWidth(width);
   }, [width]);
 
-  return (
-    <Group align="top" h="100%">
-      {notReady ? <Center w="100%">
-          <Loader />
-        </Center> : <>
-      {layoutSettings?.enabledLeftSidebar && !doNotShowSidebar ? (
-        <DashboardSidebar location="left" isGridstackReady={!!mainAreaWidth} />
-      ) : null}
-      <Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
-        {!mainAreaWidth ? null : wrappers.map((item) =>
-          item.type === 'category' ? (
-            <DashboardCategory key={item.id} category={item as unknown as CategoryType} />
-          ) : (
-            <DashboardWrapper key={item.id} wrapper={item as WrapperType} />
-          )
-        )}
-      </Stack>
-      {layoutSettings?.enabledRightSidebar && !doNotShowSidebar ? (
-        <DashboardSidebar location="right" isGridstackReady={!!mainAreaWidth} />
-      ) : null}
-      </>
-}
-    </Group>
-  );
+  return {
+    isReady: !!mainAreaWidth,
+    mainAreaRef,
+  };
+};
+
+const useSidebarVisibility = () => {
+  const layoutSettings = useConfigContext()?.config?.settings.customization.layout;
+  const screenLargerThanMd = useScreenLargerThan('md'); // For smaller screens mobile ribbons are displayed with drawers
+
+  const isScreenSizeUnknown = typeof screenLargerThanMd === 'undefined';
+
+  return {
+    right: layoutSettings?.enabledRightSidebar && screenLargerThanMd,
+    left: layoutSettings?.enabledLeftSidebar && screenLargerThanMd,
+    isLoading: isScreenSizeUnknown,
+  };
 };
 
 const useWrapperItems = () => {