Fix mobile kinda

src/block.go

@@ -9,6 +9,7 @@ type htmlBlock struct {
 
 	Iclass string
 	Isrc   string // HTML document source
+	Iid    string
 
 	// TODO: implement invisibility for other background functions
 }
@@ -17,6 +18,11 @@ func newHTMLBlock() *htmlBlock {
 	return &htmlBlock{}
 }
 
+func (b *htmlBlock) ID(v string) *htmlBlock {
+	b.Iid = v
+	return b
+}
+
 func (b *htmlBlock) Class(v string) *htmlBlock {
 	b.Iclass = app.AppendClass(b.Iclass, v)
 	return b
@@ -46,12 +52,18 @@ type uiBlock struct {
 
 	Iclass string
 	Iui    []app.UI
+	Iid    string
 }
 
 func newUIBlock() *uiBlock {
 	return &uiBlock{}
 }
 
+func (b *uiBlock) ID(v string) *uiBlock {
+	b.Iid = v
+	return b
+}
+
 func (b *uiBlock) Class(v string) *uiBlock {
 	b.Iclass = app.AppendClass(b.Iclass, v)
 	return b

src/menu.go

@@ -34,9 +34,8 @@ func (m *menu) OnAppUpdate(ctx app.Context) {
 
 func (m *menu) Render() app.UI {
 	return app.Div().
-		Class("left").
 		Class("block").
-		Class("leftbarblock-nop").
+		//		Class("leftbarblock-nop").
 		Class("navbar").
 		Body(
 			app.Ul().Body(

src/page.go

@@ -16,11 +16,14 @@ type page struct {
 	IleftBar         []app.UI
 	Imain            []app.UI
 
+	hideRightContent bool
 	// TODO: Possibly add "updateavailable" here, so it shows up on every page
 }
 
 func newPage() *page {
-	return &page{}
+	return &page{
+		hideRightContent: false,
+	}
 }
 
 func (p *page) Background(v ...app.UI) *page {
@@ -48,6 +51,11 @@ func (p *page) Main(v ...app.UI) *page {
 	return p
 }
 
+func (p *page) OnMount(ctx app.Context) {
+	ctx.Handle("right-hide", p.hideRight)
+	ctx.Handle("right-show", p.showRight)
+}
+
 func (p *page) Render() app.UI {
 	if p.IbackgroundClass == "" {
 		p.IbackgroundClass = app.AppendClass(p.IbackgroundClass, "background")
@@ -66,7 +74,9 @@ func (p *page) Render() app.UI {
 					}),
 				),
 			app.Div().
+				Style("display", visible(p.hideRightContent)).
 				Class("right").
+				ID("right").
 				Body(
 					app.Range(p.Imain).Slice(func(i int) app.UI {
 						return p.Imain[i]
@@ -74,3 +84,18 @@ func (p *page) Render() app.UI {
 				),
 		)
 }
+
+func visible(v bool) string {
+	if v {
+		return "none"
+	}
+	return "block"
+}
+
+func (p *page) hideRight(ctx app.Context, a app.Action) {
+	p.hideRightContent = true
+}
+
+func (p *page) showRight(ctx app.Context, a app.Action) {
+	p.hideRightContent = false
+}

ui/menu.go

@@ -129,9 +129,10 @@ func (m *menu) Render() app.UI {
 				),
 			app.Div().
 				Style("display", visible(m.hideMenu && m.showHamburgerMenu)).
-				Style("position", "absolute").
-				Style("top", "0").
-				Style("left", "0").
+				Style("position", "relative").
+				//				Style("top", "0").
+				//				Style("left", "0").
+				//				Style("right", "0").
 				Style("width", "100%").
 				Style("height", "100%").
 				Style("overflow", "hidden").
@@ -164,8 +165,10 @@ func pxToString(px int) string {
 
 func (m *menu) onHamburgerButtonClick(ctx app.Context, e app.Event) {
 	m.showHamburgerMenu = true
+	ctx.NewAction("right-hide")
 }
 
 func (m *menu) hideHamburgerMenu(ctx app.Context, e app.Event) {
 	m.showHamburgerMenu = false
+	ctx.NewAction("right-show")
 }

web/static/style.css

@@ -1,11 +1,17 @@
 html {
-	overflow-y: scroll;
-	margin: 0px;
+/*	overflow-y: scroll; */
+	margin: 0;
 	height: 100%;
+	-ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+html::-webkit-scrollbar {
+	display: none;
 }
 
 body {
-	margin: 0px;
+	margin: 0;
 	height: 100%;
 	background-image: url(images/background_star.gif);
 }
@@ -66,6 +72,7 @@ body {
 	color:aliceblue;
 	font-family: havakana;
 	font-size: 1.1em;
+	box-sizing: border-box;
 }
 
 .navbar {
@@ -358,12 +365,13 @@ div.comment-message p{
 @media only screen and (max-width: 914px) {
 	.header {
 		font-size: 10vw;
+		height: fit-content;
 	}
   .main {
 		padding-left: 5px; 
 		padding-right: 5px;
 		width: 100%;
-		box-sizing: border-box;
+		height: 100%;
   }
 
 	.block {
@@ -373,9 +381,16 @@ div.comment-message p{
 	.right {
 		width: 100%;
 		max-width: none;
+		z-index: 0;
 	}
 
 	.leftbarblock { 
 		display: none;
 	}
+
+	.left {
+		z-index: 1;
+		max-width: unset;
+		width: 100%;
+	}
 }