Okay this is based

components/aboutpage.go

@@ -15,10 +15,8 @@ func NewAboutPage() *AboutPage {
 func (a *AboutPage) Render() app.UI {
 	return app.Div().Body(
 		&header{},
-		app.Div().Body(
+		&navbar{},
-			newNavbar(),
 		&aboutPanel{},
-		).Class("main"),
 	)
 }
 

components/friendspage.go

@@ -0,0 +1,38 @@
+package components
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+type FriendsPage struct {
+	app.Compo
+}
+
+func NewFriendsPage() *FriendsPage {
+	return &FriendsPage{}
+}
+
+func (f *FriendsPage) Render() app.UI {
+	return app.Div().Body(
+		&header{},
+		&navbar{},
+		&friendsPanel{},
+	).Class("main")
+}
+
+type friendsPanel struct {
+	app.Compo
+}
+
+func (f *friendsPanel) Render() app.UI {
+	return app.Div().Body(
+		app.P().
+			Text(`My friends!`).
+			Class("p-h1"),
+		app.Ul().Body(
+			app.Li().Body(
+				app.IFrame().
+					Src("forestofunix.xyz").
+					Class("friend-iframe"),
+			),
+		),
+	).Class("content")
+}

components/guestbookform.go

@@ -47,7 +47,6 @@ func (g *guestbookForm) Render() app.UI {
 				}
 				g.OnSubmit(g.name, g.message)
 				g.clear()
-				g.Update()
 			}),
 	).Class("content")
 }

components/guestbookpanel.go

@@ -65,18 +65,6 @@ func (g *guestbookPanel) LoadComments() {
 	}
 }
 
-func (g *guestbookPanel) OnMount(ctx app.Context) {
-	//g.LoadComments()
-}
-
-func (g *guestbookPanel) OnUpdate(ctx app.Context) {
-	if g.CommentUpdate {
-		g.LoadComments()
-		g.Update()
-		g.CommentUpdate = false
-	}
-}
-
 type guestbookComment struct {
 	app.Compo
 

components/homepage.go

@@ -15,18 +15,19 @@ type Homepage struct {
 
 	showGuestbook    bool
 	guestbookUpdated bool
+
+	page string
 }
 
 func NewHomepage() *Homepage {
-	return &Homepage{showGuestbook: true, guestbookUpdated: false}
+	return &Homepage{showGuestbook: true, guestbookUpdated: false, page: "home"}
 }
 
 func (p *Homepage) Render() app.UI {
 	gbp := newGuestbookPanel()
 	return app.Div().Body(
 		&header{},
-		app.Div().Body(
+		&navbar{},
-			newNavbar(),
 		&homePanel{
 			onShowClick: func() {
 				p.showGuestbook = !p.showGuestbook
@@ -50,11 +51,12 @@ func (p *Homepage) Render() app.UI {
 					return
 				}
 				if req.StatusCode == 200 {
+					p.Update()
 				}
 				defer req.Body.Close()
 			},
 		},
-			app.If(p.showGuestbook, gbp),
+		//app.If(p.showGuestbook, gbp),
-		).Class("main"),
+		gbp.Render(),
-	)
+	).Class("main")
 }

components/navbar.go

@@ -4,10 +4,8 @@ import "github.com/maxence-charriere/go-app/v9/pkg/app"
 
 type navbar struct {
 	app.Compo
-}
 
-func newNavbar() *navbar {
+	OnClickButton func(page string)
-	return &navbar{}
 }
 
 func (n *navbar) Render() app.UI {
@@ -19,6 +17,9 @@ func (n *navbar) Render() app.UI {
 			app.Li().Body(
 				app.A().Href("/about").Text("About"),
 			),
+			app.Li().Body(
+				app.A().Href("/friends").Text("Friends"),
+			),
 		),
 	).Class("navbar")
 }

main.go

@@ -22,8 +22,10 @@ type application struct {
 func main() {
 	homepage := components.NewHomepage()
 	aboutpage := components.NewAboutPage()
+	friendspage := components.NewFriendsPage()
 	app.Route("/", homepage)
 	app.Route("/about", aboutpage)
+	app.Route("/friends", friendspage)
 
 	// This is executed on the client side only.
 	// It handles client side stuff

web/static/style.css

@@ -69,6 +69,21 @@ body {
 	padding: 5px;
 }
 
+.friend-frame {
+	width: 290px;
+	height: 200px;
+	overflow: hidden;
+	list-style: none;
+	text-decoration: none;
+	-ms-zoom: 0.75;
+	-moz-transform: scale(0.75);
+	-moz-transform-origin: 0 0;
+	-o-transform: scale(0.75);
+	-o-transform-origin: 0 0;
+	-webkit-transform: scale(0.75);
+	-webkit-transform-origin: 0 0;
+}
+
 .p-h1 {
 	font-family: anisha;
 	font-size: 3em;