Add hamburger

src/menu.go

@@ -0,0 +1,77 @@
+package main
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+type menu struct {
+	app.Compo
+
+	Iclass          string
+	updateAvailable bool
+
+	IpaneWidth    int
+	OnClickButton func(page string)
+}
+
+func newMenu() *menu {
+	return &menu{}
+}
+
+func (m *menu) PaneWidth(px int) *menu {
+	if px > 0 {
+		m.IpaneWidth = px
+	}
+	return m
+}
+
+func (m *menu) Class(v string) *menu {
+	m.Iclass = app.AppendClass(m.Iclass, v)
+	return m
+}
+
+func (m *menu) OnAppUpdate(ctx app.Context) {
+	m.updateAvailable = ctx.AppUpdateAvailable()
+}
+
+func (m *menu) Render() app.UI {
+	return app.Div().
+		Class("left").
+		Class("block").
+		Class("leftbarblock-nop").
+		Class("navbar").
+		Body(
+			app.Ul().Body(
+				app.Li().Body(
+					app.A().Href("/").Text("Home"),
+				),
+				app.Li().Body(
+					app.A().Href("/about").Text("About"),
+				),
+				app.Li().Body(
+					app.A().Href("/galaxies").Text("Galaxies"),
+				),
+				app.Li().Body(
+					app.A().Href("/music").Text("Music"),
+				),
+				// Disabled for now since there are none anyway
+				app.Li().Body(
+					app.A().Href("/blog").Text("Blog"),
+				).Style("display", "none"),
+			),
+			app.If(m.updateAvailable,
+				app.Div().Body(
+					app.Img().
+						Src("/web/static/images/hot1.gif").
+						Class("update-img"),
+					app.Span().
+						Text("Update available! Click here to update!").
+						Class("update-text"),
+				).
+					Class("update-div").
+					OnClick(m.onUpdateClick),
+			),
+		)
+}
+
+func (m *menu) onUpdateClick(ctx app.Context, e app.Event) {
+	ctx.Reload()
+}

src/navbar.go

@@ -1,6 +1,9 @@
 package main
 
