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, }) }