astro first commit

src/components/Nav.astro

@@ -0,0 +1,127 @@
+---
+const { pathname } = Astro.url
+
+const routes = [
+  { name: 'About', href: '/about' },
+  { name: 'Projects', href: '/projects' },
+  { name: 'Blog', href: '/blog' },
+  { name: 'Contact', href: '/contact' },
+]
+---
+
+<nav>
+  <a href="/">
+    <h1 class:list={{ active: pathname === '/' }}>NB</h1>
+  </a>
+  <ul>
+    <!-- <li>
+      <a href="/search">
+        <Icon icon="search-outline" />
+      </a>
+    </li> -->
+    {
+      routes.map(({ href, name }) => (
+        <li>
+          <a {href}>
+            <span>{name}</span>
+            <div class:list={{ active: pathname.startsWith(href) }} />
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</nav>
+
+<style>
+  nav {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  /* OLD */
+  nav :global(*) {
+    box-sizing: initial;
+  }
+
+  nav {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    width: 3em;
+    height: 100%;
+    background-color: var(--clr-primary);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    border-right: 0.1em solid var(--clr-secondary);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: 100%;
+    overflow: auto;
+  }
+
+  a {
+    writing-mode: vertical-rl;
+    padding: 1em;
+    text-decoration: none;
+  }
+
+  li a {
+    line-height: 1em;
+    width: 1em;
+    position: relative;
+  }
+
+  li a span {
+    z-index: 5;
+    position: relative;
+  }
+
+  li a div {
+    z-index: 4;
+    width: 0.125em;
+    height: 100%;
+    top: 0;
+    left: 1.12em;
+    position: absolute;
+    transition: all 500ms ease;
+  }
+  li a div.active {
+    background-color: var(--clr-secondary);
+  }
+  li:hover a div:not(.active) {
+    background-color: var(--clr-light);
+  }
+
+  h1 {
+    margin: 0;
+    writing-mode: horizontal-tb;
+    letter-spacing: -0.15em;
+    width: 1.15em;
+    font-size: 1.5em;
+  }
+
+  h1.active {
+    box-shadow: 0 0.1em var(--clr-secondary);
+  }
+
+  @media (max-width: 30em) {
+    nav {
+      width: 2.5em;
+    }
+
+    a {
+      padding: 0.5em;
+    }
+
+    li a div {
+      transform: translateX(-0.5em);
+    }
+  }
+</style>