feat: add wrapperClass

adrian-ub · Oct 7, 2024 · f2dcd31 · f2dcd31
1 parent ad150bd
commit f2dcd31
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -12,7 +12,7 @@ const { navBar } = Astro.props
   <div class="right print:op0">
     {
       navBar.map((item) => (
-        <a href={item.href} title={item.label} {...item.attrs}>
+        <a href={item.href} title={item.label} class={item.wrapperClass} {...item.attrs}>
           {!item.hideLabel && <span class={item.labelClass}>{item.label}</span>}
           {item.icon && <div class:list={[item.icon, item.iconClass]} />}
         </a>

diff --git 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
@@ -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,
   })
 }