switch to Astro

src/components/Nav.astro

@@ -0,0 +1,65 @@
+---
+import ThemeToggleButton from './ThemeToggleButton.svelte';
+const { current = '' } = Astro.props;
+---
+
+<style>
+  nav {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    font-family: var(--font-family-sans);
+    font-weight: 700;
+    justify-content: flex-end;
+    text-transform: uppercase;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    padding: 10px 5px;
+    display: block;
+    position: relative;
+    margin-left: 20px;
+    min-width: 70px;
+    text-align: center;
+  }
+
+  a:not(.selected) {
+    opacity: 0.7;
+  }
+
+  a::before {
+    content: '';
+    position: absolute;
+    transition: transform .3s ease;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--text-secondary);
+    transform: scaleX(0);
+  }
+
+  a:hover::before,
+  .selected::before {
+    transform: scaleX(1);
+  }
+
+  .selected::before {
+    background: var(--primary-color);
+  }
+
+  .theme-toggle-container {
+    width: 75px;
+  }
+</style>
+
+<nav>
+  <a class={current === "" ? "selected" : ""} href='/'>home</a>
+  <a class={current === "about" ? "selected" : ""} href='/about'>about</a>
+  <a class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
+  <div class="theme-toggle-container">
+    <ThemeToggleButton client:load />
+  </div>
+</nav>