D3vugu-components/components/navigation/sidebar.vugu

<div vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633357633"}'>
	<div :class='"d3c-1633357633-sidebar d3c-button-borderless d3c-color-layer-1 " + c.sidebarClasses'>
		<div class="d3c-1633357633-sidebar-menu">
			<div>
				<input:Button @Click="c.handleMenuButton(event)">
					<vg-slot name="IconSlot"><icons:LGlobalNav></icons:LGlobalNav></vg-slot>
				</input:Button>
			</div>
			<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-bottom-entries">
			<vg-comp expr="c.BottomEntries"></vg-comp>
		</div>
	</div>

	<div class="d3c-1633357633-body">
		<div vg-if="c.showBodyOverlay" class="d3c-1633357633-body-overlay" @click="c.handleOverlayClick(event)">
		</div>
		<div class="d3c-1633357633-menu d3c-button-borderless d3c-color-layer-1">
			<input:Button @Click="c.handleMenuButton(event)">
				<vg-slot name="IconSlot"><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;
		background-color: var(--d3c-color-background);
		color: var(--d3c-color-text);
	}

	.d3c-1633357633-menu {
		width: 100%;
		border-bottom: 1px solid var(--d3c-color-border);
		display: flex;
		position: relative;
		gap: 0.5em;
		padding: 0.5em;
		box-sizing: border-box;
		background-color: var(--d3c-color-background);
		color: var(--d3c-color-text);
	}

	.d3c-1633357633-sidebar {
		height: 100%;
		box-sizing: border-box;
		border-right: 1px solid var(--d3c-color-border);
		padding: 0.5em;
		display: flex;
		flex-direction: column;
		gap: 1em;
		background-color: var(--d3c-color-background);
		color: var(--d3c-color-text);
		z-index: 1;
	}

	.d3c-1633357633-sidebar-menu {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
	}

	@media (min-aspect-ratio: 1/1) {
		.d3c-1633357633-menu, .d3c-1633357633-body-overlay {
			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 {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		overflow-y: scroll;
		flex-grow: 1;
	}

	.d3c-1633357633-bottom-entries {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
	}

	.d3c-1633357633-sidebar-entries > * {
		width: 100%;
	}

	.d3c-1633357633-bottom-entries > * {
		width: 100%;
	}

	.d3c-1633357633-body {
		overflow: auto;
		flex-grow: 1;
		flex-shrink: 1;
	}

	.d3c-1633357633-body-overlay {
		width: 100%;
		height: 100%;
		position: fixed;
		/*backdrop-filter: blur(1px);*/
	}
</style>

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