| 1 | {{/* estilo-bar: the whole app header, one row at every width. |
| 2 | |
| 3 | Data: chrome.Bar. Parse this package's templates together with |
| 4 | menu.Templates() and the app's own layout. The skip link and <main> |
| 5 | are the layout's; this is only the <header>. |
| 6 | |
| 7 | Order in the end group is fixed in every app: actions, then Menu |
| 8 | (narrow only), then the switcher, then the account. The account is |
| 9 | always the last thing at the inline end. |
| 10 | |
| 11 | The brand is a link to the app root, except on public read-only |
| 12 | pages, where App.Home is empty and it is plain text. */}} |
| 13 | {{define "estilo-bar"}}<header estilo-bar{{if .Sticky}}="sticky"{{end}}> |
| 14 | {{- if .App.Home}} |
| 15 | <a estilo-bar-brand href="{{.App.Home}}"><img estilo-brand-icon src="{{.App.Icon}}" alt="" width="28" height="28"><span estilo-bar-name>{{.App.Name}}</span></a> |
| 16 | {{- else}} |
| 17 | <span estilo-bar-brand><img estilo-brand-icon src="{{.App.Icon}}" alt="" width="28" height="28"><span estilo-bar-name>{{.App.Name}}</span></span> |
| 18 | {{- end}} |
| 19 | {{- with .ContextEdit}} |
| 20 | {{template "estilo-bar-title" .}} |
| 21 | {{- else}}{{with .Context}} |
| 22 | <span estilo-bar-context dir="auto" title="{{.}}">{{.}}</span> |
| 23 | {{- end}}{{end}} |
| 24 | {{- if .Nav}} |
| 25 | <nav estilo-bar-nav aria-label="{{.NavLabel}}"> |
| 26 | {{- range .Nav}}<a href="{{.Href}}"{{if .Current}} aria-current="page"{{end}}>{{.Label}}</a>{{end}} |
| 27 | </nav> |
| 28 | {{- end}} |
| 29 | <div estilo-bar-end> |
| 30 | {{- if .Actions}} |
| 31 | <div estilo-bar-actions>{{template "estilo-bar-actions" .}}</div> |
| 32 | {{- end}} |
| 33 | {{- if or .Nav .Actions}} |
| 34 | <details estilo-bar-more name="estilo-menus"> |
| 35 | <summary estilo-bar-trigger>{{template "estilo-icon-menu"}}<span>{{.Labels.Menu}}</span></summary> |
| 36 | <div estilo-menu="sheet"> |
| 37 | {{- range .Nav}}<a estilo-menu-item href="{{.Href}}"{{if .Current}} aria-current="page"{{end}}><span estilo-menu-label>{{.Label}}</span></a>{{end}} |
| 38 | {{- if and .Nav .Actions}}<hr>{{end}} |
| 39 | {{- range .Actions}}{{template "estilo-menu-item" .Item}}{{end}} |
| 40 | </div> |
| 41 | </details> |
| 42 | {{- end}} |
| 43 | {{- with .Switcher}} |
| 44 | {{template "estilo-switcher" .}} |
| 45 | {{- end}} |
| 46 | {{- if .Account}} |
| 47 | {{template "estilo-account" .Account}} |
| 48 | {{- else}}{{with .SignIn}} |
| 49 | <a rst-btn href="{{.Href}}" estilo-bar-signin>{{.Label}}</a> |
| 50 | {{- end}}{{end}} |
| 51 | </div> |
| 52 | </header>{{end}} |
| 53 | |
| 54 | {{/* estilo-bar-actions: the wide-screen actions, from Bar.Actions, each |
| 55 | the element its Item names: a link, a one-button POST form, or a |
| 56 | button opening a dialog. The same items are rows in the narrow Menu |
| 57 | sheet, so both stay one list. An app may redefine this after parsing |
| 58 | to change how they are drawn, but the sheet always renders |
| 59 | Bar.Actions. */}} |
| 60 | {{define "estilo-bar-actions"}}{{range .Actions}}{{template "estilo-bar-action" .}}{{end}}{{end}} |
| 61 | {{define "estilo-bar-action"}}{{if .Action}}<form method="post" action="{{.Action}}"><button rst-btn{{if .Primary}}="primary"{{end}} type="submit">{{.Label}}</button></form>{{else if .Dialog}}<button rst-btn{{if .Primary}}="primary"{{end}} type="button" commandfor="{{.Dialog}}" command="show-modal">{{.Label}}</button>{{else}}<a rst-btn{{if .Primary}}="primary"{{end}} href="{{.Href}}">{{.Label}}</a>{{end}}{{end}} |
| 62 | |
| 63 | {{/* estilo-bar-title: the open object's title, editable in place. A real |
| 64 | form, so Enter renames with scripts off. The submit button is visually |
| 65 | hidden until the form has focus. Data: chrome.TitleEdit. */}} |
| 66 | {{define "estilo-bar-title"}}<form estilo-bar-title method="post" action="{{.Action}}"> |
| 67 | <input estilo-bar-title-input name="{{.Name}}" value="{{.Value}}" aria-label="{{.Label}}" autocomplete="off" spellcheck="false" dir="auto"> |
| 68 | <button rst-btn="ghost" type="submit" estilo-bar-title-submit>{{.Submit}}</button> |
| 69 | </form>{{end}} |
| 70 | |
amadan