Several changes

- Remove license headers
- Update example pages
- Move ButtonNav into navigation package as SidebarEntry
- Add sidebar collapse and hide functionality
- Add click event
- Add click handler to button
- Add ButtonFullscreen to navigation package
- Fix resulting suffix space in CodeInline
- Fix CSS class of Code
- Update icon sketches.cdr

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
     "cSpell.words": [
         "domrender",
+        "Fullscreen",
         "ldflags",
         "Segoe",
         "simplehttp",

components/input/button-nav.go

@@ -1,25 +0,0 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
-package input
-
-import (
-	"github.com/vugu/vgrouter"
-	"github.com/vugu/vugu"
-)
-
-type ButtonNav struct {
-	vgrouter.NavigatorRef
-	AttrMap vugu.AttrMap
-
-	SymbolSlot  vugu.Builder // Slot for the symbol.
-	DefaultSlot vugu.Builder
-
-	URL string
-}
-
-func (c *ButtonNav) handleClick(event vugu.DOMEvent) {
-	c.Navigate(c.URL, nil)
-}

components/input/button-nav.vugu

@@ -1,25 +0,0 @@
-<div vg-attr="c.AttrMap" class="d3c-1683622560" @click="c.handleClick(event)">
-	<vg-comp expr="c.SymbolSlot"></vg-comp><vg-comp expr="c.DefaultSlot"></vg-comp>
-</div>
-
-<style>
-	.d3c-1683622560 {
-		padding: 8px;
-		margin: 4px;
-		border-radius: 4px;
-	}
-
-	.d3c-1683622560 > * {
-		margin-right: 12px;
-		
-		height: 16px;
-	}
-
-	.d3c-1683622560:hover {
-		background-color: RGBA(127, 127, 127, 0.1);
-	}
-
-	.d3c-1683622560-selected {
-		background-color: RGBA(127, 127, 127, 0.2);
-	}
-</style>

components/input/button.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package input
 
 import "github.com/vugu/vugu"
@@ -12,4 +7,12 @@ type Button struct {
 
 	SymbolSlot  vugu.Builder // Slot for the symbol.
 	DefaultSlot vugu.Builder
+
+	Click ClickHandler // External handler that is called upon an event.
+}
+
+func (c *Button) HandleClick(event vugu.DOMEvent) {
+	if c.Click != nil {
+		c.Click.ClickHandle(ClickEvent{DOMEvent: event})
+	}
 }

components/input/button.vugu

@@ -1,17 +1,20 @@
-<div vg-attr="c.AttrMap" class="d3c-1633424238">
+<button vg-attr="c.AttrMap" class="d3c-1633424238" @click="c.HandleClick(event)">
 	<vg-comp expr="c.SymbolSlot"></vg-comp><vg-comp expr="c.DefaultSlot"></vg-comp>
-</div>
+</button>
 
 <style>
 	.d3c-1633424238 {
+		display: flex;
+		gap: 12px;
+		text-decoration: none;
 		padding: 8px;
-		margin: 4px;
+		margin: 8px 0;
 		border-radius: 4px;
+		border: none;
+		background-color: white;
 	}
 
 	.d3c-1633424238 > * {
-		margin-right: 12px;
-		
 		height: 16px;
 	}
 

components/input/button_vgen.go

@@ -15,9 +15,14 @@ func (c *Button) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 	var vgiterkey interface{}
 	_ = vgiterkey
 	var vgn *vugu.VGNode
-	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1633424238"}}}
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "button", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1633424238"}}}
 	vgout.Out = append(vgout.Out, vgn)	// root for output
 	vgn.AddAttrList(c.AttrMap)
+	vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
+		EventType:	"click",
+		Func:		func(event vugu.DOMEvent) { c.HandleClick(event) },
+		// TODO: implement capture, etc. mostly need to decide syntax
+	})
 	{
 		vgparent := vgn
 		_ = vgparent
@@ -46,7 +51,7 @@ func (c *Button) 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-1633424238 {\n\t\tpadding: 8px;\n\t\tmargin: 4px;\n\t\tborder-radius: 4px;\n\t}\n\n\t.d3c-1633424238 > * {\n\t\tmargin-right: 12px;\n\t\t\n\t\theight: 16px;\n\t}\n\n\t.d3c-1633424238:hover {\n\t\tbackground-color: RGBA(127, 127, 127, 0.1);\n\t}\n\n\t.d3c-1633424238-selected {\n\t\tbackground-color: RGBA(127, 127, 127, 0.2);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
+		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633424238 {\n\t\tdisplay: flex;\n\t\tgap: 12px;\n\t\ttext-decoration: none;\n\t\tpadding: 8px;\n\t\tmargin: 8px 0;\n\t\tborder-radius: 4px;\n\t\tborder: none;\n\t\tbackground-color: white;\n\t}\n\n\t.d3c-1633424238 > * {\n\t\theight: 16px;\n\t}\n\n\t.d3c-1633424238:hover {\n\t\tbackground-color: RGBA(127, 127, 127, 0.1);\n\t}\n\n\t.d3c-1633424238-selected {\n\t\tbackground-color: RGBA(127, 127, 127, 0.2);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
 	}
 	vgout.AppendCSS(vgn)
 	return vgout

components/input/events.go

@@ -0,0 +1,21 @@
+package input
+
+import "github.com/vugu/vugu"
+
+type ClickEvent struct {
+	vugu.DOMEvent
+}
+
+// ClickHandler is the interface for things that can handle ClickEvent.
+type ClickHandler interface {
+	ClickHandle(event ClickEvent)
+}
+
+// ClickFunc implements ClickHandler as a function.
+type ClickFunc func(event ClickEvent)
+
+// ClickHandle implements the ClickHandler interface.
+func (f ClickFunc) ClickHandle(event ClickEvent) { f(event) }
+
+// assert ClickFunc implements ClickHandler.
+var _ ClickHandler = ClickFunc(nil)

components/input/generate.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package input
 
 //go:generate vugugen

components/layout/container.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package layout
 
 import (

components/layout/generate.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package layout
 
 //go:generate vugugen

components/navigation/button-fullscreen.go

@@ -0,0 +1,17 @@
+package navigation
+
+import (
+	"syscall/js"
+
+	"github.com/vugu/vugu"
+)
+
+type ButtonFullscreen struct {
+	AttrMap vugu.AttrMap
+}
+
+func (c *ButtonFullscreen) handleClick(event vugu.DOMEvent) {
+	docElem := js.Global().Get("document").Get("documentElement")
+
+	docElem.Call("requestFullscreen")
+}

components/navigation/button-fullscreen.vugu

@@ -0,0 +1,17 @@
+<div vg-attr="c.AttrMap" class="d3c-1683824360">
+	<input:Button @Click="c.handleClick(event)"><vg-slot name="SymbolSlot"><icons:LFullScreen></icons:LFullScreen></vg-slot>
+	</input:Button>
+</div>
+
+<style>
+	:fullscreen .d3c-1683824360 {
+		display: none;
+	}
+</style>
+
+<script type="application/x-go">
+	import (
+		"git.d3nexus.de/Dadido3/D3vugu-components/icons"
+		"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+	)
+</script>

components/navigation/button-fullscreen_vgen.go

@@ -0,0 +1,84 @@
+package navigation
+
+// Code generated by vugu via vugugen. Please regenerate instead of editing or add additional code in a separate file. DO NOT EDIT.
+
+import "fmt"
+import "reflect"
+import "github.com/vugu/vjson"
+import "github.com/vugu/vugu"
+import js "github.com/vugu/vugu/js"
+
+import (
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+	"git.d3nexus.de/Dadido3/D3vugu-components/icons"
+)
+
+func (c *ButtonFullscreen) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+
+	vgout = &vugu.BuildOut{}
+
+	var vgiterkey interface{}
+	_ = vgiterkey
+	var vgn *vugu.VGNode
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1683824360"}}}
+	vgout.Out = append(vgout.Out, vgn)	// root for output
+	vgn.AddAttrList(c.AttrMap)
+	{
+		vgparent := vgn
+		_ = vgparent
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
+		vgparent.AppendChild(vgn)
+		{
+			vgcompKey := vugu.MakeCompKey(0x7F44F1B83C38940B^vgin.CurrentPositionHash(), vgiterkey)
+			// ask BuildEnv for prior instance of this specific component
+			vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
+			if vgcomp == nil {
+				// create new one if needed
+				vgcomp = new(input.Button)
+				vgin.BuildEnv.WireComponent(vgcomp)
+			}
+			vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+			vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleClick(event) })
+			vgcomp.SymbolSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+				vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+				vgout = &vugu.BuildOut{}
+				vgout.Out = append(vgout.Out, vgn)
+				vgparent := vgn
+				_ = vgparent
+
+				{
+					vgcompKey := vugu.MakeCompKey(0xFE561D87B2B8675D^vgin.CurrentPositionHash(), vgiterkey)
+					// ask BuildEnv for prior instance of this specific component
+					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LFullScreen)
+					if vgcomp == nil {
+						// create new one if needed
+						vgcomp = new(icons.LFullScreen)
+						vgin.BuildEnv.WireComponent(vgcomp)
+					}
+					vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+					vgout.Components = append(vgout.Components, vgcomp)
+					vgn = &vugu.VGNode{Component: vgcomp}
+					vgparent.AppendChild(vgn)
+				}
+				return
+			})
+			vgout.Components = append(vgout.Components, vgcomp)
+			vgn = &vugu.VGNode{Component: vgcomp}
+			vgparent.AppendChild(vgn)
+		}
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n"}
+		vgparent.AppendChild(vgn)
+	}
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
+	{
+		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t:fullscreen .d3c-1683824360 {\n\t\tdisplay: none;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
+	}
+	vgout.AppendCSS(vgn)
+	return vgout
+}
+
+// 'fix' unused imports
+var _ fmt.Stringer
+var _ reflect.Type
+var _ vjson.RawMessage
+var _ js.Value

