prologic-saltyim/internal/pwa/components/page.go

package components

import (
	"github.com/maxence-charriere/go-app/v9/pkg/app"
	"github.com/mlctrez/goapp-mdc/pkg/bar"
	"github.com/mlctrez/goapp-mdc/pkg/drawer"
	"github.com/mlctrez/goapp-mdc/pkg/icon"
	log "github.com/sirupsen/logrus"
)

const (
	desktopBreakPoint = 768 // 768px
)

var (
	widthChecked bool
	DesktopMode  bool
)

// PageBody applies the navigation, update banner, and demo page layout to the provided pageContent.
func PageBody(pageContent ...app.UI) app.UI {
	initDesktopMode()

	nav := &Navigation{Type: drawer.Dismissible}

	if DesktopMode {
		nav.Type = drawer.Standard
	}

	topBar := &bar.TopAppBar{Title: "Salty IM", Fixed: true, ScrollTarget: "main-content"}

	if !DesktopMode {
		menuButton := icon.MIMenu.Button().OnClick(func(ctx app.Context, e app.Event) {
			toggleDrawer(ctx, nav)
		})
		topBar.Navigation = []app.HTMLButton{menuButton}
	} else {
		// TODO: put current chat user in menu
		topBar.Navigation = []app.HTMLButton{}
	}

	reloadButton := icon.MIRefresh.Button().Title("reload the page")
	reloadButton.OnClick(func(ctx app.Context, e app.Event) { ctx.Reload() })

	topBar.Actions = []app.HTMLButton{reloadButton}

	if DesktopMode {
		var navFirstContent []app.UI
		navFirstContent = append(navFirstContent, nav)
		navFirstContent = append(navFirstContent, pageContent...)

		return app.Div().Body(
			&AppUpdateBanner{},
			topBar,
			app.Div().Class("main-content").ID("main-content").Body(
				topBar.Main().Body(
					app.Div().Style("display", "flex").Body(navFirstContent...),
				),
			),
		)
	} else {
		return app.Div().Body(
			nav,
			app.Div().Class("mdc-drawer-app-content").Body(
				&AppUpdateBanner{},
				topBar,
				app.Div().Class("main-content").ID("main-content").Body(
					topBar.Main().Body(
						app.Div().Style("display", "flex").Body(pageContent...),
					),
				),
			),
		)
	}

}

func toggleDrawer(ctx app.Context, nav *Navigation) {
	if DrawerOpen {
		nav.drawer.ActionClose(ctx)
	} else {
		nav.drawer.ActionOpen(ctx)
	}
	DrawerOpen = !DrawerOpen
}

func initDesktopMode() {
	if !widthChecked {
		widthChecked = true
		if app.IsClient {
			innerWidth := app.Window().Get("innerWidth")
			if innerWidth.Truthy() {
				DesktopMode = innerWidth.Int() >= desktopBreakPoint
			}
			log.Debugf("desktop mode is %t", DesktopMode)
		}
	}
}