From 8c96378190588527981b653f7de4253ef07da738 Mon Sep 17 00:00:00 2001 From: David Vogel Date: Thu, 18 May 2023 17:46:33 +0200 Subject: [PATCH] Remove sidebar body overlay when menu is minimized --- components/navigation/sidebar.go | 10 +++++----- components/navigation/sidebar.vugu | 3 ++- components/navigation/sidebar_vgen.go | 27 ++++++++++++++------------- 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/components/navigation/sidebar.go b/components/navigation/sidebar.go index e8d6e7a..d7d3f7a 100644 --- a/components/navigation/sidebar.go +++ b/components/navigation/sidebar.go @@ -10,9 +10,9 @@ type Sidebar struct { 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. - Minimized bool `vugu:"data"` // If true, the sidebar is reduced to icons. - sidebarClasses string - bodyOverlayStyle string + Minimized bool `vugu:"data"` // If true, the sidebar is reduced to icons. + sidebarClasses string + showBodyOverlay bool } func (c *Sidebar) Init(ctx vugu.InitCtx) { @@ -22,10 +22,10 @@ func (c *Sidebar) Init(ctx vugu.InitCtx) { func (c *Sidebar) Compute(ctx vugu.ComputeCtx) { if c.Minimized { c.sidebarClasses = "d3c-1633357633-sidebar-minimized" - c.bodyOverlayStyle = "display: none;" + c.showBodyOverlay = false } else { c.sidebarClasses = "" - c.bodyOverlayStyle = "" + c.showBodyOverlay = true } } diff --git a/components/navigation/sidebar.vugu b/components/navigation/sidebar.vugu index 8f51a39..cf7a04e 100644 --- a/components/navigation/sidebar.vugu +++ b/components/navigation/sidebar.vugu @@ -16,7 +16,7 @@
-
+
@@ -43,6 +43,7 @@ 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); diff --git a/components/navigation/sidebar_vgen.go b/components/navigation/sidebar_vgen.go index ce1373a..74b94ee 100644 --- a/components/navigation/sidebar_vgen.go +++ b/components/navigation/sidebar_vgen.go @@ -155,19 +155,20 @@ func (c *Sidebar) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { _ = vgparent 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-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"} + if c.showBodyOverlay { + 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.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) @@ -249,7 +250,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.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)}) + 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\tgap: 0.5em;\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) return vgout