components/navigation/generate.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package navigation
 
 //go:generate vugugen

components/navigation/sidebar-entry.go

@@ -0,0 +1,20 @@
+package navigation
+
+import (
+	"github.com/vugu/vgrouter"
+	"github.com/vugu/vugu"
+)
+
+type SidebarEntry struct {
+	vgrouter.NavigatorRef
+	AttrMap vugu.AttrMap
+
+	SymbolSlot  vugu.Builder // Slot for the symbol.
+	DefaultSlot vugu.Builder // Slot for the text and other stuff. Should be a div element!
+
+	URL string
+}
+
+func (c *SidebarEntry) handleClick(event vugu.DOMEvent) {
+	c.Navigate(c.URL, nil)
+}

components/navigation/sidebar-entry.vugu

@@ -0,0 +1,36 @@
+<button vg-attr="c.AttrMap" class="d3c-1683622560" @click="c.handleClick(event)">
+	<vg-comp expr="c.SymbolSlot"></vg-comp><vg-comp expr="c.DefaultSlot"></vg-comp>
+</button>
+
+<style>
+	.d3c-1683622560 {
+		display: flex;
+		gap: 12px;
+		text-decoration: none;
+		padding: 8px;
+		margin: 8px 0;
+		border-radius: 4px;
+		border: none;
+		background-color: white;
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.d3c-1683622560 > * {
+		height: 16px;
+	}
+
+	.d3c-1683622560:hover {
+		background-color: RGBA(127, 127, 127, 0.1);
+	}
+
+	.d3c-1683622560-selected {
+		background-color: RGBA(127, 127, 127, 0.2);
+	}
+
+	.d3c-1633357633-sidebar-minimized .d3c-1683622560 > *:not(:first-child) {
+		display: none;
+	}
+</style>

components/navigation/sidebar-entry_vgen.go

@@ -1,4 +1,4 @@
-package input
+package navigation
 
 // Code generated by vugu via vugugen. Please regenerate instead of editing or add additional code in a separate file. DO NOT EDIT.
 
@@ -8,14 +8,14 @@ import "github.com/vugu/vjson"
 import "github.com/vugu/vugu"
 import js "github.com/vugu/vugu/js"
 
-func (c *ButtonNav) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+func (c *SidebarEntry) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 
 	vgout = &vugu.BuildOut{}
 
 	var vgiterkey interface{}
 	_ = vgiterkey
 	var vgn *vugu.VGNode
-	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1683622560"}}}
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "button", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1683622560"}}}
 	vgout.Out = append(vgout.Out, vgn)	// root for output
 	vgn.AddAttrList(c.AttrMap)
 	vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
@@ -51,7 +51,7 @@ func (c *ButtonNav) 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-1683622560 {\n\t\tpadding: 8px;\n\t\tmargin: 4px;\n\t\tborder-radius: 4px;\n\t}\n\n\t.d3c-1683622560 > * {\n\t\tmargin-right: 12px;\n\t\t\n\t\theight: 16px;\n\t}\n\n\t.d3c-1683622560:hover {\n\t\tbackground-color: RGBA(127, 127, 127, 0.1);\n\t}\n\n\t.d3c-1683622560-selected {\n\t\tbackground-color: RGBA(127, 127, 127, 0.2);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
+		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1683622560 {\n\t\tdisplay: flex;\n\t\tgap: 12px;\n\t\ttext-decoration: none;\n\t\tpadding: 8px;\n\t\tmargin: 8px 0;\n\t\tborder-radius: 4px;\n\t\tborder: none;\n\t\tbackground-color: white;\n\t\twidth: 100%;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.d3c-1683622560 > * {\n\t\theight: 16px;\n\t}\n\n\t.d3c-1683622560:hover {\n\t\tbackground-color: RGBA(127, 127, 127, 0.1);\n\t}\n\n\t.d3c-1683622560-selected {\n\t\tbackground-color: RGBA(127, 127, 127, 0.2);\n\t}\n\n\t.d3c-1633357633-sidebar-minimized .d3c-1683622560 > *:not(:first-child) {\n\t\tdisplay: none;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
 	}
 	vgout.AppendCSS(vgn)
 	return vgout

components/navigation/sidebar.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package navigation
 
 import "github.com/vugu/vugu"
@@ -10,13 +5,27 @@ import "github.com/vugu/vugu"
 type Sidebar struct {
 	AttrMap vugu.AttrMap
 
-	Entries       vugu.Builder // Main content of the sidebar. Basically the menu entries.
+	MenuEntries   vugu.Builder // Menu content at the top. Either embedded into the sidebar or at the top edge.
+	Entries       vugu.Builder // Main content of the sidebar.
 	BottomEntries vugu.Builder // Static bottom part of the sidebar.
 	Body          vugu.Builder // The body contains the content that is right to or behind the sidebar.
 
-	Width float64 // Width of the sidebar in DOM pixels.
+	Minimized      bool // If true, the sidebar is reduced to icons.
+	sidebarClasses string
+}
+
+func (c *Sidebar) Init(ctx vugu.InitCtx) {
+	c.Minimized = true // Sidebar defaults to minimized.
+}
+
+func (c *Sidebar) Compute(ctx vugu.ComputeCtx) {
+	if c.Minimized {
+		c.sidebarClasses = "d3c-1633357633-sidebar-minimized"
+	} else {
+		c.sidebarClasses = ""
+	}
 }
 
-func (s *Sidebar) Init(ctx vugu.InitCtx) {
-	s.Width = 300 // Default width in pixels.
+func (c *Sidebar) handleMenuButton(event vugu.DOMEvent) {
+	c.Minimized = !c.Minimized
 }

components/navigation/sidebar.vugu

@@ -1,11 +1,12 @@
 <div vg-attr="c.AttrMap" class="d3c-1633357633">
-	<div class="d3c-1633357633-sidebar" :style='fmt.Sprintf("width: %vpx;", c.Width)'>
-		<div>
-			<input:Button>
+	<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>
+		<div class="d3c-1633357633-sidebar-entries">
 			<vg-comp expr="c.Entries"></vg-comp>
 		</div>
 		<div class="d3c-1633357633-spacer"></div>
@@ -15,6 +16,12 @@
 	</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>
@@ -27,12 +34,46 @@
 		display: flex;
 	}
 
+	.d3c-1633357633-menu {
+		width: 100%;
+		border-bottom: 1px solid RGBA(0, 0, 0, 0.1);
+		display: flex;
+		position: relative;
+		padding: 0 8px;
+		box-sizing: border-box;
+	}
+
 	.d3c-1633357633-sidebar {
 		height: 100%;
-		border-right: 1px solid RGBA(0, 0, 0, 0.05);
+		border-right: 1px solid RGBA(0, 0, 0, 0.1);
+		padding: 0 8px;
 		display: flex;
 		flex-direction: column;
-		flex-shrink: 0;
+		background-color: white;
+		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-spacer {

components/navigation/sidebar_vgen.go

@@ -28,15 +28,15 @@ func (c *Sidebar) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 		_ = vgparent
 		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\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-sidebar"}}}
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
 		vgparent.AppendChild(vgn)
-		vgn.AddAttrInterface("style", fmt.Sprintf("width: %vpx;", c.Width))
+		vgn.AddAttrInterface("class", "d3c-1633357633-sidebar "+c.sidebarClasses)
 		{
 			vgparent := vgn
 			_ = 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(nil)}
+			vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1633357633-sidebar-menu"}}}
 			vgparent.AppendChild(vgn)
 			{
 				vgparent := vgn
@@ -53,6 +53,7 @@ func (c *Sidebar) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgin.BuildEnv.WireComponent(vgcomp)
 					}
 					vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+					vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleMenuButton(event) })
 					vgcomp.SymbolSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
 						vgout = &vugu.BuildOut{}
@@ -80,12 +81,23 @@ func (c *Sidebar) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Component: vgcomp}
 					vgparent.AppendChild(vgn)
 				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					var vgcomp vugu.Builder = c.MenuEntries
+					if vgcomp != nil {
+						vgin.BuildEnv.WireComponent(vgcomp)
+						vgout.Components = append(vgout.Components, vgcomp)
+						vgn = &vugu.VGNode{Component: vgcomp}
+						vgparent.AppendChild(vgn)
+					}
+				}
 				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(nil)}