-import "github.com/maxence-charriere/go-app/v9/pkg/app"
+import (
+	"dutchellie.nl/DutchEllie/proper-website-2/ui"
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
 
 type navbar struct {
 	app.Compo
@@ -14,38 +17,14 @@ func (n *navbar) OnAppUpdate(ctx app.Context) {
 }
 
 func (n *navbar) Render() app.UI {
-	return app.Div().Body(
+	return ui.Menu().
-		app.Ul().Body(
+		PaneWidth(250).
-			app.Li().Body(
+		Menu(
-				app.A().Href("/").Text("Home"),
+			newMenu(),
-			),
-			app.Li().Body(
-				app.A().Href("/about").Text("About"),
-			),
-			app.Li().Body(
-				app.A().Href("/galaxies").Text("Galaxies"),
-			),
-			app.Li().Body(
-				app.A().Href("/music").Text("Music"),
-			),
-			// Disabled for now since there are none anyway
-			app.Li().Body(
-				app.A().Href("/blog").Text("Blog"),
-			).Style("display", "none"),
-		),
-		app.If(n.updateAvailable,
-			app.Div().Body(
-				app.Img().
-					Src("/web/static/images/hot1.gif").
-					Class("update-img"),
-				app.Span().
-					Text("Update available! Click here to update!").
-					Class("update-text"),
 		).
-				Class("update-div").
+		HamburgerMenu(
-				OnClick(n.onUpdateClick),
+			newMenu(),
-		),
+		)
-	).Class("navbar")
 }
 
 func (n *navbar) onUpdateClick(ctx app.Context, e app.Event) {

ui/menu.go

@@ -0,0 +1,171 @@
+package ui
+
+import (
+	"strconv"
+
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
+type IMenu interface {
+	app.UI
+
+	ID(v string) IMenu
+	Class(v string) IMenu
+	PaneWidth(px int) IMenu
+	HamburgerButton(v app.UI) IMenu
+	HamburgerMenu(v ...app.UI) IMenu
+	Menu(v ...app.UI) IMenu
+}
+
+func Menu() IMenu {
+	return &menu{}
+}
+
+type menu struct {
+	app.Compo
+
+	Iid              string
+	Iclass           string
+	Ipanewidth       int
+	IhamburgerButton app.UI
+	IhamburgerMenu   []app.UI
+	Imenu            []app.UI
+
+	hideMenu          bool
+	showHamburgerMenu bool
+	width             int
+}
+
+func (m *menu) ID(v string) IMenu {
+	m.Iid = v
+	return m
+}
+
+func (m *menu) Class(v string) IMenu {
+	m.Iclass = app.AppendClass(m.Iclass, v)
+	return m
+}
+
+func (m *menu) PaneWidth(px int) IMenu {
+	if px > 0 {
+		m.Ipanewidth = px
+	}
+	return m
+}
+
+func (m *menu) HamburgerButton(v app.UI) IMenu {
+	b := app.FilterUIElems(v)
+	if len(b) != 0 {
+		m.IhamburgerButton = b[0]
+	}
+	return m
+}
+
+func (m *menu) HamburgerMenu(v ...app.UI) IMenu {
+	m.IhamburgerMenu = app.FilterUIElems(v...)
+	return m
+}
+
+func (m *menu) Menu(v ...app.UI) IMenu {
+	m.Imenu = app.FilterUIElems(v...)
+	return m
+}
+
+func (m *menu) OnPreRender(ctx app.Context) {
+	m.refresh(ctx)
+}
+
+func (m *menu) OnMount(ctx app.Context) {
+	m.refresh(ctx)
+}
+
+func (m *menu) OnResize(ctx app.Context) {
+	m.refresh(ctx)
+}
+
+func (m *menu) OnUpdate(ctx app.Context) {
+	m.refresh(ctx)
+}
+
+func (m *menu) Render() app.UI {
+	visible := func(v bool) string {
+		if v {
+			return "block"
+		}
+		return "none"
+	}
+
+	return app.Div().
+		ID(m.Iid).
+		Class(m.Iclass).
+		Body(
+			app.Div().
+				//Style("display", "flex").
+				Style("width", "100%").
+				Style("height", "100%").
+				Style("overflow", "hidden").
+				Body(
+					app.Div().
+						Style("position", "relative").
+						Style("display", visible(!m.hideMenu)).
+						Style("flex-shrink", "0").
+						Style("flex-basis", pxToString(m.Ipanewidth)).
+						Style("overflow", "hidden").
+						Body(m.Imenu...),
+				),
+			app.Div().
+				Style("display", visible(m.hideMenu && len(m.IhamburgerMenu) != 0)).
+				Style("position", "absolute").
+				Style("top", "0").
+				Style("left", "0").
+				Style("cursor", "pointer").
+				OnClick(m.onHamburgerButtonClick).
+				Body(
+					app.If(m.IhamburgerButton == nil,
+						app.Div().
+							Class("goapp-shell-hamburger-button-default").
+							Text("☰"),
+					),
+				),
+			app.Div().
+				Style("display", visible(m.hideMenu && m.showHamburgerMenu)).
+				Style("position", "absolute").
+				Style("top", "0").
+				Style("left", "0").
+				Style("width", "100%").
+				Style("height", "100%").
+				Style("overflow", "hidden").
+				OnClick(m.hideHamburgerMenu).
+				Body(m.IhamburgerMenu...),
+		)
+}
+
+func (m *menu) refresh(ctx app.Context) {
+	w, _ := app.Window().Size()
+	hideMenu := true
+	if w >= 914 {
+		hideMenu = false
+	}
+
+	if hideMenu != m.hideMenu ||
+		w != m.width {
+		m.hideMenu = hideMenu
+		m.width = w
+
+		ctx.Defer(func(app.Context) {
+			m.ResizeContent()
+		})
+	}
+}
+
+func pxToString(px int) string {
+	return strconv.Itoa(px) + "px"
+}
+
+func (m *menu) onHamburgerButtonClick(ctx app.Context, e app.Event) {
+	m.showHamburgerMenu = true
+}
+
+func (m *menu) hideHamburgerMenu(ctx app.Context, e app.Event) {
+	m.showHamburgerMenu = false
+}

web/static/style.css

@@ -69,14 +69,6 @@ body {
 }
 
 .navbar {
-	border: 3px solid;
-	border-radius: 4px;
-	border-color: rgb(252, 230, 255);
-	margin-bottom: 5px;
-	background-color: rgb(54, 39, 48);
-	position: relative;
-	float:left;
-	width: 250px;
 	text-decoration: none;
 	list-style: none;
 }
@@ -88,7 +80,7 @@ body {
 
 .left {
 	float:left;
-	max-width: 250px;
+	max-width: 256px;
 }
 
 .right {
@@ -116,6 +108,11 @@ body {
 	position: relative;
 }
 
+.leftbarblock-nop {
+	float:left;
+	width: 250px;
+}
+
 .leftbarblock {
 	float:left;
 	width: 250px;