David Vogel
c0f61b57ce
- Make sidebar gray - Give buttons a line border - Add active selector to buttons - Change some margins - Automatically make buttons transparent when they are in a sidebar
105 lines
2.3 KiB
Plaintext
105 lines
2.3 KiB
Plaintext
<div vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "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 class="d3c-1633357633-bottom-entries">
|
|
<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(127, 127, 127, 0.2);
|
|
display: flex;
|
|
position: relative;
|
|
padding: 0 0.5em;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.d3c-1633357633-sidebar {
|
|
height: 100%;
|
|
border-right: 1px solid RGBA(127, 127, 127, 0.2);
|
|
padding: 0 0.5em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: RGB(240, 240, 240);
|
|
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-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;
|
|
}
|
|
</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>
|