tracker

2.0 KB

1. // main-menu.hl — THE MAIN MENU: the app's top-level links, `Series | Shows | Movies` (docs/layouts/main-menu.md).
2. // Write it twice from ONE list: in the header (shown from 60rem) and in the sidebar (shown on the phone, where the
3. // header has no room). The link whose href is `current` (or a page below it) is marked: class `current` and
4. // aria-current="page".
5. //
6. // static menu = [ { label = 'Series' href = '/series' } { label = 'Movies' href = '/movies' } ]
7. // AppHeader { MainMenu { items = menu current = "/series" } }
8. // Sidebar { desktop = "false" MainMenu { items = menu current = "/series" } }
9. Hybrid items = []
10. String current = ''
11. String label = 'Main menu'
12. Hybrid rows = build(items, current)
14. // one row per link: the current one (the page itself or a page below it) is marked
15. build(list, at) {
16. out = []
17. for (it of list) {
18. let here = at == it.href || (it.href != '/' && at.startsWith(it.href + '/'))
19. out.push({ label = it.label href = it.href cls = here ? 'current' : '' aria = here ? 'page' : 'false' })
20. }
21. return out
22. }
24. Style {
25. 'main-menu' { display = 'block' }
26. 'main-menu a' { display = 'block' padding = '.55rem .75rem' fontWeight = '600' color = 'var(--color-text)' borderRadius = 'var(--radius-small)' }
27. 'main-menu a:hover' { textDecoration = 'none' color = 'var(--color-text-strong)' background = 'var(--color-surface)' }
28. 'main-menu a.current' { color = 'var(--color-accent)' }
29. // in the header: only from 60rem, the links in a row
30. 'application-header main-menu' { display = 'none' }
31. // in the sidebar: only on the phone, the links stacked
32. 'app-sidebar main-menu' { marginBottom = '1rem' }
33. '@media (min-width: 60rem)' {
34. 'application-header main-menu' { display = 'block' marginLeft = 'auto' }
35. 'application-header main-menu nav' { display = 'flex' gap = '.15rem' }
36. 'application-header main-menu a' { padding = '.45rem .7rem' }
37. 'app-sidebar main-menu' { display = 'none' }
38. }
39. }
41. View {
42. mainMenu {
43. nav { 'aria-label' = label
44. for (r of rows) { a { href = r.href class = r.cls 'aria-current' = r.aria r.label } }
45. }
46. }
47. }