summaryrefslogtreecommitdiff
path: root/examples/hackernews/src/components/Nav.astro
diff options
context:
space:
mode:
Diffstat (limited to 'examples/hackernews/src/components/Nav.astro')
-rw-r--r--examples/hackernews/src/components/Nav.astro97
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>