David Vogel
114a7d893c
- Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
120 lines
2.8 KiB
Plaintext
120 lines
2.8 KiB
Plaintext
<div vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633357633"}'>
|
|
<div :class='"d3c-1633357633-sidebar d3c-button-transparent d3c-color-layer-1 " + c.sidebarClasses'>
|
|
<div class="d3c-1633357633-sidebar-menu">
|
|
<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>
|
|
<div class="d3c-1633357633-sidebar-entries">
|
|
<vg-comp expr="c.Entries"></vg-comp>
|
|
</div>
|
|
<div class="d3c-1633357633-spacer"></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-transparent 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 0.5em;
|
|
box-sizing: border-box;
|
|
background-color: var(--d3c-color-background);
|
|
color: var(--d3c-color-text);
|
|
}
|
|
|
|
.d3c-1633357633-sidebar {
|
|
height: 100%;
|
|
border-right: 1px solid var(--d3c-color-border);
|
|
padding: 0 0.5em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--d3c-color-background);
|
|
color: var(--d3c-color-text);
|
|
z-index: 1;
|
|
}
|
|
|
|
.d3c-1633357633-sidebar-menu {
|
|
/*display: flex;
|
|
flex-direction: column;*/
|
|
}
|
|
|
|
@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 {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.d3c-1633357633-sidebar-entries > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.d3c-1633357633-bottom-entries > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.d3c-1633357633-spacer {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.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>
|