Documentation
¶
Overview ¶
Package appbar is the tracker's application bar, built the way an app builds any piece of chrome the framework does not ship:
- the markup is plain html elements and framework parts composed here (html.Header as the banner landmark, the brand link, the caller's search field, actions, and the sidebar's drawer trigger);
- the look is appbar.style.css, an owned style; Style.Scope stamps the owner on the root, and `gofastr gen styles` writes the class methods in appbar_style.gen.go;
- every dimension is a theme token: the bar is --size-header-height tall (the token ui.ContentRow's viewport mode subtracts), and the one value only this bar needs, the desktop search field's width, is its own token in appbar.tokens.css, generated as Tokens for the app to Extend its theme with;
- the behaviour is the framework's: the sidebar's own stylesheet hides the drawer trigger at widths where the inline column shows, and the search field folds away below the md breakpoint.
The bar is the app band above the content row: full-bleed (its border too), not the page measure a marketing site's header sits on.
Index ¶
Constants ¶
This section is empty.
Variables ¶
View Source
var Style = appbarStyle{ownstyle.Must("appbar", ownstyle.KindScoped, appbarCSS)}
Style is the appbar owned style, registered at init. This package holds exactly one style file, so the handle is exported as Style; a package holding several exports each as <Owner>Style.
View Source
var Tokens = appbarTokens{ Sizes: appbarSizes{ AppbarSearch: style.Size{Name: "appbar-search", Value: "26rem"}, AppbarSearchMin: style.Size{Name: "appbar-search-min", Value: "20rem"}, }, }
Tokens is appbar.tokens.css as typed theme tokens. Add them to the theme with Extend, which also takes the file's dark values:
site.WithTheme(theme.Default().Extend(appbar.Tokens))
Functions ¶
Types ¶
type Config ¶
type Config struct {
// Name is the brand wordmark; Href is where it links (usually "/").
Name, Href string
// Search is the desktop search field (ui.SearchInput). It hides
// below the md breakpoint; the sidebar drawer is the phone's way
// around the app.
Search render.HTML
// Actions stay in the bar at every viewport width (the bell, the
// theme toggle).
Actions render.HTML
// MobileTrigger is the phone navigation trigger
// (ui.SidebarDrawerTrigger). The sidebar's own stylesheet hides it
// at widths where the inline column shows, so the bar renders it
// unconditionally.
MobileTrigger render.HTML
}
Config is what the tracker's shell passes in.
Source Files
Click to show internal directories.
Click to hide internal directories.