Update styles

derekmbrown · Feb 2, 2025 · 29e1bb5 · 29e1bb5
1 parent 120bb63
commit 29e1bb5
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 46 deletions.
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -1,29 +1,14 @@
 ---
-import Navbar from './ui/Navbar'
-import NavAstro from './Navbar.astro'
-
-const { PageName } = Astro.props
+import Emoji from 'astro-emoji'
 ---
 
-<Navbar client:load>
-  <NavAstro slot="navbar"/>
-</Navbar>
-
-<script define:vars={{ PageName }} is:inline>
-
-  switch (PageName) {
-    case 'Home':
-    case 'Note':
-    case 'Notes':
-      document.getElementById('notes').classList.add('active')
-      break;
-    case 'Tag':
-    case 'Tags':
-      document.getElementById('tags').classList.add('active')
-      break;
-    case 'About':
-      document.getElementById('about').classList.add('active')
-      break;
-  }
-
-</script>
+<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/Navbar.astro b/src/components/Navbar.astro
@@ -1,14 +1,29 @@
 ---
-import Emoji from 'astro-emoji'
+import Nav from './ui/Nav'
+import NavAstro from './Nav.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>
+<Nav>
+  <NavAstro slot="nav"/>
+</Nav>
+
+<script define:vars={{ PageName }} is:inline>
+
+  switch (PageName) {
+    case 'Home':
+    case 'Note':
+    case 'Notes':
+      document.getElementById('notes').classList.add('active')
+      break;
+    case 'Tag':
+    case 'Tags':
+      document.getElementById('tags').classList.add('active')
+      break;
+    case 'About':
+      document.getElementById('about').classList.add('active')
+      break;
+  }
+
+</script>
diff --git a/src/components/ui/Nav.jsx b/src/components/ui/Nav.jsx
@@ -0,0 +1,7 @@
+export default function Nav(props) {
+  return (
+    <div>
+      {props.nav}
+    </div>
+  )
+}
diff --git a/src/components/ui/Navbar.jsx b/src/components/ui/Navbar.jsx
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
@@ -1,6 +1,6 @@
 ---
 import Head from './Head.astro'
-import Nav from '../components/Nav.astro'
+import Navbar from '../components/Navbar.astro'
 import Footer from '../components/Footer.astro'
 
 const { PageName, TabTitle, MetaTitle, MetaDescription, MetaTag, MetaUrl } = Astro.props
@@ -10,7 +10,7 @@ const { PageName, TabTitle, MetaTitle, MetaDescription, MetaTag, MetaUrl } = Ast
   <Head {TabTitle} {MetaTitle} {MetaDescription} {MetaTag} {MetaUrl} />
   <body>
     <div class="flex flex-col container mx-auto max-w-2xl h-screen px-7">
-      <Nav {PageName} />
+      <Navbar {PageName} />
       <div class="flex-grow">
         <slot />
       </div>