🎨 Refactored dashboard-view

data/configs/default.json

@@ -17,67 +17,6 @@
     }
   ],
   "apps": [
-    {
-      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
-      "name": "Documentation",
-      "url": "https://homarr.dev",
-      "behaviour": {
-        "onClickUrl": "https://homarr.dev",
-        "externalUrl": "https://homarr.dev",
-        "isOpeningNewTab": true
-      },
-      "network": {
-        "enabledStatusChecker": false,
-        "okStatus": [
-          200
-        ]
-      },
-      "appearance": {
-        "iconUrl": "/imgs/logo/logo.png"
-      },
-      "integration": {
-        "type": null,
-        "properties": []
-      },
-      "area": {
-        "type": "category",
-        "properties": {
-          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
-        }
-      },
-      "shape": {
-        "md": {
-          "location": {
-            "x": 0,
-            "y": 10
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "sm": {
-          "location": {
-            "x": 0,
-            "y": 10
-          },
-          "size": {
-            "width": 2,
-            "height": 1
-          }
-        },
-        "lg": {
-          "location": {
-            "x": 3,
-            "y": 1
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        }
-      }
-    },
     {
       "id": "5df743d9-5cb1-457c-85d2-64ff86855652",
       "name": "Your app",
@@ -136,67 +75,6 @@
         "properties": []
       }
     },
-    {
-      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990",
-      "name": "Donate",
-      "url": "https://ko-fi.com/ajnart",
-      "behaviour": {
-        "onClickUrl": "https://ko-fi.com/ajnart",
-        "externalUrl": "https://ko-fi.com/ajnart",
-        "isOpeningNewTab": true
-      },
-      "network": {
-        "enabledStatusChecker": false,
-        "okStatus": [
-          200
-        ]
-      },
-      "appearance": {
-        "iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png"
-      },
-      "integration": {
-        "type": null,
-        "properties": []
-      },
-      "area": {
-        "type": "sidebar",
-        "properties": {
-          "location": "left"
-        }
-      },
-      "shape": {
-        "md": {
-          "location": {
-            "x": 1,
-            "y": 0
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "sm": {
-          "location": {
-            "x": 1,
-            "y": 0
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "lg": {
-          "location": {
-            "x": 1,
-            "y": 0
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        }
-      }
-    },
     {
       "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330",
       "name": "Contribute",
@@ -377,6 +255,128 @@
         }
       }
     },
+    {
+      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990",
+      "name": "Donate",
+      "url": "https://ko-fi.com/ajnart",
+      "behaviour": {
+        "onClickUrl": "https://ko-fi.com/ajnart",
+        "externalUrl": "https://ko-fi.com/ajnart",
+        "isOpeningNewTab": true
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": [
+          200
+        ]
+      },
+      "appearance": {
+        "iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png"
+      },
+      "integration": {
+        "type": null,
+        "properties": []
+      },
+      "area": {
+        "type": "sidebar",
+        "properties": {
+          "location": "left"
+        }
+      },
+      "shape": {
+        "md": {
+          "location": {
+            "x": 1,
+            "y": 0
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "sm": {
+          "location": {
+            "x": 1,
+            "y": 0
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "lg": {
+          "location": {
+            "x": 1,
+            "y": 0
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        }
+      }
+    },
+    {
+      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
+      "name": "Documentation",
+      "url": "https://homarr.dev",
+      "behaviour": {
+        "onClickUrl": "https://homarr.dev",
+        "externalUrl": "https://homarr.dev",
+        "isOpeningNewTab": true
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": [
+          200
+        ]
+      },
+      "appearance": {
+        "iconUrl": "/imgs/logo/logo.png"
+      },
+      "integration": {
+        "type": null,
+        "properties": []
+      },
+      "area": {
+        "type": "category",
+        "properties": {
+          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
+        }
+      },
+      "shape": {
+        "md": {
+          "location": {
+            "x": 0,
+            "y": 10
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "sm": {
+          "location": {
+            "x": 0,
+            "y": 10
+          },
+          "size": {
+            "width": 2,
+            "height": 1
+          }
+        },
+        "lg": {
+          "location": {
+            "x": 3,
+            "y": 1
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        }
+      }
+    },
     {
       "id": "e41a11f5-9c6e-41bc-ac0e-4c4c47582faa",
       "name": "Your app",

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 = () => {