diff options
Diffstat (limited to 'examples/snowpack/src/components/Subnav.astro')
| -rw-r--r-- | examples/snowpack/src/components/Subnav.astro | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/examples/snowpack/src/components/Subnav.astro b/examples/snowpack/src/components/Subnav.astro new file mode 100644 index 000000000..69560cae1 --- /dev/null +++ b/examples/snowpack/src/components/Subnav.astro @@ -0,0 +1,76 @@ +--- +export let title: string; +export let inputPath: string; +export let headers: string; +--- + +<style lang="scss"> +@use "../../public/css/var" as *; + +.header { + margin-top: 0; + margin-bottom: 8px; + color: rgba($white, 0.6); + font-weight: 600; + font-size: 20px; + font-family: $heading; + line-height: 1.2em; + + @media (min-width: $breakpoint-m) { + color: $dark-grey; + } +} + +.subnav { + position: static; + z-index: 1; + padding-top: 2rem; + + .header { + color: $dark-grey; + } + + hr { + display: block; + height: 1px; + margin: 1rem 0; + background-color: $light-grey; + border: none; + appearance: none; + } + + ol { + margin: 0; + padding: 0; + list-style: none; + } + + li { + line-height: 1.8; + } + + a { + color: $grey; + } +} +</style> + +<script type="module" defer src="/js/index.js"></script> +<aside class="subnav"> + {headers.length > 0 && ( + <div> + <h4 class="header">On this page</h4> + <nav class="toc"> + <ol> + {headers.map((heading) => { + return <li><a href={"#" + heading.slug}>{heading.text}</a></li> + })} + </ol> + </nav> + <hr /> + </div> + )} + + <h4 class="header">Suggest a change</h4> + <a href="https://github.com/snowpackjs/snowpack/blob/main/www/{inputPath}">Edit this page on GitHub</a> +</aside> |