You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.0 KiB
Plaintext
130 lines
3.0 KiB
Plaintext
<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>
|