Active Link

Currently there is no active link highlighting, and there are two ways to add it:

check the current state during render and attach styles manually
use the doors.Active API and let the frontend handle it automatically

The first option would work here, because these links already re-render when query params change.

But the second option is the more common case, so it is worth learning.

doors.Active is part of Navigation and reuses the same indicator rules described in Indication.

Active

Add doors.Active to the navigation links:

dashboard.gox

elem (d dashboard) navUnits(s Settings) {
	/* ... */
			<a
				class="secondary"
				(doors.ALink{
					// active link configuration
					Active: doors.Active{
						Indicator: doors.IndicatorOnlyAttr("aria-current", "true"),
						// PathMatcher: ...,
						// QueryMatcher: ...,
					},
					Model: Path{
						Dashboard: true,
						CityID: d.city,
						Days: s.DaysQuery(),
						Units: s.UnitsQuery(),
					},
				})>
				~(unit.String())
			</a>
	/* ... */
}

The active link API reuses the indication API and lets you configure rules for path and query matching. Refer to the Navigation documentation for more details.

After it is applied to both navigation groups:

Active link highlighting for days and units

Next: Charts

Code

dashboard.gox

package main

import (
	"github.com/doors-dev/doors"
	"github.com/doors-dev/gox"
	"github.com/doors-dev/tutorial/driver"
)

type dashboard struct {
	city int
	settings doors.Beam[Settings]
}

elem (d dashboard) Main() {
	~{
		city, _ := driver.Locations.CitiesGet(d.city)
	}
	~(d.header(city))
	~(doors.Sub(d.settings, elem(s Settings) {
		~(d.menu(s))
	}))
}

elem (d dashboard) header(city driver.City) {
	~(if !city.IsValid() {
		~(doors.Status(404))
		<title>Not Found</title>
		<h1>City Not Found</h1>
	} else {
		<title>~(city.Name) Weather</title>
		<h1>Weather in ~(city.Name, ", ", city.Country.Name)</h1>
	})
}

elem (d dashboard) menu(s Settings) {
	<a
		class="secondary"
		(doors.ALink{
			Model: Path{
				Home: true,
				Days: s.DaysQuery(),
				Units: s.UnitsQuery(),
			},
		})
		role="button">
		Change
	</a>
	<nav>
		~(d.navDays(s))
		~(d.navUnits(s))
	</nav>
}

elem (d dashboard) navDays(s Settings) {
	<ul>
		~(for i := range 7 {
			~{
				s.Days = i + 1
			}
			<li>
				<a
					class="secondary"
					(doors.ALink{
						Active: doors.Active{
							Indicator: doors.IndicatorOnlyAttr("aria-current", "true"),
						},
						Model: Path{
							Dashboard: true,
							CityID: d.city,
							Days: s.DaysQuery(),
							Units: s.UnitsQuery(),
						},
					})>
					~(s.Days)
					~(if s.Days == 1 {
						 day
					} else {
						 days
					})
				</a>
			</li>
		})
	</ul>
}

elem (d dashboard) navUnits(s Settings) {
	<ul>
		~(for _, unit := range []driver.Units{driver.Metric, driver.Imperial} {
			<li>
				~{
					s.Units = unit
				}
				<a
					class="secondary"
					(doors.ALink{
						Active: doors.Active{
							Indicator: doors.IndicatorOnlyAttr("aria-current", "true"),
						},
						Model: Path{
							Dashboard: true,
							CityID: d.city,
							Days: s.DaysQuery(),
							Units: s.UnitsQuery(),
						},
					})>
					~(unit.String())
				</a>
			</li>
		})
	</ul>
}