diff --git a/components/navigation/sidebar.go b/components/navigation/sidebar.go
index 3325a6a..e8d6e7a 100644
--- a/components/navigation/sidebar.go
+++ b/components/navigation/sidebar.go
@@ -10,8 +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 `vugu:"data"`
+	Minimized        bool `vugu:"data"` // If true, the sidebar is reduced to icons.
+	sidebarClasses   string
+	bodyOverlayStyle string
 }
 
 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) {
 	if c.Minimized {
 		c.sidebarClasses = "d3c-1633357633-sidebar-minimized"
+		c.bodyOverlayStyle = "display: none;"
 	} else {
 		c.sidebarClasses = ""
+		c.bodyOverlayStyle = ""
 	}
 }
 
 func (c *Sidebar) handleMenuButton(event vugu.DOMEvent) {
 	c.Minimized = !c.Minimized
 }
+
+func (c *Sidebar) handleOverlayClick(event vugu.DOMEvent) {
+	c.Minimized = true
+}
diff --git a/components/navigation/sidebar.vugu b/components/navigation/sidebar.vugu
index 55d1706..8f51a39 100644
--- a/components/navigation/sidebar.vugu
+++ b/components/navigation/sidebar.vugu
@@ -16,6 +16,8 @@
 	</div>
 
 	<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">
 			<input:Button @Click="c.handleMenuButton(event)">
 				<vg-slot name="SymbolSlot"><icons:LGlobalNav></icons:LGlobalNav></vg-slot>
@@ -64,7 +66,7 @@
 	}
 
 	@media (min-aspect-ratio: 1/1) {
-		.d3c-1633357633-menu {
+		.d3c-1633357633-menu, .d3c-1633357633-body-overlay {
 			display: none;
 		}
 	}
@@ -98,6 +100,13 @@
 		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">
diff --git a/components/navigation/sidebar_vgen.go b/components/navigation/sidebar_vgen.go
index af180d8..ce1373a 100644
--- a/components/navigation/sidebar_vgen.go
+++ b/components/navigation/sidebar_vgen.go
@@ -155,6 +155,22 @@ 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"}
+				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"}}}
 			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.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)
 	return vgout