diff --git a/playground/astro.config.mjs b/playground/astro.config.mjs
index 3e0a746..2d4fa3b 100644
--- a/playground/astro.config.mjs
+++ b/playground/astro.config.mjs
@@ -53,7 +53,7 @@ export default defineConfig({
}, {
label: 'Talks',
slug: 'talks',
- labelClass: 'lt-md:hidden',
+ wrapperClass: 'lt-md:hidden',
}, {
label: 'Sponsors',
slug: 'sponsors-list',
@@ -65,7 +65,7 @@ export default defineConfig({
slug: 'podcasts',
icon: 'i-ri-mic-line',
hideLabel: true,
- labelClass: 'lt-md:hidden',
+ wrapperClass: 'lt-md:hidden',
},
// {
// label: 'Demos',
@@ -84,7 +84,7 @@ export default defineConfig({
link: 'https://twitter.com/adrianub',
hideLabel: true,
icon: 'i-ri-twitter-x-fill',
- iconClass: 'lt-md:hidden',
+ wrapperClass: 'lt-md:hidden',
attrs: {
target: '_blank',
rel: 'noopener',
@@ -94,7 +94,7 @@ export default defineConfig({
link: 'https://github.com/adrian-ub/astro-vitesse',
hideLabel: true,
icon: 'i-uil-github-alt',
- iconClass: 'lt-md:hidden',
+ wrapperClass: 'lt-md:hidden',
attrs: {
target: '_blank',
rel: 'noopener',
@@ -104,7 +104,7 @@ export default defineConfig({
link: '/feed.xml',
hideLabel: true,
icon: 'i-la-rss-square',
- iconClass: 'lt-md:hidden',
+ wrapperClass: 'lt-md:hidden',
attrs: {
target: '_blank',
rel: 'noopener',
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 8a6af84..e798ffd 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -12,7 +12,7 @@ const { navBar } = Astro.props
{
navBar.map((item) => (
-
+
{!item.hideLabel && {item.label}}
{item.icon && }
diff --git a/src/schemas/navbar.ts b/src/schemas/navbar.ts
index d49a0ac..9d3f256 100644
--- a/src/schemas/navbar.ts
+++ b/src/schemas/navbar.ts
@@ -11,6 +11,7 @@ const NavBarBaseSchema = z.object({
hideLabel: z.boolean().default(false),
labelClass: z.string().optional().default(''),
iconClass: z.string().optional().default(''),
+ wrapperClass: z.string().optional().default(''),
})
// HTML attributes that can be added to an anchor element, validated as
diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
index ff27662..c8e142c 100644
--- a/src/utils/navigation.ts
+++ b/src/utils/navigation.ts
@@ -24,6 +24,7 @@ export interface Link {
hideLabel: boolean
labelClass: string
iconClass: string
+ wrapperClass: string
}
export type NavBarEntry = Link
@@ -52,12 +53,13 @@ function makeLink({
icon?: string
labelClass: string
iconClass: string
+ wrapperClass: string
}): Link {
return { ...opts, isCurrent, hideLabel, attrs }
}
/** Process sidebar link options to create a link entry. */
-function makeNavBarLink({ currentPathname, href, label, attrs, hideLabel, icon, iconClass, labelClass }: {
+function makeNavBarLink({ currentPathname, href, label, attrs, hideLabel, icon, iconClass, labelClass, wrapperClass }: {
href: string
label: string
currentPathname: string
@@ -66,12 +68,13 @@ function makeNavBarLink({ currentPathname, href, label, attrs, hideLabel, icon,
icon?: string
labelClass: string
iconClass: string
+ wrapperClass: string
}): Link {
if (!isAbsolute(href)) {
href = formatPath(href)
}
const isCurrent = pathsMatch(encodeURI(href), currentPathname)
- return makeLink({ label, href, isCurrent, attrs, hideLabel, icon, iconClass, labelClass })
+ return makeLink({ label, href, isCurrent, attrs, hideLabel, icon, iconClass, labelClass, wrapperClass })
}
/** Create a link entry from a manual link item in user config. */
@@ -98,6 +101,7 @@ function linkFromNavBarLinkItem(
icon: item.icon,
labelClass: item.labelClass,
iconClass: item.iconClass,
+ wrapperClass: item.wrapperClass,
},
)
}
@@ -139,6 +143,7 @@ function linkFromInternalNavBarLinkItem(
icon: item.icon,
labelClass: item.labelClass,
iconClass: item.iconClass,
+ wrapperClass: item.wrapperClass,
})
}