2 files changed, 27 insertions, 1 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 50f43ce..7af5583 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -49,6 +49,18 @@ export default {
 			class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
 			{{tree.tolNode.name}}
 		</div>
+		<div v-if="tree.sideArea"
+			:style="{position: 'absolute', left: tree.sideArea.x+'px', top: tree.sideArea.y+'px',
+				width: (tree.sideArea.w + (tree.sideArea.sweptLeft ? tree.sideArea.extraSz : 0))+'px',
+				height: (tree.sideArea.h + (tree.sideArea.sweptLeft ? 0 : tree.sideArea.extraSz))+'px',
+				borderWidth: tree.sideArea.w > 0 ? '1px' : '0',
+				borderRightColor: (tree.sideArea.sweptLeft ? 'white' : 'currentColor'),
+				borderBottomColor: (tree.sideArea.sweptLeft ? 'currentColor' : 'white')}"
+			class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white">
+			<tile v-for="child in tree.sideChildren" :key="'SIDE_' + child.tolNode.name" :tree="child"
+				@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
+				></tile>
+		</div>
 		<tile v-for="child in tree.children" :key="child.tolNode.name" :tree="child"
 			@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
 			></tile>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 5c3d08e..a772594 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -27,12 +27,14 @@ export default {
 			let tree = {
 				tolNode:tol, children:[],
 				x:0, y:0, w:0, h:0, headerSz:0,
+				sideArea:{x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0},
 			};
 			function initTreeRec(tree, lvl){
 				if (lvl > 0)
 					tree.children = tree.tolNode.children.map(tNode => initTreeRec({
 						tolNode: tNode, children: [],
 						x:0, y:0, w:0, h:0, headerSz:0,
+						sideArea:{x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0},
 					}, lvl-1));
 				return tree;
 			}
@@ -78,13 +80,25 @@ export default {
 			}
 		},
 		applyLayout(layout, tree){
-			//layout format: {x, y, w, h, headerSz, children:[layout1, ...], contentW, contentH, empSpc}
+			//layout format: {x, y, w, h, headerSz, children:[layout1, ...], contentW, contentH, empSpc, sideArea}
 			tree.x = layout.x;
 			tree.y = layout.y;
 			tree.w = layout.w;
 			tree.h = layout.h;
 			tree.headerSz = layout.headerSz;
 			layout.children.forEach((n,i) => this.applyLayout(n, tree.children[i]));
+			//handle case where leaf nodes placed in leftover space from parent-sweep
+			if (layout.sideArea){
+				//add parent area coords
+				tree.sideArea = layout.sideArea;
+				//move leaf node children to parent area
+				tree.children.filter(n => n.children.length == 0).map(n => {
+					n.x += layout.sideArea.x;
+					n.y += layout.sideArea.y;
+				});
+			} else {
+				tree.sideArea = {x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0};
+			}
 		}
 	},
 	created(){