css fixes for small devices

framework/h/lifecycle.go

@@ -113,3 +113,13 @@ func Alert(text string) JsCommand {
 func EvalJs(js string) JsCommand {
 	return JsCommand{Command: js}
 }
+
+func InjectScript(src string) JsCommand {
+	// language=JavaScript
+	return JsCommand{Command: fmt.Sprintf(`
+		var script = document.createElement('script');
+		script.src = '%s';
+        src.async = true;
+		document.head.appendChild(script);
+	`, src)}
+}

htmgo-site/pages/base/root.go

@@ -25,8 +25,10 @@ func RootPage(children ...h.Ren) *h.Element {
 				<script async defer src="https://buttons.github.io/buttons.js"></script>
 			`),
 		),
-		h.Class("bg-neutral-50 min-h-screen overflow-x-hidden"),
+		h.Body(
-		partials.NavBar(),
+			h.Class("bg-neutral-50 min-h-screen overflow-x-hidden"),
-		h.Fragment(children...),
+			partials.NavBar(false),
+			h.Fragment(children...),
+		),
 	)
 }

htmgo-site/pages/markdown.go

@@ -15,7 +15,7 @@ func MarkdownHandler(ctx *h.RequestContext, path string) error {
 func MarkdownPage(ctx *h.RequestContext, path string) *h.Element {
 	return base.RootPage(
 		h.Div(
-			h.Class("flex flex-col p-4 justify-center items-center"),
+			h.Class("w-full p-4 flex flex-col justify-center items-center"),
 			MarkdownContent(ctx, path),
 			h.Div(
 				h.Class("min-h-12"),
@@ -29,7 +29,7 @@ func MarkdownContent(ctx *h.RequestContext, path string) *h.Element {
 	renderer := service.Get[markdown.Renderer](ctx.ServiceLocator())
 	return h.Div(
 		h.Article(
-			h.Class("prose max-w-sm pt-3 p-4 md:p-4 md:max-w-2xl prose-code:text-black"),
+			h.Class("prose max-w-[95vw] md:max-w-2xl px-4 prose-code:text-black"),
 			h.Raw(renderer.RenderFile(path, embeddedMd)),
 		),
 	)

htmgo-site/partials/load/generated.go

@@ -3,8 +3,14 @@ package load
 
 import "github.com/maddalax/htmgo/framework/h"
 import "github.com/labstack/echo/v4"
+import "htmgo-site/partials"
 
 func GetPartialFromContext(ctx echo.Context) *h.Partial {
+	path := ctx.Request().URL.Path
+	if path == "ToggleNavbar" || path == "/htmgo-site/partials.ToggleNavbar" {
+		cc := ctx.(*h.RequestContext)
+		return partials.ToggleNavbar(cc)
+	}
 	return nil
 }
 

htmgo-site/partials/navbar.go

@@ -7,9 +7,19 @@ type NavItem struct {
 	Url  string
 }
 
-func NavBar() *h.Element {
+func ToggleNavbar(ctx *h.RequestContext) *h.Partial {
+	return h.NewPartial(
+		h.OobSwap(ctx, MobileNav(h.GetQueryParam(ctx, "expanded") == "true")),
+	)
+}
 
-	star := h.Raw(`
+var navItems = []NavItem{
+	{Name: "Docs", Url: "/docs"},
+	{Name: "Examples", Url: "/examples"},
+}
+
+func Star() *h.RawContent {
+	return h.Raw(`
 		<a 
 		class="github-button" 
 		href="https://github.com/maddalax/htmgo" 
@@ -19,47 +29,93 @@ func NavBar() *h.Element {
 		data-show-count="true"
 		aria-label="Star maddalax/htmgo on GitHub">Star</a>
 	`)
+}
 
-	navItems := []NavItem{
+func NavBar(expanded bool) *h.Element {
-		{Name: "Docs", Url: "/docs"},
-		{Name: "Examples", Url: "/examples"},
-	}
-
 	prelease := h.Div(h.Class("bg-yellow-200 text-yellow-800 text-center p-2"),
 		h.Text("This is a prerelease version and generally should not be used at this time. Watch on github for the stable release!"),
 	)
 
-	return h.Div(
+	desktopNav := h.Nav(
-		prelease,
+		h.Class("hidden sm:block bg-neutral-100 border border-b-slate-300 p-4 md:p-3"),
-		h.Nav(
+		h.Div(
-			h.Class("bg-neutral-100 border border-b-slate-300 p-4 md:p-3"),
+			h.Class("max-w-[95%] md:max-w-prose mx-auto"),
 			h.Div(
-				h.Class("max-w-[95%] md:max-w-prose mx-auto"),
+				h.Class("flex justify-between items-center"),
 				h.Div(
-					h.Class("flex justify-between items-center"),
+					h.Class("flex items-center"),
-					h.Div(
+					h.A(
-						h.Class("flex items-center"),
+						h.Class("text-2xl"),
-						h.A(
+						h.Href("/"),
-							h.Class("text-2xl"),
+						h.Text("htmgo"),
-							h.Href("/"),
+					)),
-							h.Text("htmgo"),
+				h.Div(
-						)),
+					h.Class("flex gap-4 items-center"),
-					h.Div(
+					h.List(navItems, func(item NavItem, index int) *h.Element {
-						h.Class("flex gap-4 items-center"),
+						return h.Div(
-						h.List(navItems, func(item NavItem, index int) *h.Element {
+							h.Class("flex items-center"),
-							return h.Div(
+							h.A(
-								h.Class("flex items-center"),
+								h.Class(""),
-								h.A(
+								h.Href(item.Url),
-									h.Class(""),
+								h.Text(item.Name),
-									h.Href(item.Url),
+							),
-									h.Text(item.Name),
+						)
-								),
+					}),
-							)
+					h.Div(h.Class("ml-2 hidden md:block"), Star()),
-						}),
-						h.Div(h.Class("ml-2"), star),
-					),
 				),
 			),
 		),
 	)
+
+	return h.Div(
+		h.Class("mb-4"),
+		h.Id("navbar"),
+		prelease,
+		MobileNav(expanded),
+		desktopNav,
+	)
+}
+
+func MobileNav(expanded bool) *h.Element {
+	return h.Nav(
+		h.Id("mobile-nav"),
+		h.Class("block sm:hidden bg-neutral-100 border border-b-slate-300 p-4 md:p-3"),
+		h.Div(
+			h.Class("max-w-[95%] md:max-w-prose mx-auto"),
+			h.Div(
+				h.Class("flex justify-between items-center"),
+				h.Div(
+					h.Class("flex items-center"),
+					h.A(
+						h.Class("text-2xl"),
+						h.Href("/"),
+						h.Text("htmgo"),
+					)),
+				h.Div(
+					h.Class("flex items-center"),
+					h.Button(
+						h.GetPartialWithQs(ToggleNavbar, h.Ternary(expanded, "expanded=false", "expanded=true")),
+						h.Trigger(h.TriggerClick),
+						h.Class("text-2xl"),
+						h.Text("☰"),
+					),
+				),
+			),
+		),
+		h.If(expanded, h.Div(
+			h.Class("mt-2 ml-2 flex flex-col gap-2"),
+			h.Script("https://buttons.github.io/buttons.js"),
+			h.List(navItems, func(item NavItem, index int) *h.Element {
+				return h.Div(
+					h.Class("flex items-center"),
+					h.A(
+						h.Class(""),
+						h.Href(item.Url),
+						h.Text(item.Name),
+					),
+				)
+			}),
+			h.Div(Star()),
+		)),
+	)
 }