diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 992af41..d5a6c29 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -428,23 +428,3 @@ export const LoadingSpinner: VoidComponent<{ ); }; - -export const LinkSimple: VoidComponent<{ - class?: string; -}> = props => { - return ( - - Link - - - ); -}; diff --git a/src/components/navigation/sidebars/nav/Link.astro b/src/components/navigation/sidebars/nav/Link.astro index b439df8..451aca0 100644 --- a/src/components/navigation/sidebars/nav/Link.astro +++ b/src/components/navigation/sidebars/nav/Link.astro @@ -1,10 +1,22 @@ --- +import { Icon } from "astro-icon/components"; + interface Props { title: string; link: string; current?: boolean; + showIcon?: boolean; } -const { title, link, current } = Astro.props; +const { title, link, current, showIcon } = Astro.props; --- -{title} + + { showIcon ? ( +
+ + {title} +
+ ) : ( + title + )} +
diff --git a/src/components/navigation/sidebars/nav/RootNav.astro b/src/components/navigation/sidebars/nav/RootNav.astro index f70dd15..f0d03a4 100644 --- a/src/components/navigation/sidebars/nav/RootNav.astro +++ b/src/components/navigation/sidebars/nav/RootNav.astro @@ -10,6 +10,7 @@ const { currentRoute, currentModule, currentClass } = Astro.props; import { getTypeData } from "@config/io/generateTypeData"; import { groupRoutes } from "@config/io/helpers"; import Tree from "./Tree.astro"; +import Link from "./Link.astro"; const routes = await getTypeData(); const groupedRoutes = groupRoutes(routes); @@ -48,4 +49,14 @@ const types = { diff --git a/src/icons/link.svg b/src/icons/link.svg new file mode 100644 index 0000000..ccb6930 --- /dev/null +++ b/src/icons/link.svg @@ -0,0 +1,2 @@ + + diff --git a/src/styles/docs/nav/nav-tree.css b/src/styles/docs/nav/nav-tree.css index 7c81ff3..67a35b4 100644 --- a/src/styles/docs/nav/nav-tree.css +++ b/src/styles/docs/nav/nav-tree.css @@ -4,6 +4,15 @@ .nav-link { text-decoration: none !important; + + & div { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.3em; + + & svg { color: hsl(var(--text)) } + } } .nav-item {