fix(navbar): prevent menu-items from growing when hovered (#3640)

* fix(navbar): prevent menu-items from growing when hovered
commercetools · Nov 20, 2024 · 6e0d117 · 6e0d117
1 parent f8e1162
commit 6e0d117
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/.changeset/sweet-lemons-relate.md b/.changeset/sweet-lemons-relate.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-shell': patch
+---
+
+Submenu-items inside Navbar submenus won't change their dimension on hover anymore
diff --git a/packages/application-shell/src/components/navbar/menu-items.styles.ts b/packages/application-shell/src/components/navbar/menu-items.styles.ts
@@ -98,6 +98,16 @@ const TextLinkSublistWrapper = styled.div`
 const NavlinkClickableContent = styled.div`
   height: 100%;
   width: 100%;
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all 150ms ease-out;
+
+  position: relative;
+  left: calc(-1 * ${uiKitDesignTokens.spacing20});
 `;
 
 const listStyles = css`
@@ -179,11 +189,11 @@ const SublistItem = styled.li<{ isActive: boolean }>`
   display: flex;
   align-items: center;
   align-self: stretch;
+  border-radius: ${uiKitDesignTokens.borderRadius4};
 
   ${(props) => [
     props.isActive &&
       css`
-        border-radius: ${uiKitDesignTokens.borderRadius4};
         background: ${uiKitDesignTokens.colorPrimary40};
       `,
     !props.isActive &&
@@ -196,12 +206,9 @@ const SublistItem = styled.li<{ isActive: boolean }>`
           background: ${uiKitDesignTokens.colorPrimary95};
 
           [data-link-level='text-link-sublist'] {
-            /* additional left padding on hover and focus */
-            padding: ${uiKitDesignTokens.spacing25}
-              ${uiKitDesignTokens.spacing25} ${uiKitDesignTokens.spacing25}
-              calc(
-                ${uiKitDesignTokens.spacing30} + ${uiKitDesignTokens.spacing20}
-              );
+            > ${NavlinkClickableContent} {
+              left: 0;
+            }
           }
         }
       `,

diff --git a/packages/application-shell/src/constants.ts b/packages/application-shell/src/constants.ts
@@ -12,7 +12,7 @@ export const NAVBAR = {
   sublistIndentationWhenCollapsed: '72px',
   sublistIndentationWhenExpanded: '248px',
   sublistItemMinHeight: '50px',
-  sublistWidth: '253px',
+  sublistWidth: '272px',
   leftNavigationTransition: 'all 150ms cubic-bezier(1, 0, 0.58, 1)',
   widthLeftNavigation: '80px',
   widthLeftNavigationWhenExpanded: '256px',