fix(layout): return JSX element (#82)

* fix(layout): fill height without overflow

Author: jer3m01

src/components/layout/content.tsx

@@ -22,4 +22,6 @@ export default function LayoutContent(props: LayoutContentProps) {
 	const [_, set] = context.content;
 
 	set(<div {...combinedProps} />);
+
+	return <></>;
 }

src/components/layout/index.scss

@@ -1,98 +1,99 @@
-.jdd.layout {
-  --jdd-left-sidebar-offset: 0px;
-  --jdd-right-sidebar-offset: 0px;
-  --jdd-sidebar-transition: "";
-  --jdd-layout-backdrop-opacity: 0;
-
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  min-width: 100vw;
-
-
-  .layout-header {
-    order: 1;
-  }
-
-  .layout-main {
-    order: 2;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: row;
-
-    .layout-sidebar {
-      position: sticky;
-      top: 0;
-      height: 100vh;
-      height: 100dvh;
-      overflow: scroll;
-    }
-
-    .layout-content {
-      flex-grow: 1;
-    }
-  }
-
-  .layout-footer {
-    order: 3;
-  }
-
-  &.mobile {
-    .layout-main {
-      .layout-sidebar {
-        position: fixed;
-        top: 0;
-        transition: var(--jdd-sidebar-transition);
-        z-index: 50;
-        max-width: 90vw;
-      }
-
-      .layout-sidebar:first-child {
-        left: 0;
-        transform: translate3d(min((calc(-100% + var(--jdd-left-sidebar-offset))), 0px), 0, 0);
-      }
-
-      .layout-sidebar:last-child {
-        right: 0;
-        transform: translate3d(max((calc(100% - var(--jdd-right-sidebar-offset))), 0px), 0, 0);
-      }
-    }
-
-   .layout-backdrop {
-      opacity: max(0, var(--jdd-layout-backdrop-opacity));
-      position: fixed;
-      transition: var(--jdd-sidebar-transition);
-      inset: 0;
-      background: rgba(var(--jdd-gray-15-rgb), 0.2);
-      pointer-events: none;
-
-      .jdd-dark & {
-        background: rgba(var(--jdd-gray-1-rgb), 0.15);
-      }
-
-    }
-  }
-}
-
-.jdd.layout.mobile {
-  &.open-left .layout-sidebar:first-child {
-    transform: translate3d(calc(0px - var(--jdd-left-sidebar-offset)), 0, 0);
-  }
-
-  &.open-right .layout-sidebar:last-child {
-    transform: translate3d(var(--jdd-right-sidebar-offset), 0, 0);
-  }
-
-  &.open-right, &.open-left {
-    --jdd-layout-backdrop-opacity: 1;
-
-    .layout-backdrop {
-      pointer-events: all;
-      opacity: min(1, var(--jdd-layout-backdrop-opacity));
-    }
-  }
-}
-
-body.jdd-sidebar-open {
-  overflow-y: hidden;
+.jdd.layout {
+  --jdd-left-sidebar-offset: 0px;
+  --jdd-right-sidebar-offset: 0px;
+  --jdd-sidebar-transition: "";
+  --jdd-layout-backdrop-opacity: 0;
+
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+  width: 100dvw;
+  overflow-x: hidden;
+  overflow-y: visible;
+
+
+  .layout-header {
+    order: 1;
+  }
+
+  .layout-main {
+    order: 2;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+
+    .layout-sidebar {
+      position: sticky;
+      top: 0;
+      overflow-y: auto;
+    }
+
+    .layout-content {
+      flex-grow: 1;
+    }
+  }
+
+  .layout-footer {
+    order: 3;
+  }
+
+  &.mobile {
+    .layout-main {
+      .layout-sidebar {
+        position: fixed;
+        top: 0;
+        transition: var(--jdd-sidebar-transition);
+        z-index: 50;
+        max-width: 90vw;
+      }
+
+      .layout-sidebar:first-child {
+        left: 0;
+        transform: translate3d(min((calc(-100% + var(--jdd-left-sidebar-offset))), 0px), 0, 0);
+      }
+
+      .layout-sidebar:last-child {
+        right: 0;
+        transform: translate3d(max((calc(100% - var(--jdd-right-sidebar-offset))), 0px), 0, 0);
+      }
+    }
+
+    .layout-backdrop {
+      opacity: max(0, var(--jdd-layout-backdrop-opacity));
+      position: fixed;
+      transition: var(--jdd-sidebar-transition);
+      inset: 0;
+      background: rgba(var(--jdd-gray-15-rgb), 0.2);
+      pointer-events: none;
+
+      .jdd-dark & {
+        background: rgba(var(--jdd-gray-1-rgb), 0.15);
+      }
+
+    }
+  }
+}
+
+.jdd.layout.mobile {
+  &.open-left .layout-sidebar:first-child {
+    transform: translate3d(calc(0px - var(--jdd-left-sidebar-offset)), 0, 0);
+  }
+
+  &.open-right .layout-sidebar:last-child {
+    transform: translate3d(var(--jdd-right-sidebar-offset), 0, 0);
+  }
+
+  &.open-right, &.open-left {
+    --jdd-layout-backdrop-opacity: 1;
+
+    .layout-backdrop {
+      pointer-events: all;
+      opacity: min(1, var(--jdd-layout-backdrop-opacity));
+    }
+  }
+}
+
+body.jdd-sidebar-open {
+  overflow-y: hidden;
 }

src/components/layout/sidebar.tsx

@@ -30,4 +30,6 @@ export default function LayoutSidebar(props: LayoutSidebarProps) {
 		local.position === "left" ? context.sidebarLeft : context.sidebarRight;
 
 	set(<div {...combinedProps} />);
+
+	return <></>;
 }