+			vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1633357633-sidebar-entries"}}}
 			vgparent.AppendChild(vgn)
 			{
 				vgparent := vgn
@@ -142,6 +154,67 @@ 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-menu"}}}
+			vgparent.AppendChild(vgn)
+			{
+				vgparent := vgn
+				_ = vgparent
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					vgcompKey := vugu.MakeCompKey(0x897F172FEE13D43B^vgin.CurrentPositionHash(), vgiterkey)
+					// ask BuildEnv for prior instance of this specific component
+					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
+					if vgcomp == nil {
+						// create new one if needed
+						vgcomp = new(input.Button)
+						vgin.BuildEnv.WireComponent(vgcomp)
+					}
+					vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+					vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleMenuButton(event) })
+					vgcomp.SymbolSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+						vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+						vgout = &vugu.BuildOut{}
+						vgout.Out = append(vgout.Out, vgn)
+						vgparent := vgn
+						_ = vgparent
+
+						{
+							vgcompKey := vugu.MakeCompKey(0x518FFA1C483DB64B^vgin.CurrentPositionHash(), vgiterkey)
+							// ask BuildEnv for prior instance of this specific component
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobalNav)
+							if vgcomp == nil {
+								// create new one if needed
+								vgcomp = new(icons.LGlobalNav)
+								vgin.BuildEnv.WireComponent(vgcomp)
+							}
+							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+							vgout.Components = append(vgout.Components, vgcomp)
+							vgn = &vugu.VGNode{Component: vgcomp}
+							vgparent.AppendChild(vgn)
+						}
+						return
+					})
+					vgout.Components = append(vgout.Components, vgcomp)
+					vgn = &vugu.VGNode{Component: vgcomp}
+					vgparent.AppendChild(vgn)
+				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					var vgcomp vugu.Builder = c.MenuEntries
+					if vgcomp != nil {
+						vgin.BuildEnv.WireComponent(vgcomp)
+						vgout.Components = append(vgout.Components, vgcomp)
+						vgn = &vugu.VGNode{Component: vgcomp}
+						vgparent.AppendChild(vgn)
+					}
+				}
+				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)
 			{
 				var vgcomp vugu.Builder = c.Body
 				if vgcomp != nil {
@@ -159,7 +232,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}\n\n\t.d3c-1633357633-sidebar {\n\t\theight: 100%;\n\t\tborder-right: 1px solid RGBA(0, 0, 0, 0.05);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex-shrink: 0;\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}\n\n\t.d3c-1633357633-menu {\n\t\twidth: 100%;\n\t\tborder-bottom: 1px solid RGBA(0, 0, 0, 0.1);\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tpadding: 0 8px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.d3c-1633357633-sidebar {\n\t\theight: 100%;\n\t\tborder-right: 1px solid RGBA(0, 0, 0, 0.1);\n\t\tpadding: 0 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tbackground-color: white;\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-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)})
 	}
 	vgout.AppendCSS(vgn)
 	return vgout

