fix(component-library): fix main nav tabs selectable state

Author: cprussin

packages/component-library/src/MainNavTabs/index.module.scss

@@ -34,28 +34,18 @@
     &[data-selected] {
       color: theme.color("button", "solid", "foreground");
       pointer-events: none;
+    }
+  }
 
-      &[data-selectable] {
-        pointer-events: auto;
-
-        &[data-hovered] .bubble {
-          background-color: theme.color(
-            "button",
-            "solid",
-            "background",
-            "hover"
-          );
-        }
-
-        &[data-pressed] .bubble {
-          background-color: theme.color(
-            "button",
-            "solid",
-            "background",
-            "active"
-          );
-        }
-      }
+  &[data-selectable] .tab[data-selected] {
+    pointer-events: auto;
+
+    &[data-hovered] .bubble {
+      background-color: theme.color("button", "solid", "background", "hover");
+    }
+
+    &[data-pressed] .bubble {
+      background-color: theme.color("button", "solid", "background", "active");
     }
   }
 }

packages/component-library/src/MainNavTabs/index.tsx

@@ -21,6 +21,9 @@ export const MainNavTabs = ({ className, pathname, ...props }: Props) => {
       aria-label="Main Navigation"
       className={clsx(styles.mainNavTabs, className)}
       dependencies={[pathname]}
+      data-selectable={
+        props.items.every((tab) => tab.href !== pathname) ? "" : undefined
+      }
       {...props}
     >
       {({ className: tabClassName, children, ...tab }) => (
@@ -29,7 +32,6 @@ export const MainNavTabs = ({ className, pathname, ...props }: Props) => {
           data-size="sm"
           data-variant="ghost"
           data-rounded
-          data-selectable={pathname === tab.href ? undefined : ""}
           {...tab}
         >
           {(args) => (