Update styles

derekmbrown · Feb 2, 2025 · 120bb63 · 120bb63
1 parent 4c66ab3
commit 120bb63
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -1,19 +1,13 @@
 ---
-import Emoji from 'astro-emoji'
+import Navbar from './ui/Navbar'
+import NavAstro from './Navbar.astro'
 
 const { PageName } = Astro.props
 ---
 
-<nav class="flex flex-col mt-12 mb-10 text-[#F2F5F7]">
-  <div class="flex font-['Merriweather'] text-4xl font-black mb-3">
-    <a href="/">Derek Brown <Emoji symbol="👨🏻‍💻" label="person" /></a>
-  </div>
-  <div class="font-['Merriweather'] text-xl flex items-center gap-4">
-    <span class="navItem" id="notes"><a href="/">Notes</a></span>
-    <span class="navItem" id="tags"><a href="/tags">Tags</a></span>
-    <span class="navItem" id="about"><a href="/about">About</a></span>
-  </div>
-</nav>
+<Navbar client:load>
+  <NavAstro slot="navbar"/>
+</Navbar>
 
 <script define:vars={{ PageName }} is:inline>
 

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -0,0 +1,14 @@
+---
+import Emoji from 'astro-emoji'
+---
+
+<nav class="flex flex-col mt-12 mb-10 text-[#F2F5F7]">
+  <div class="flex font-['Merriweather'] text-4xl font-black mb-3">
+    <a href="/">Derek Brown <Emoji symbol="👨🏻‍💻" label="person" /></a>
+  </div>
+  <div class="font-['Merriweather'] text-xl flex items-center gap-4">
+    <span class="navItem" id="notes"><a href="/">Notes</a></span>
+    <span class="navItem" id="tags"><a href="/tags">Tags</a></span>
+    <span class="navItem" id="about"><a href="/about">About</a></span>
+  </div>
+</nav>
diff --git a/src/components/ui/Navbar.jsx b/src/components/ui/Navbar.jsx
@@ -0,0 +1,7 @@
+export default function Navbar(props) {
+  return (
+    <div>
+      {props.navbar}
+    </div>
+  )
+}