components/view/code-inline.vugu

@@ -1,6 +1,4 @@
-<span vg-attr="c.AttrMap" class="d3c-1634910850">
-	<vg-comp expr="c.DefaultSlot"></vg-comp>
-</span>
+<span vg-attr="c.AttrMap" class="d3c-1634910850"><vg-comp expr="c.DefaultSlot"></vg-comp></span>
 
 <style>
 	.d3c-1634910850 {

components/view/code-inline_vgen.go

@@ -21,8 +21,6 @@ func (c *CodeInline) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 	{
 		vgparent := vgn
 		_ = vgparent
-		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
-		vgparent.AppendChild(vgn)
 		{
 			var vgcomp vugu.Builder = c.DefaultSlot
 			if vgcomp != nil {
@@ -32,8 +30,6 @@ func (c *CodeInline) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgparent.AppendChild(vgn)
 			}
 		}
-		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n"}
-		vgparent.AppendChild(vgn)
 	}
 	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
 	{

components/view/code.vugu

@@ -1,11 +1,12 @@
-<div vg-attr="c.AttrMap" class="d3c-1634910850">
+<div vg-attr="c.AttrMap" class="d3c-1683741854">
 	<vg-comp expr="c.DefaultSlot"></vg-comp>
 </div>
 
 <style>
-	.d3c-1634910850 {
+	.d3c-1683741854 {
 		border-radius: 4px;
-		padding-left: 8px;
+		padding: 8px;
+		margin: 8px 0;
 		font-family: monospace;
 		background-color: RGBA(127, 127, 127, 0.1);
 	}

components/view/code_vgen.go

@@ -15,7 +15,7 @@ func (c *Code) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 	var vgiterkey interface{}
 	_ = vgiterkey
 	var vgn *vugu.VGNode
-	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1634910850"}}}
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1683741854"}}}
 	vgout.Out = append(vgout.Out, vgn)	// root for output
 	vgn.AddAttrList(c.AttrMap)
 	{
@@ -37,7 +37,7 @@ func (c *Code) 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-1634910850 {\n\t\tborder-radius: 4px;\n\t\tpadding-left: 8px;\n\t\tfont-family: monospace;\n\t\tbackground-color: RGBA(127, 127, 127, 0.1);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
+		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1683741854 {\n\t\tborder-radius: 4px;\n\t\tpadding: 8px;\n\t\tmargin: 8px 0;\n\t\tfont-family: monospace;\n\t\tbackground-color: RGBA(127, 127, 127, 0.1);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
 	}
 	vgout.AppendCSS(vgn)
 	return vgout

components/view/generate.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package view
 
 //go:generate vugugen

generate.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package main
 
 //go:generate vugugen

icons/generate.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package icons
 
 //go:generate vugugen

page-icons.vugu

@@ -7,6 +7,18 @@
 			asdwfaefa efae fae faef ae<br>
 			u4iewgooijqoie ioigq oiegq eog qoeg
 		</view:Code>
+		<input:Button>
+			<vg-slot name="SymbolSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
+			<vg-slot name="DefaultSlot">Some Button</vg-slot>
+		</input:Button>
+		<input:Button>
+			<vg-slot name="SymbolSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
+			<vg-slot name="DefaultSlot">Some Button</vg-slot>
+		</input:Button>
+		<input:Button>
+			<vg-slot name="SymbolSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
+			<vg-slot name="DefaultSlot">Some Button</vg-slot>
+		</input:Button>
 		<p>Some <view:CodeInline>inlined code</view:CodeInline> in this line!</p>
 		<div class="page-icons-row icon-size-32" style="display: flex; flex-wrap: wrap">
 			<icons:LArrowDown></icons:LArrowDown>
@@ -157,6 +169,7 @@
 	import (
 		"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
 		"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
+		"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
 		"git.d3nexus.de/Dadido3/D3vugu-components/icons"
 	)
 

root.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package main
 
 import (

root.vugu

@@ -4,25 +4,32 @@
 	<body>
 		<div style="width: 100vw; height: 100wh;">
 			<navigation:Sidebar vg-var="ParentSidebar">
+				<vg-slot name="MenuEntries">
+					<navigation:ButtonFullscreen></navigation:ButtonFullscreen>
+				</vg-slot>
 				<vg-slot name="Entries">
-					<input:ButtonNav URL="/">
+					<navigation:SidebarEntry URL="/">
 						<vg-slot name="SymbolSlot"><icons:LHome></icons:LHome></vg-slot>
-						<vg-slot name="DefaultSlot">Entry 1</vg-slot>
-					</input:ButtonNav>
-					<input:ButtonNav URL="/icons/">
-						<vg-slot name="SymbolSlot"><icons:LGlobalNav></icons:LGlobalNav></vg-slot>
-						<vg-slot name="DefaultSlot">Icons</vg-slot>
-					</input:ButtonNav>
-					<input:ButtonNav URL="/">
-						<vg-slot name="SymbolSlot"><icons:Empty></icons:Empty></vg-slot>
-						<vg-slot name="DefaultSlot">Entry 3</vg-slot>
-					</input:ButtonNav>
+						<vg-slot name="DefaultSlot"><div>Entry 1</div></vg-slot>
+					</navigation:SidebarEntry>
+					<navigation:SidebarEntry URL="/icons/">
+						<vg-slot name="SymbolSlot"><icons:LStar></icons:LStar></vg-slot>
+						<vg-slot name="DefaultSlot"><div>Icons</div></vg-slot>
+					</navigation:SidebarEntry>
+					<navigation:SidebarEntry URL="/">
+						<vg-slot name="SymbolSlot"><icons:LInfoCircle></icons:LInfoCircle></vg-slot>
+						<vg-slot name="DefaultSlot"><div>Entry 3</div></vg-slot>
+					</navigation:SidebarEntry>
 				</vg-slot>
 				<vg-slot name="BottomEntries">
-					<input:ButtonNav URL="/">
+					<navigation:SidebarEntry URL="/">
+						<vg-slot name="SymbolSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
+						<vg-slot name="DefaultSlot"><div>John Doe</div></vg-slot>
+					</navigation:SidebarEntry>
+					<navigation:SidebarEntry URL="/">
 						<vg-slot name="SymbolSlot"><icons:LSettings></icons:LSettings></vg-slot>
-						<vg-slot name="DefaultSlot">Bottom</vg-slot>
-					</input:ButtonNav>
+						<vg-slot name="DefaultSlot"><div>Settings</div></vg-slot>
+					</navigation:SidebarEntry>
 				</vg-slot>
 				<vg-slot name="Body">
 					<vg-comp expr="c.Body"></vg-comp>
@@ -45,7 +52,6 @@
 <script type="application/x-go">
 	import (
 		"git.d3nexus.de/Dadido3/D3vugu-components/icons"
-		"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
 		"git.d3nexus.de/Dadido3/D3vugu-components/components/navigation"
 	)
 </script>

root_vgen.go

@@ -9,7 +9,6 @@ import "github.com/vugu/vugu"
 import js "github.com/vugu/vugu/js"
 
 import (
-	"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
 	"git.d3nexus.de/Dadido3/D3vugu-components/components/navigation"
 	"git.d3nexus.de/Dadido3/D3vugu-components/icons"
 )
@@ -47,7 +46,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x3405DFBDDF796314^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x2E9A2E5DC2291CAD^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.Sidebar)
 					if vgcomp == nil {
@@ -58,6 +57,33 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
 					var ParentSidebar = vgcomp			// vg-var
 					_ = ParentSidebar
+					vgcomp.MenuEntries = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+						vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+						vgout = &vugu.BuildOut{}
+						vgout.Out = append(vgout.Out, vgn)
+						vgparent := vgn
+						_ = vgparent
+
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
+						vgparent.AppendChild(vgn)
+						{
+							vgcompKey := vugu.MakeCompKey(0x686B5692725EA031^vgin.CurrentPositionHash(), vgiterkey)
+							// ask BuildEnv for prior instance of this specific component
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.ButtonFullscreen)
+							if vgcomp == nil {
+								// create new one if needed
+								vgcomp = new(navigation.ButtonFullscreen)
+								vgin.BuildEnv.WireComponent(vgcomp)
+							}
+							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+							vgout.Components = append(vgout.Components, vgcomp)
+							vgn = &vugu.VGNode{Component: vgcomp}
+							vgparent.AppendChild(vgn)
+						}
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"}
+						vgparent.AppendChild(vgn)
+						return
+					})
 					vgcomp.Entries = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
 						vgout = &vugu.BuildOut{}
@@ -68,12 +94,12 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0x245694A4FF43312D^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x5D38B25E830DE580^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
-							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.ButtonNav)
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
 								// create new one if needed
-								vgcomp = new(input.ButtonNav)
+								vgcomp = new(navigation.SidebarEntry)
 								vgin.BuildEnv.WireComponent(vgcomp)
 							}
 							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
@@ -86,7 +112,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x4AE13405398E63E1^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0xE1B3F56AA51B2DB3^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LHome)
 									if vgcomp == nil {
@@ -108,8 +134,14 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgparent := vgn
 								_ = vgparent
 
-								vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Entry 1"}
+								vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
 								vgparent.AppendChild(vgn)
+								{
+									vgparent := vgn
+									_ = vgparent
+									vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Entry 1"}
+									vgparent.AppendChild(vgn)
+								}
 								return
 							})
 							vgout.Components = append(vgout.Components, vgcomp)
