wip: add icons to navbar links

This commit is contained in:
2026-01-11 02:32:27 +00:00
parent 4ff9b012ad
commit 1eab53b7ba
10 changed files with 83 additions and 81 deletions

View File

@@ -11,9 +11,9 @@ interface Props {
const { version } = Astro.props;
const navItems = [
{ id: "about", label: "About" },
{ id: "spec", label: "Spec" },
{ id: "faq", label: "FAQ" },
{ id: "about", label: "About", icon: "heroicons:information-circle" },
{ id: "spec", label: "Spec", icon: "heroicons:document-text" },
{ id: "faq", label: "FAQ", icon: "heroicons:question-mark-circle" },
];
---
@@ -52,14 +52,15 @@ const navItems = [
navItems.map((item) => (
<a
href={`#${item.id}`}
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
rounded-lg transition-colors cursor-pointer
class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
font-medium rounded-lg transition-colors cursor-pointer
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
data-nav-link
data-section-id={item.id}
>
<Icon name={item.icon} class="w-4 h-4" />
{item.label}
</a>
))
@@ -112,11 +113,12 @@ const navItems = [
navItems.map((item) => (
<a
href={`#${item.id}`}
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600"
class="nav-link flex items-center justify-center gap-1.5 py-2
text-gray-600 dark:text-neutral-400 hover:text-sky-600"
data-nav-link
data-section-id={item.id}
>
<Icon name={item.icon} class="w-4 h-4" />
{item.label}
</a>
))