🐛 Sidebars not working

src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx

@@ -20,6 +20,6 @@ export const MobileRibbonSidebarDrawer = ({
     }}
     {...props}
   >
-    <DashboardSidebar location={location} />
+    <DashboardSidebar location={location} isGridstackReady />
   </Drawer>
 );

src/components/Dashboard/Views/DashboardView.tsx

@@ -21,6 +21,7 @@ export const DashboardView = () => {
   const mainAreaWidth = useGridstackStore(x => x.mainAreaWidth);
 
   useEffect(() => {
+    if (width === 0) return;
     setMainAreaWidth(width);
   }, [width]);
 
@@ -29,8 +30,8 @@ export const DashboardView = () => {
       {notReady ? <Center w="100%">
           <Loader />
         </Center> : <>
-      {layoutSettings?.enabledLeftSidebar && !doNotShowSidebar && mainAreaWidth ? (
-        <DashboardSidebar location="left" />
+      {layoutSettings?.enabledLeftSidebar && !doNotShowSidebar ? (
+        <DashboardSidebar location="left" isGridstackReady={!!mainAreaWidth} />
       ) : null}
       <Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
         {!mainAreaWidth ? null : wrappers.map((item) =>
@@ -41,8 +42,8 @@ export const DashboardView = () => {
           )
         )}
       </Stack>
-      {layoutSettings?.enabledRightSidebar && !doNotShowSidebar && mainAreaWidth ? (
-        <DashboardSidebar location="right" />
+      {layoutSettings?.enabledRightSidebar && !doNotShowSidebar ? (
+        <DashboardSidebar location="right" isGridstackReady={!!mainAreaWidth} />
       ) : null}
       </>
 }

src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx

@@ -3,16 +3,12 @@ import { RefObject } from 'react';
 import { useGridstack } from '../gridstack/use-gridstack';
 import { WrapperContent } from '../WrapperContent';
 
-interface DashboardSidebarProps {
+interface DashboardSidebarProps extends DashboardSidebarInnerProps {
   location: 'right' | 'left';
+  isGridstackReady: boolean;
 }
 
-export const DashboardSidebar = ({ location }: DashboardSidebarProps) => {
-  const { refs, apps, widgets } = useGridstack('sidebar', location);
-
-  const minRow = useMinRowForFullHeight(refs.wrapper);
-
-  return (
+export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => (
     <Card
       withBorder
       w={300}
@@ -21,19 +17,32 @@ export const DashboardSidebar = ({ location }: DashboardSidebarProps) => {
         borderStyle: 'dashed',
       }}
     >
-      <div
-        className="grid-stack grid-stack-sidebar"
-        style={{ transitionDuration: '0s', height: '100%' }}
-        data-sidebar={location}
-        // eslint-disable-next-line react/no-unknown-property
-        gs-min-row={minRow}
-        ref={refs.wrapper}
-      >
-        <WrapperContent apps={apps} refs={refs} widgets={widgets} />
-      </div>
+      {isGridstackReady && <SidebarInner location={location} />}
     </Card>
   );
+
+  interface DashboardSidebarInnerProps {
+    location: 'right' | 'left';
+  }
+
+// Is Required because of the gridstack main area width.
+const SidebarInner = ({ location }: DashboardSidebarInnerProps) => {
+  const { refs, apps, widgets } = useGridstack('sidebar', location);
+
+  const minRow = useMinRowForFullHeight(refs.wrapper);
+
+  return (
+<div
+  className="grid-stack grid-stack-sidebar"
+  style={{ transitionDuration: '0s', height: '100%' }}
+  data-sidebar={location}
+  // eslint-disable-next-line react/no-unknown-property
+  gs-min-row={minRow}
+  ref={refs.wrapper}
+>
+  <WrapperContent apps={apps} refs={refs} widgets={widgets} />
+</div>);
 };
 
 const useMinRowForFullHeight = (wrapperRef: RefObject<HTMLDivElement>) =>
-  wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 64) : 2;
+  wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 128) : 2;

src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts

@@ -1,6 +1,7 @@
 import { GridStack, GridStackNode } from 'fily-publish-gridstack';
 import { MutableRefObject, RefObject } from 'react';
 import { AppType } from '../../../../types/app';
+import { ShapeType } from '../../../../types/shape';
 import { IWidget } from '../../../../widgets/widgets';
 
 export const initializeGridstack = (
@@ -13,6 +14,7 @@ export const initializeGridstack = (
   widgets: IWidget<string, any>[],
   isEditMode: boolean,
   wrapperColumnCount: 3 | 6 | 12,
+  shapeSize: 'sm' | 'md' | 'lg',
   events: {
     onChange: (changedNode: GridStackNode) => void;
     onAdd: (addedNode: GridStackNode) => void;
@@ -21,14 +23,14 @@ export const initializeGridstack = (
   if (!wrapperRef.current) return;
   // calculates the currently available count of columns
   const columnCount = areaType === 'sidebar' ? 2 : wrapperColumnCount;
-  const minRow = areaType !== 'sidebar' ? 1 : Math.floor(wrapperRef.current.offsetHeight / 64);
+  const minRow = areaType !== 'sidebar' ? 1 : Math.floor(wrapperRef.current.offsetHeight / 128);
   // initialize gridstack
   const newGrid = gridRef;
   newGrid.current = GridStack.init(
     {
       column: columnCount,
       margin: 10,
-      cellHeight: 64,
+      cellHeight: 128,
       float: true,
       alwaysShowResizeHandle: 'mobile',
       acceptWidgets: true,
@@ -63,16 +65,26 @@ export const initializeGridstack = (
   grid.batchUpdate();
   grid.removeAll(false);
   items.forEach(
-    ({ id }) => {
+    ({ id, shape }) => {
       const item = itemRefs.current[id]?.current;
+      setAttributesFromShape(item, shape[shapeSize]);
       item && grid.makeWidget(item as HTMLDivElement);
     }
   );
   widgets.forEach(
-    ({ id }) => {
+    ({ id, shape }) => {
       const item = itemRefs.current[id]?.current;
+      setAttributesFromShape(item, shape[shapeSize]);
       item && grid.makeWidget(item as HTMLDivElement);
     }
   );
   grid.batchUpdate(false);
 };
+
+function setAttributesFromShape(ref: HTMLDivElement | null, sizedShape: ShapeType['lg']) {
+  if (!sizedShape || !ref) return;
+  ref.setAttribute('gs-x', sizedShape.location.x.toString());
+  ref.setAttribute('gs-y', sizedShape.location.y.toString());
+  ref.setAttribute('gs-w', sizedShape.size.width.toString());
+  ref.setAttribute('gs-h', sizedShape.size.height.toString());
+}

src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts

@@ -243,6 +243,7 @@ export const useGridstack = (
       widgets ?? [],
       isEditMode,
       wrapperColumnCount,
+      shapeSize,
       {
         onChange,
         onAdd,