diff options
Diffstat (limited to 'examples/hackernews/src/components/Nav.astro')
-rw-r--r-- | examples/hackernews/src/components/Nav.astro | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/examples/hackernews/src/components/Nav.astro b/examples/hackernews/src/components/Nav.astro new file mode 100644 index 000000000..10bf0f899 --- /dev/null +++ b/examples/hackernews/src/components/Nav.astro @@ -0,0 +1,97 @@ +--- +interface Link { + href: string; + text: string; +} + +const links: Link[] = [ + { href: '/', text: 'HN' }, + { href: '/new', text: 'New' }, + { href: '/show', text: 'Show' }, + { href: '/ask', text: 'Ask' }, + { href: '/job', text: 'Jobs' }, +]; +--- + +<header> + <nav aria-label="Main menu"> + {links.map(({ href, text }) => ( + <a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}> + <strong>{text}</strong> + </a> + ))} + <a class="github" href="http://github.com/withastro/astro" target="_blank" rel="noreferrer"> + Built with Astro + </a> + </nav> +</header> + +<style> + header { + background-color: rgb(107 33 168); + position: fixed; + z-index: 999; + height: 55px; + top: 0; + left: 0; + right: 0; + } + + nav { + max-width: 800px; + box-sizing: border-box; + margin: 0 auto; + padding: 15px 5px; + } + + nav a { + color: rgba(248, 250, 252, 0.8); + line-height: 24px; + transition: color 0.15s ease; + display: inline-block; + vertical-align: middle; + font-weight: 300; + letter-spacing: 0.075em; + margin-right: 1.8em; + } + + nav a:hover { + color: rgb(248 250 252); + } + + nav [aria-current='page'] { + color: rgb(248 250 252); + font-weight: 400; + } + + nav a:last-of-type { + margin-right: 0; + } + + .github { + color: rgb(248 250 252); + font-size: 0.9em; + margin: 0; + float: right; + } + + @media (max-width: 860px) { + nav { + padding: 15px 30px; + } + } + + @media (max-width: 600px) { + nav { + padding: 15px; + } + + a { + margin-right: 1em; + } + + .github { + display: none; + } + } +</style> |