Dadido3/D3vugu-components
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Automatically close hovering sidebar on click

Browse Source
This commit is contained in:
David Vogel 2023-05-18 15:48:19 +02:00
parent 05713d8a4d
commit a10028559e
3 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/navigation/sidebar.go
View File

@ -10,8 +10,9 @@ type Sidebar struct {
BottomEntries vugu.Builder `vugu:"data"` // Static bottom part of the sidebar. BottomEntries vugu.Builder `vugu:"data"` // Static bottom part of the sidebar.
Body vugu.Builder `vugu:"data"` // The body contains the content that is right to or behind the sidebar. Body vugu.Builder `vugu:"data"` // The body contains the content that is right to or behind the sidebar.
Minimized bool `vugu:"data"` // If true, the sidebar is reduced to icons. Minimized bool `vugu:"data"` // If true, the sidebar is reduced to icons.
sidebarClasses string `vugu:"data"` sidebarClasses string
bodyOverlayStyle string
} }
func (c *Sidebar) Init(ctx vugu.InitCtx) { func (c *Sidebar) Init(ctx vugu.InitCtx) {
@ -21,11 +22,17 @@ func (c *Sidebar) Init(ctx vugu.InitCtx) {
func (c *Sidebar) Compute(ctx vugu.ComputeCtx) { func (c *Sidebar) Compute(ctx vugu.ComputeCtx) {
if c.Minimized { if c.Minimized {
c.sidebarClasses = "d3c-1633357633-sidebar-minimized" c.sidebarClasses = "d3c-1633357633-sidebar-minimized"
c.bodyOverlayStyle = "display: none;"
} else { } else {
c.sidebarClasses = "" c.sidebarClasses = ""
c.bodyOverlayStyle = ""
} }
} }
func (c *Sidebar) handleMenuButton(event vugu.DOMEvent) { func (c *Sidebar) handleMenuButton(event vugu.DOMEvent) {
c.Minimized = !c.Minimized c.Minimized = !c.Minimized
} }
func (c *Sidebar) handleOverlayClick(event vugu.DOMEvent) {
c.Minimized = true
}

11
components/navigation/sidebar.vugu
View File

@ -16,6 +16,8 @@
</div> </div>
<div class="d3c-1633357633-body"> <div class="d3c-1633357633-body">
<div class="d3c-1633357633-body-overlay" :style="c.bodyOverlayStyle" @click="c.handleOverlayClick(event)">
</div>
<div class="d3c-1633357633-menu d3c-color-layer-1"> <div class="d3c-1633357633-menu d3c-color-layer-1">
<input:Button @Click="c.handleMenuButton(event)"> <input:Button @Click="c.handleMenuButton(event)">
<vg-slot name="SymbolSlot"><icons:LGlobalNav></icons:LGlobalNav></vg-slot> <vg-slot name="SymbolSlot"><icons:LGlobalNav></icons:LGlobalNav></vg-slot>
@ -64,7 +66,7 @@
} }
@media (min-aspect-ratio: 1/1) { @media (min-aspect-ratio: 1/1) {
.d3c-1633357633-menu { .d3c-1633357633-menu, .d3c-1633357633-body-overlay {
display: none; display: none;
} }
} }
@ -98,6 +100,13 @@
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
} }
.d3c-1633357633-body-overlay {
width: 100%;
height: 100%;
position: fixed;
/*backdrop-filter: blur(1px);*/
}
</style> </style>
<script type="application/x-go"> <script type="application/x-go">

18
components/navigation/sidebar_vgen.go
View File

@ -155,6 +155,22 @@ func (c *Sidebar) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
_ = vgparent _ = vgparent
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"} vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn) vgparent.AppendChild(vgn)
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1633357633-body-overlay"}}}
vgparent.AppendChild(vgn)
vgn.AddAttrInterface("style", c.bodyOverlayStyle)
vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
EventType: "click",
Func: func(event vugu.DOMEvent) { c.handleOverlayClick(event) },
// TODO: implement capture, etc. mostly need to decide syntax
})
{
vgparent := vgn
_ = vgparent
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
}
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
vgparent.AppendChild(vgn)
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1633357633-menu d3c-color-layer-1"}}} vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1633357633-menu d3c-color-layer-1"}}}
vgparent.AppendChild(vgn) vgparent.AppendChild(vgn)
{ {
@ -233,7 +249,7 @@ func (c *Sidebar) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
} }
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)} vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
{ {
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633357633 {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1633357633-menu {\n\t\twidth: 100%;\n\t\tborder-bottom: 1px solid var(--d3c-color-border);\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tpadding: 0 0.5em;\n\t\tbox-sizing: border-box;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1633357633-sidebar {\n\t\theight: 100%;\n\t\tborder-right: 1px solid var(--d3c-color-border);\n\t\tpadding: 0 0.5em;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\tz-index: 1;\n\t}\n\n\t.d3c-1633357633-sidebar-menu {\n\t\t/*display: flex;\n\t\tflex-direction: column;*/\n\t}\n\n\t@media (min-aspect-ratio: 1/1) {\n\t\t.d3c-1633357633-menu {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t@media not all and (min-aspect-ratio: 1/1) {\n\t\t.d3c-1633357633-sidebar-minimized {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.d3c-1633357633-sidebar {\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t.d3c-1633357633-sidebar-entries {\n\t\toverflow-y: scroll;\n\t}\n\n\t.d3c-1633357633-sidebar-entries > * {\n\t\twidth: 100%;\n\t}\n\n\t.d3c-1633357633-bottom-entries > * {\n\t\twidth: 100%;\n\t}\n\n\t.d3c-1633357633-spacer {\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1633357633-body {\n\t\toverflow: auto;\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t}\n", Attr: []vugu.VGAttribute(nil)}) vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633357633 {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1633357633-menu {\n\t\twidth: 100%;\n\t\tborder-bottom: 1px solid var(--d3c-color-border);\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tpadding: 0 0.5em;\n\t\tbox-sizing: border-box;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1633357633-sidebar {\n\t\theight: 100%;\n\t\tborder-right: 1px solid var(--d3c-color-border);\n\t\tpadding: 0 0.5em;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\tz-index: 1;\n\t}\n\n\t.d3c-1633357633-sidebar-menu {\n\t\t/*display: flex;\n\t\tflex-direction: column;*/\n\t}\n\n\t@media (min-aspect-ratio: 1/1) {\n\t\t.d3c-1633357633-menu, .d3c-1633357633-body-overlay {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t@media not all and (min-aspect-ratio: 1/1) {\n\t\t.d3c-1633357633-sidebar-minimized {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.d3c-1633357633-sidebar {\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t.d3c-1633357633-sidebar-entries {\n\t\toverflow-y: scroll;\n\t}\n\n\t.d3c-1633357633-sidebar-entries > * {\n\t\twidth: 100%;\n\t}\n\n\t.d3c-1633357633-bottom-entries > * {\n\t\twidth: 100%;\n\t}\n\n\t.d3c-1633357633-spacer {\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1633357633-body {\n\t\toverflow: auto;\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t}\n\n\t.d3c-1633357633-body-overlay {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: fixed;\n\t\t/*backdrop-filter: blur(1px);*/\n\t}\n", Attr: []vugu.VGAttribute(nil)})
} }
vgout.AppendCSS(vgn) vgout.AppendCSS(vgn)
return vgout return vgout