tracker

4.8 KB

1. // app-header.hl — THE HEADER of a WorldAPI app: brand, search, main menu, user menu (docs/layouts/app-header.md).
2. // Phone: [sidebar toggle] brand … [loupe] [user menu]; the main menu lives in the sidebar overlay, the search field opens
3. // under the bar from the loupe. Desktop (60rem+): brand · search in the middle · main menu · user menu; the toggle and the
4. // loupe are gone. The bar's background runs full width, its contents start and end flush with the content column
5. // (--layout-column); in the full-width shells (list-first, three-pane) they span the page.
6. //
7. // AppHeader { brand = "Tracker" search = "/search"
8. // MainMenu { items = menu current = "/series" }
9. // UserMenu { name = "az5b2" a { href = "/settings" "Settings" } a { href = "/logout" "Logout" } }
10. // }
11. //
12. // The toggle opens `#sidebar` (theme/shell/app-sidebar.hl) with the browser's popover: no script, Esc and a tap outside
13. // close it. A page without a sidebar shows no toggle. The search field is the popover `#app-search` on the phone.
14. String brand = 'WorldAPI'
15. String brandHref = '/'
16. String search = '' // the search form's action ('' = no search); it sends GET <search>?<searchName>=…
17. String searchName = 'q'
18. String searchLabel = 'Search'
19. String searchPlaceholder = 'Search…'
20. String menuLabel = 'Menu'
21. Boolean hasSearch = search != ''
23. slot = null
25. Style {
26. 'application-header' { position = 'sticky' top = '0' zIndex = '20' display = 'flex' alignItems = 'center' gap = '.25rem' height = 'var(--layout-header)' paddingInline = 'max(var(--layout-gutter), calc((100% - var(--layout-column)) / 2))' background = 'var(--color-background-sunken)' }
27. 'application-header > a.brand' { flex = '0 1 auto' minWidth = '0' marginRight = 'auto' overflow = 'hidden' fontSize = '1.1rem' fontWeight = '800' color = 'var(--color-text-strong)' textOverflow = 'ellipsis' whiteSpace = 'nowrap' }
28. 'application-header > a.brand:hover' { textDecoration = 'none' color = 'var(--color-accent)' }
29. 'application-header > button' { flex = 'none' width = '2.5rem' height = '2.5rem' minHeight = '0' padding = '0' color = 'var(--color-text)' }
30. 'application-header > button.menu-toggle' { marginLeft = '-.5rem' }
31. 'body:not(:has(#sidebar)) application-header > button.menu-toggle' { display = 'none' }
32. // the phone's search: under the bar, full width, while open
33. 'application-header > form.search:popover-open' { position = 'fixed' inset = 'var(--layout-header) 0 auto 0' display = 'block' width = '100%' height = 'auto' margin = '0' padding = '.5rem var(--layout-gutter) .75rem' color = 'var(--color-text)' background = 'var(--color-background-sunken)' border = '0' }
34. 'application-header > form.search::backdrop' { background = 'transparent' }
35. 'application-header > form.search input' { width = '100%' background = 'var(--color-background)' }
36. // the full-width shells: the header spans the page like they do
37. 'body:has(list-first) application-header,
38. body:has(three-pane) application-header' { paddingInline = 'var(--layout-gutter)' }
39. '@media (min-width: 60rem)' {
40. 'application-header' { gap = '1rem' }
41. 'application-header > button.menu-toggle,
42. application-header > button.search-toggle' { display = 'none' }
43. 'application-header > form.search,
44. application-header > form.search:popover-open' { position = 'static' inset = 'auto' display = 'flex' flex = '1 1 auto' width = 'auto' maxWidth = '28rem' height = 'auto' margin = '0 auto' padding = '0' overflow = 'visible' color = 'inherit' background = 'transparent' border = '0' }
45. 'application-header > form.search input' { padding = '.4rem .8rem' }
46. }
47. }
49. View {
50. applicationHeader {
51. button { type = "button" class = "menu-toggle" popovertarget = "sidebar" title = menuLabel 'aria-label' = menuLabel
52. svg { viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" 'stroke-width' = "2" 'stroke-linecap' = "round" 'aria-hidden' = "true"
53. path { d = "M4 6h16M4 12h16M4 18h16" }
54. }
55. }
56. a { class = "brand" href = brandHref brand }
57. if (hasSearch) {
58. form { id = "app-search" class = "search" role = "search" method = "get" action = search popover = "auto" on toggle(e) { emit headerSearchToggle(e) }
59. input { type = "search" name = searchName placeholder = searchPlaceholder 'aria-label' = searchLabel autocomplete = "off" }
60. }
61. button { type = "button" class = "search-toggle" popovertarget = "app-search" title = searchLabel 'aria-label' = searchLabel
62. svg { viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" 'stroke-width' = "2" 'stroke-linecap' = "round" 'aria-hidden' = "true"
63. circle { cx = "11" cy = "11" r = "6.5" }
64. path { d = "M16 16l4.5 4.5" }
65. }
66. }
67. }
68. slot
69. }
70. }
72. // the phone's search opened: the field takes the focus (the popover has none of its own)
73. on headerSearchToggle(e) {
74. if (e.newState == 'open') { e.target.querySelector('input').focus() }
75. }