fix doc page css

htmgo-site/pages/base/root.go

@@ -35,9 +35,21 @@ func RootPage(ctx *h.RequestContext, children ...h.Ren) *h.Element {
 			`),
 		),
 		h.Body(
-			h.Class("bg-stone-50 min-h-screen overflow-x-hidden"),
+			h.Class("bg-stone-50 h-screen"),
-			partials.NavBar(ctx, false),
 			h.Fragment(children...),
 		),
 	)
 }
+
+func PageWithNav(ctx *h.RequestContext, children ...h.Ren) *h.Element {
+	return RootPage(ctx,
+		h.Fragment(
+			partials.NavBar(ctx, partials.NavBarProps{
+				Expanded: false,
+			}),
+			h.Div(
+				children...,
+			),
+		),
+	)
+}

htmgo-site/pages/docs.go

@@ -15,37 +15,48 @@ func DocsPage(ctx *h.RequestContext) *h.Page {
 	return h.NewPage(base.RootPage(
 		ctx,
 		h.Div(
-			h.Class("flex flex-col md:flex-row gap-6 justify-center overflow-x-hidden"),
+			h.Class("flex h-full"),
 			h.Aside(
-				h.Class("md:h-screen md:sticky md:top-0 md:w-42"), // Applied sticky positioning here
+				h.Class("hidden md:block md:min-w-60 text-white overflow-y-auto"),
 				partials.DocSidebar(pages),
 			),
-			h.Main(
+			h.Div(
-				h.Class("md:flex gap-4 justify-center mb-6"),
+				h.Class("flex flex-col flex-1 overflow-hidden"),
-				h.Div(
+				partials.NavBar(ctx, partials.NavBarProps{
-					h.Class("flex flex-col"),
+					Expanded:       false,
+					ShowPreRelease: false,
+				}),
+				h.Main(
 					h.Div(
-						h.Class("flex flex-col justify-center items-center md:mt-6 "),
+						h.Class("w-full md:hidden bg-neutral-50 overflow-y-auto"),
-						h.List(pages, func(page *dirwalk.Page, index int) *h.Element {
+						partials.DocSidebar(pages),
-							anchor := partials.CreateAnchor(page.Parts)
-							return h.Div(
-								h.Class("border-b border-b-slate-300 w-full pb-8 p-4 md:px-0 -mb-2"),
-								MarkdownContent(ctx, page.FilePath, anchor),
-								h.Div(
-									h.Class("ml-4 pl-1 mt-2 bg-rose-200"),
-									h.If(anchor == "core-concepts-partials",
-										h.GetPartial(partials.CurrentTimePartial, "load, every 1s"),
-									),
-								),
-							)
-						}),
 					),
+					h.Class("overflow-y-auto justify-center md:mx-auto overflow-x-hidden pb-6"),
 					h.Div(
-						h.Class("flex justify-center items-center mt-6"),
+						h.Class("flex flex-col"),
-						h.A(
+						h.Div(
-							h.Text("Back to Top"),
+							h.Class("flex flex-col justify-center items-center md:mt-6 "),
-							h.Class("py-2 px-3 bg-slate-800 rounded text-white"),
+							h.List(pages, func(page *dirwalk.Page, index int) *h.Element {
-							h.Href("#"),
+								anchor := partials.CreateAnchor(page.Parts)
+								return h.Div(
+									h.Class("border-b border-b-slate-300 w-full pb-8 p-4 md:px-0 -mb-2"),
+									MarkdownContent(ctx, page.FilePath, anchor),
+									h.Div(
+										h.Class("ml-4 pl-1 mt-2 bg-rose-200"),
+										h.If(anchor == "core-concepts-partials",
+											h.GetPartial(partials.CurrentTimePartial, "load, every 1s"),
+										),
+									),
+								)
+							}),
+						),
+						h.Div(
+							h.Class("flex justify-center items-center mt-6"),
+							h.A(
+								h.Text("Back to Top"),
+								h.Class("py-2 px-3 bg-slate-800 rounded text-white"),
+								h.Href("#quick-start-introduction"),
+							),
 						),
 					),
 				),

htmgo-site/pages/examples.go

@@ -50,7 +50,7 @@ var examples = []Example{
 
 func ExamplesPage(ctx *h.RequestContext) *h.Page {
 	return h.NewPage(
-		base.RootPage(ctx, h.Div(
+		base.PageWithNav(ctx, h.Div(
 			h.Class("flex items-center justify-center"),
 			h.Div(
 				h.Class("w-full px-4 flex flex-col prose max-w-[95vw] md:max-w-3xl mt-6"),

htmgo-site/pages/html-to-go.go

@@ -8,7 +8,7 @@ import (
 
 func HtmlToGoPage(ctx *h.RequestContext) *h.Page {
 	return h.NewPage(
-		base.RootPage(ctx,
+		base.PageWithNav(ctx,
 			h.Div(
 				h.Class("flex flex-col h-full items-center justify-center w-full pt-6"),
 				h.H3(

htmgo-site/pages/index.go

@@ -7,7 +7,7 @@ import (
 
 func IndexPage(ctx *h.RequestContext) *h.Page {
 	return h.NewPage(
-		base.RootPage(ctx, h.Div(
+		base.PageWithNav(ctx, h.Div(
 			h.Class("flex items-center justify-center"),
 			h.Div(
 				h.Class("w-full px-4 flex flex-col prose md:max-w-3xl mt-6 mx-auto"),

htmgo-site/pages/markdown.go

@@ -22,7 +22,7 @@ func MarkdownContent(ctx *h.RequestContext, path string, id string) *h.Element {
 	return h.Div(
 		h.If(id != "", h.Id(id)),
 		h.Div(
-			h.Class("w-full flex flex-col prose max-w-[95vw] md:max-w-3xl prose-code:text-black prose-p:my-1 prose:p-0 prose-li:m-0 prose-ul:m-0 prose-ol:m-0"),
+			h.Class("w-full flex flex-col prose max-w-md md:max-w-xl lg:max-w-3xl prose-code:text-black prose-p:my-1 prose:p-0 prose-li:m-0 prose-ul:m-0 prose-ol:m-0"),
 			h.UnsafeRaw(renderer.RenderFile(path, embeddedMd)),
 		),
 	)

htmgo-site/partials/navbar.go

@@ -18,6 +18,11 @@ var navItems = []NavItem{
 	{Name: "Convert HTML", Url: "/html-to-go"},
 }
 
+type NavBarProps struct {
+	Expanded       bool
+	ShowPreRelease bool
+}
+
 func ToggleNavbar(ctx *h.RequestContext) *h.Partial {
 	return h.SwapManyPartial(
 		ctx,
@@ -69,15 +74,16 @@ func Star(ctx *h.RequestContext) *h.Element {
 	)
 }
 
-func NavBar(ctx *h.RequestContext, expanded bool) *h.Element {
+func NavBar(ctx *h.RequestContext, props NavBarProps) *h.Element {
-	prelease := h.A(h.Class("bg-yellow-200 text-yellow-800 text-center p-2 flex items-center justify-center"),
+	prelease := h.If(props.ShowPreRelease, h.A(
+		h.Class("bg-yellow-200 text-yellow-800 text-center p-2 flex items-center justify-center"),
 		h.Href("https://github.com/maddalax/htmgo/issues"),
 		h.Attribute("target", "_blank"),
 		h.Text("htmgo is in alpha release. Please report any issues on GitHub."),
-	)
+	))
 
 	desktopNav := h.Nav(
-		h.Class("hidden sm:block bg-neutral-100 border border-b-slate-300 p-4 md:p-3"),
+		h.Class("hidden sm:block bg-neutral-100 border border-b-slate-300 p-4 md:p-3 max-h-[100vh - 9rem] overflow-y-auto"),
 		h.Div(
 			h.Class("max-w-[95%] md:max-w-3xl px-4 mx-auto"),
 			h.Div(
@@ -110,7 +116,7 @@ func NavBar(ctx *h.RequestContext, expanded bool) *h.Element {
 	return h.Div(
 		h.Id("navbar"),
 		prelease,
-		MobileNav(ctx, expanded),
+		MobileNav(ctx, props.Expanded),
 		desktopNav,
 	)
 }