+
{
title && (
@@ -21,3 +26,22 @@ const { section, title } = Astro.props;
}
+
+
diff --git a/src/components/sidebar-item.svelte b/src/components/sidebar-item.svelte
new file mode 100644
index 0000000..80a556e
--- /dev/null
+++ b/src/components/sidebar-item.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/src/components/sidebar-item.tsx b/src/components/sidebar-item.tsx
deleted file mode 100644
index e3ba5ca..0000000
--- a/src/components/sidebar-item.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useLocation } from 'react-use';
-
-import type { Section } from '@/types/data';
-import type { IconName } from '@/types/icon';
-
-import Icon from './icon';
-import Tooltip from './tooltip';
-
-export interface SidebarItemProps {
- section: Section;
- icon: IconName;
- title?: string;
-}
-
-export const MAIN_SECTION: Section = 'main';
-
-const classes = /* tw */ {
- main: 'inline-flex h-10 w-10 items-center justify-center rounded-lg transition',
- active: 'bg-primary-600 text-white',
- inactive: 'bg-white text-gray-400 hover:bg-primary-600 hover:text-white dark:bg-gray-800 dark:text-gray-200',
-};
-
-const SidebarItem = ({ section, icon, title = '' }: SidebarItemProps) => {
- const { hash } = useLocation();
- const href = `#${section}`;
-
- const active = hash === '' ? section === MAIN_SECTION : hash === href;
-
- return (
-
-
-
-
-
- );
-};
-
-export default SidebarItem;
diff --git a/src/components/sidebar.astro b/src/components/sidebar.astro
index 73c8ee6..1ec9ceb 100644
--- a/src/components/sidebar.astro
+++ b/src/components/sidebar.astro
@@ -1,10 +1,32 @@
---
+import type { Data } from '@/data';
+import isSectionKey from '@/utils/is-section-key';
+
+import SidebarItem from './sidebar-item.svelte';
+
export interface Props {
className?: string;
+ data: Data;
}
-const { className } = Astro.props;
+
+const { className, data } = Astro.props;
+
+const sections = Object.keys(data).flatMap((key) => {
+ if (!isSectionKey(key)) return [];
+
+ const section = data[key];
+
+ if (!section) return [];
+
+ return [{ title: section.config.title, icon: section.config.icon, section: key }];
+});
---
-