@@ -119,12 +151,12 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0x172A029BD816D50A^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xEBE260D8ADE95FBE^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
-							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.ButtonNav)
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
 								// create new one if needed
-								vgcomp = new(input.ButtonNav)
+								vgcomp = new(navigation.SidebarEntry)
 								vgin.BuildEnv.WireComponent(vgcomp)
 							}
 							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
@@ -137,12 +169,12 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x70EFE1C0393B2EFA^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x52BB52A71CBC3F81^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
-									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobalNav)
+									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LStar)
 									if vgcomp == nil {
 										// create new one if needed
-										vgcomp = new(icons.LGlobalNav)
+										vgcomp = new(icons.LStar)
 										vgin.BuildEnv.WireComponent(vgcomp)
 									}
 									vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
@@ -159,8 +191,14 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgparent := vgn
 								_ = vgparent
 
-								vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Icons"}
+								vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
 								vgparent.AppendChild(vgn)
+								{
+									vgparent := vgn
+									_ = vgparent
+									vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Icons"}
+									vgparent.AppendChild(vgn)
+								}
 								return
 							})
 							vgout.Components = append(vgout.Components, vgcomp)
@@ -170,12 +208,12 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0x9F8FB0242AD2A594^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x2AF1551B8C561CD9^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
-							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.ButtonNav)
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
 								// create new one if needed
