MOBILE

src/menu.go

@@ -39,22 +39,23 @@ func (m *menu) Render() app.UI {
 		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"),
-				),
+				newMenuLink().
+					Link("/").
+					Text("Home"),
+				newMenuLink().
+					Link("/about").
+					Text("About"),
+				newMenuLink().
+					Link("/galaxies").
+					Text("Galaxies"),
+				newMenuLink().
+					Link("/music").
+					Text("Music"),
 				// Disabled for now since there are none anyway
-				app.Li().Body(
-					app.A().Href("/blog").Text("Blog"),
-				).Style("display", "none"),
+				app.Li().
+					Body(
+						app.A().Href("/blog").Text("Blog"),
+					).Style("display", "none"),
 			),
 			app.If(m.updateAvailable,
 				app.Div().Body(
@@ -74,3 +75,36 @@ func (m *menu) Render() app.UI {
 func (m *menu) onUpdateClick(ctx app.Context, e app.Event) {
 	ctx.Reload()
 }
+
+type menuLink struct {
+	app.Compo
+
+	IText string
+	ILink string
+}
+
+func newMenuLink() *menuLink {
+	return &menuLink{}
+}
+
+func (m *menuLink) Text(v string) *menuLink {
+	m.IText = v
+	return m
+}
+
+func (m *menuLink) Link(v string) *menuLink {
+	m.ILink = v
+	return m
+}
+
+func (m *menuLink) Render() app.UI {
+	return app.A().
+		Class("menuitem-link").
+		Href(m.ILink).
+		Body(app.Div().
+			Class("menuitem").
+			Body(app.Span().
+				Class("menuitem-text").
+				Text(m.IText)),
+		)
+}

ui/menu.go

@@ -98,9 +98,11 @@ func (m *menu) Render() app.UI {
 	return app.Div().
 		ID(m.Iid).
 		Class(m.Iclass).
+		Style("height", "100%").
 		Body(
 			app.Div().
 				//Style("display", "flex").
+				Style("display", visible(!m.hideMenu)).
 				Style("width", "100%").
 				Style("height", "100%").
 				Style("overflow", "hidden").

web/static/style.css

@@ -1,18 +1,12 @@
 html {
 /*	overflow-y: scroll; */
 	margin: 0;
-	height: 100%;
-	-ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-html::-webkit-scrollbar {
-	display: none;
+	height: 99%;
 }
 
 body {
 	margin: 0;
-	height: 100%;
+	height: 99%;
 	background-image: url(images/background_star.gif);
 }
 
@@ -64,6 +58,7 @@ body {
 }
 
 .main {
+	display: flex;
 	margin-top: 5px;
 	width: 900px;
 	position: relative;
@@ -82,7 +77,7 @@ body {
 
 .navbar a, a:link, a:visited{
 	text-decoration: none;
-	color:rgb(252, 230, 255)
+	color:#fce6ff
 }
 
 .left {
@@ -366,8 +361,12 @@ div.comment-message p{
 	.header {
 		font-size: 10vw;
 		height: fit-content;
+		flex: 0 1 auto;
 	}
+
   .main {
+		display: flex;
+		flex-flow: column;
 		padding-left: 5px; 
 		padding-right: 5px;
 		width: 100%;
@@ -392,5 +391,40 @@ div.comment-message p{
 		z-index: 1;
 		max-width: unset;
 		width: 100%;
+		flex: 1 1 auto;
+	}
+
+	.navbar {
+		height: 100%;
+		display: flexbox;
+		flex-direction: column;
+	}
+
+	.navbar ul {
+		padding-inline-end: 40px;
+	}
+	
+	.menuitem {
+		padding: 3.5mm 10px;
+		margin-bottom: 10px;
+		min-width: 65px;
+		flex: 1 1 auto;
+		border: 0px none;
+		border-radius: 6px;
+		background-color: 	#4974a5;
+		text-align: center;
+		vertical-align: middle;
+	}
+
+	.menuitem-text {
+
+	}
+
+	.menuitem-link {
+		list-style-type: none;
+	}
+
+	.menuitem-link a {
+		text-align: center;
 	}
 }