tracker

3.0 KB

1. // app-sidebar.hl — THE SIDEBAR: on the phone an overlay that slides in from the left (the header's toggle opens it), from
2. // 60rem a column of the shell (content-first, three-pane) (docs/layouts/app-sidebar.md). ONE per page: it is `#sidebar`.
3. //
4. // ContentFirst {
5. // Sidebar { MainMenu { items = menu current = "/series" } nav { a { href = "/series/new" "New series" } } }
6. // main { … }
7. // }
8. //
9. // `desktop = "false"`: a sidebar for the phone only (it holds just the main menu, which the header shows on desktop).
10. // The overlay is the browser's popover: Esc, a tap outside, the × and a tap on one of its links close it.
11. String desktop = 'true'
12. String closeLabel = 'Close'
13. String cls = desktop == 'false' ? 'mobile-only' : ''
15. slot = null
17. Style {
18. // the phone: hidden (the popover's own default) until the toggle opens it
19. 'app-sidebar:popover-open' { position = 'fixed' inset = '0 auto 0 0' display = 'block' width = 'min(20rem, 86vw)' height = '100dvh' maxHeight = 'none' margin = '0' padding = '.5rem 1rem 2rem' overflowY = 'auto' color = 'var(--color-text)' background = 'var(--color-background-sunken)' border = '0' }
20. 'app-sidebar::backdrop' { background = 'var(--color-background-sunken)' opacity = '.7' }
21. 'app-sidebar > button.sidebar-close' { display = 'flex' width = '2.5rem' height = '2.5rem' minHeight = '0' marginLeft = 'auto' padding = '0' fontSize = '1.6rem' fontWeight = '400' lineHeight = '1' color = 'var(--color-text-muted)' }
22. 'app-sidebar h2' { margin = '1rem 0 .35rem' padding = '0 .75rem' fontSize = '.8rem' fontWeight = '700' letterSpacing = '.04em' textTransform = 'uppercase' color = 'var(--color-text-muted)' }
23. 'app-sidebar nav a' { display = 'block' padding = '.45rem .75rem' color = 'var(--color-text)' borderRadius = 'var(--radius-small)' }
24. 'app-sidebar nav a:hover' { textDecoration = 'none' color = 'var(--color-text-strong)' background = 'var(--color-surface)' }
25. 'app-sidebar nav a.current,
26. app-sidebar nav a[aria-current="page"]' { color = 'var(--color-accent)' background = 'var(--color-surface)' }
27. // from 60rem: a column of the shell, always shown (the shell places it)
28. '@media (min-width: 60rem)' {
29. 'app-sidebar,
30. app-sidebar:popover-open' { position = 'static' inset = 'auto' display = 'block' width = 'auto' height = 'auto' margin = '0' padding = '0' overflow = 'visible' color = 'inherit' background = 'transparent' border = '0' }
31. 'app-sidebar > button.sidebar-close' { display = 'none' }
32. 'app-sidebar.mobile-only,
33. app-sidebar.mobile-only:popover-open' { display = 'none' }
34. }
35. }
37. View {
38. appSidebar { id = "sidebar" class = cls popover = "auto" on click(e) { emit sidebarClick(e) }
39. button { type = "button" class = "sidebar-close" popovertarget = "sidebar" popovertargetaction = "hide" title = closeLabel 'aria-label' = closeLabel "×" }
40. slot
41. }
42. }
44. // a tap on a link inside the open overlay closes it (a page change in place would leave it open)
45. on sidebarClick(e) {
46. if (e.target.closest('a') != null && e.currentTarget.matches(':popover-open')) { e.currentTarget.hidePopover() }
47. }