-								vgcomp = new(input.ButtonNav)
+								vgcomp = new(navigation.SidebarEntry)
 								vgin.BuildEnv.WireComponent(vgcomp)
 							}
 							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
@@ -188,12 +226,12 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x7F2C3AF881673BA8^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0xFDC8CD2FD0424FED^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
-									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.Empty)
+									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LInfoCircle)
 									if vgcomp == nil {
 										// create new one if needed
-										vgcomp = new(icons.Empty)
+										vgcomp = new(icons.LInfoCircle)
 										vgin.BuildEnv.WireComponent(vgcomp)
 									}
 									vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
@@ -210,8 +248,14 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgparent := vgn
 								_ = vgparent
 
-								vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Entry 3"}
+								vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
 								vgparent.AppendChild(vgn)
+								{
+									vgparent := vgn
+									_ = vgparent
+									vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Entry 3"}
+									vgparent.AppendChild(vgn)
+								}
 								return
 							})
 							vgout.Components = append(vgout.Components, vgcomp)
@@ -232,12 +276,69 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xBA5CDF7834C137A0^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xCF5E40696C88BAC9^vgin.CurrentPositionHash(), vgiterkey)
+							// ask BuildEnv for prior instance of this specific component
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
+							if vgcomp == nil {
+								// create new one if needed
+								vgcomp = new(navigation.SidebarEntry)
+								vgin.BuildEnv.WireComponent(vgcomp)
+							}
+							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+							vgcomp.URL = "/"
+							vgcomp.SymbolSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+								vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+								vgout = &vugu.BuildOut{}
+								vgout.Out = append(vgout.Out, vgn)
+								vgparent := vgn
+								_ = vgparent
+
+								{
+									vgcompKey := vugu.MakeCompKey(0xF36D7D0B128ECD49^vgin.CurrentPositionHash(), vgiterkey)
+									// ask BuildEnv for prior instance of this specific component
+									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
+									if vgcomp == nil {
+										// create new one if needed
+										vgcomp = new(icons.LGlobe)
+										vgin.BuildEnv.WireComponent(vgcomp)
+									}
+									vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+									vgout.Components = append(vgout.Components, vgcomp)
+									vgn = &vugu.VGNode{Component: vgcomp}
+									vgparent.AppendChild(vgn)
+								}
+								return
+							})
+							vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+								vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+								vgout = &vugu.BuildOut{}
+								vgout.Out = append(vgout.Out, vgn)
+								vgparent := vgn
+								_ = vgparent
+
+								vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
+								vgparent.AppendChild(vgn)
+								{
+									vgparent := vgn
+									_ = vgparent
+									vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "John Doe"}
+									vgparent.AppendChild(vgn)
+								}
+								return
+							})
+							vgout.Components = append(vgout.Components, vgcomp)
+							vgn = &vugu.VGNode{Component: vgcomp}
+							vgparent.AppendChild(vgn)
+						}
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
+						vgparent.AppendChild(vgn)
+						{
+							vgcompKey := vugu.MakeCompKey(0x1D39634A579B7FEA^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
-							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.ButtonNav)
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
 								// create new one if needed
-								vgcomp = new(input.ButtonNav)
+								vgcomp = new(navigation.SidebarEntry)
 								vgin.BuildEnv.WireComponent(vgcomp)
 							}
 							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
@@ -250,7 +351,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0xACAC312934F8C0E3^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0xECD3DBB2A4682E34^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LSettings)
 									if vgcomp == nil {
@@ -272,8 +373,14 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgparent := vgn
 								_ = vgparent
 
-								vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Bottom"}
+								vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
 								vgparent.AppendChild(vgn)
+								{
+									vgparent := vgn
+									_ = vgparent
+									vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Settings"}
+									vgparent.AppendChild(vgn)
+								}
 								return
 							})
 							vgout.Components = append(vgout.Components, vgcomp)

router.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 //go:build wasm
 
 package main

scripts/dev-server/devserver.go

@@ -1,8 +1,3 @@
-// Copyright (c) 2021 David Vogel
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
 package main
 
 import (