style: fix right side spacing

contentful · Apr 29, 2024 · bf171e5 · bf171e5
1 parent f5de74d
commit bf171e5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/packages/components/navbar/src/NavbarItem/NavbarItem.styles.ts b/packages/components/navbar/src/NavbarItem/NavbarItem.styles.ts
@@ -75,10 +75,10 @@ export const getNavbarItemStyles = () => ({
     },
     getGlowOnFocusStyles(`inset ${tokens.glowPrimary}`),
   ),
-  isActive: getNavbarItemActiveStyles(),
-  dropdownIcon: css({
-    paddingLeft: tokens.spacing2Xs,
+  navbarItemMenuTrigger: css({
+    paddingRight: tokens.spacingXs,
   }),
+  isActive: getNavbarItemActiveStyles(),
 });
 
 export const getNavbarItemSkeletonStyles = () => ({

diff --git a/packages/components/navbar/src/NavbarItem/NavbarItem.tsx b/packages/components/navbar/src/NavbarItem/NavbarItem.tsx
@@ -55,23 +55,26 @@ function _NavbarItem(
     ...otherProps
   } = props;
   const styles = getNavbarItemStyles();
-
+  const isMenuTrigger = isNavbarItemHasMenu(props);
   const item = (
     <Comp
       {...otherProps}
       ref={ref}
       data-test-id={testId}
-      className={cx(styles.navbarItem, isActive && styles.isActive, className)}
+      className={cx(
+        styles.navbarItem,
+        isMenuTrigger && styles.navbarItemMenuTrigger,
+        isActive && styles.isActive,
+        className,
+      )}
     >
-      {icon ? <NavbarItemIcon icon={icon} variant="secondary" /> : null}
+      {icon && <NavbarItemIcon icon={icon} variant="secondary" />}
       <span>{title}</span>
-      {isNavbarItemHasMenu(props) && (
-        <ArrowDownIcon className={styles.dropdownIcon} />
-      )}
+      {isMenuTrigger && <ArrowDownIcon />}
     </Comp>
   );
 
-  if (isNavbarItemHasMenu(props)) {
+  if (isMenuTrigger) {
     return (
       <NavbarMenu
         trigger={item}