D3vugu-components/components/navigation/sidebar.vugu

<div vg-attr="c.AttrMap" class="d3c-1633357633">
	<div :class='"d3c-1633357633-sidebar " + c.sidebarClasses'>
		<div class="d3c-1633357633-sidebar-menu">
			<input:Button @Click="c.handleMenuButton(event)">
				<vg-slot name="SymbolSlot"><icons:LGlobalNav></icons:LGlobalNav></vg-slot>
			</input:Button>
			<vg-comp expr="c.MenuEntries"></vg-comp>
		</div>
		<div class="d3c-1633357633-sidebar-entries">
			<vg-comp expr="c.Entries"></vg-comp>
		</div>
		<div class="d3c-1633357633-spacer"></div>
		<div>
			<vg-comp expr="c.BottomEntries"></vg-comp>
		</div>
	</div>

	<div class="d3c-1633357633-body">
		<div class="d3c-1633357633-menu">
			<input:Button @Click="c.handleMenuButton(event)">
				<vg-slot name="SymbolSlot"><icons:LGlobalNav></icons:LGlobalNav></vg-slot>
			</input:Button>
			<vg-comp expr="c.MenuEntries"></vg-comp>
		</div>
		<vg-comp expr="c.Body"></vg-comp>
	</div>
</div>

<style>
	.d3c-1633357633 {
		width: 100%;
		height: 100%;
		position: absolute;
		display: flex;
	}

	.d3c-1633357633-menu {
		width: 100%;
		border-bottom: 1px solid RGBA(0, 0, 0, 0.1);
		display: flex;
		position: relative;
		padding: 0 8px;
		box-sizing: border-box;
	}

	.d3c-1633357633-sidebar {
		height: 100%;
		border-right: 1px solid RGBA(0, 0, 0, 0.1);
		padding: 0 8px;
		display: flex;
		flex-direction: column;
		background-color: white;
		z-index: 1;
	}

	.d3c-1633357633-sidebar-menu {
		/*display: flex;
		flex-direction: column;*/
	}

	@media (min-aspect-ratio: 1/1) {
		.d3c-1633357633-menu {
			display: none;
		}
	}
	@media not all and (min-aspect-ratio: 1/1) {
		.d3c-1633357633-sidebar-minimized {
			display: none;
		}
		.d3c-1633357633-sidebar {
			position: absolute;
		}
	}

	.d3c-1633357633-sidebar-entries {
		overflow-y: scroll;
	}

	.d3c-1633357633-spacer {
		flex-grow: 1;
	}

	.d3c-1633357633-body {
		overflow: auto;
		flex-grow: 1;
		flex-shrink: 1;
	}
</style>

<script type="application/x-go">
	import (
		"git.d3nexus.de/Dadido3/D3vugu-components/icons"
		"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
	)
</script>