applayout - hopefully improved banner handling

Author: marcus-wishes

library/src/layouting/AppLayout.tsx

@@ -29,6 +29,7 @@ export function initTopNavigationHeight() {
 	}
 	const topNavHeight = topNav[0].clientHeight
 	if (topNavHeight) {
+		console.info("UIKitTs - Top navigation height set to:", topNavHeight)
 		document.documentElement.style.setProperty(
 			topNavigationHeightVar,
 			`${topNavHeight}px`,
@@ -40,6 +41,7 @@ export function initTopNavigationHeight() {
 		const header = headers.item(i)
 		if (header?.getAttribute("role") === "banner") {
 			const bannerHeight = header.clientHeight || 0
+			console.info("UIKitTs - Banner height set to:", bannerHeight)
 			document.documentElement.style.setProperty(
 				bannerHeightVar,
 				`${bannerHeight}px`,
@@ -54,7 +56,7 @@ export function initTopNavigationHeight() {
 
 	if (!uikts_layouting_heightCB) {
 		window.addEventListener("resize", initTopNavigationHeight)
-		console.info("Added resize event listener for App layouting")
+		console.info("UIKitTs - Added resize event listener for App layouting")
 		uikts_layouting_heightCB = true
 	}
 }
@@ -68,11 +70,13 @@ function Container({
 	className,
 	style,
 	testId,
+	useBanner = false,
 }: {
 	children: React.ReactNode
 	className?: string
 	style?: React.CSSProperties
 	testId?: string
+	useBanner?: boolean
 }) {
 	return (
 		<div
@@ -83,15 +87,24 @@ function Container({
 			data-layout-container="true"
 			data-testid={testId}
 			style={{
-				gridTemplateAreas: `
+				gridTemplateAreas: useBanner
+					? `
 					"left-panel banner right-panel"
 					"left-panel top-navigation right-panel"
 					"left-panel content right-panel"
+				`
+					: `
+					"left-panel top-navigation right-panel"
+					"left-panel content right-panel"
 				`,
 				gridTemplateColumns: `var(${leftPanelWidthVar}, 0px) minmax(0, 1fr) var(${rightPanelWidthVar}, 0px)`,
-				gridTemplateRows: `var(${topNavigationHeightVar}, min-content) 1fr`,
+				gridTemplateRows: useBanner
+					? `var(${bannerHeightVar}, 0) var(${topNavigationHeightVar}, min-content) 1fr`
+					: `var(${topNavigationHeightVar}, min-content) 1fr`,
 				outline: "none",
-				height: `calc(100dvh - var(${bannerHeightVar}, 0px))`,
+				height: useBanner
+					? "100dvh"
+					: `calc(100dvh - var(${bannerHeightVar}, 0px))`,
 				...style,
 			}}
 		>

showcase/public/showcase-sources.txt

@@ -196,7 +196,6 @@ export default function AnimatedListShowcase(props: ShowcaseProps) {
 	)
 }
 
-import React from "react"
 import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
@@ -220,7 +219,7 @@ export default function AppLayoutShowcase(props: ShowcaseProps) {
 			packages={[
 				{
 					name: "@linked-planet/ui-kit-ts",
-					url: "https://linked-planet.github.io/ui-kit-ts/applayoutexample/index.html",
+					url: "/ui-kit-ts/applayoutexample/index.html",
 				},
 			]}
 			examples={[
@@ -8335,6 +8334,7 @@ function Example() {
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
+		/*requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
@@ -8352,8 +8352,7 @@ function Example() {
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
-		requestMoreEntriesCB()
-		requestMoreEntriesCB()
+		requestMoreEntriesCB()*/
 	}, [requestMoreEntriesCB])
 
 	return (

showcase/src/components/showcase/wrapper/AppLayoutShowcase.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
@@ -22,7 +21,7 @@ export default function AppLayoutShowcase(props: ShowcaseProps) {
 			packages={[
 				{
 					name: "@linked-planet/ui-kit-ts",
-					url: "https://linked-planet.github.io/ui-kit-ts/applayoutexample/index.html",
+					url: "/ui-kit-ts/applayoutexample/index.html",
 				},
 			]}
 			examples={[