Menu item as a clickable link (#3249)

* chore: enabling click on menu item again * chore: added the changeset * Update .changeset/big-mayflies-bake.md Co-authored-by: Carlos Cortizas <[email protected]> --------- Co-authored-by: Carlos Cortizas <[email protected]>
commercetools · Oct 5, 2023 · 9d8b6fc · 9d8b6fc · github-actions · Oct 5, 2023
1 parent 689cc6e
commit 9d8b6fc
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 37 deletions.
diff --git a/.changeset/big-mayflies-bake.md b/.changeset/big-mayflies-bake.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-shell': patch
+---
+
+First level navigation menu items are clickable again even it they have submenu items.
diff --git a/packages/application-shell/src/components/navbar/navbar-new/menu-items.tsx b/packages/application-shell/src/components/navbar/navbar-new/menu-items.tsx
@@ -292,15 +292,7 @@ const MenuItem = (props: MenuItemProps) => {
       onMouseLeave={props.onMouseLeave}
       data-menuitem={props.identifier}
     >
-      <div
-        className={
-          props.hasSubmenu
-            ? styles['item-link']
-            : styles['item-link-no-submenu']
-        }
-      >
-        {props.children}
-      </div>
+      <div className={styles['item-link']}>{props.children}</div>
     </li>
   );
 };

diff --git a/packages/application-shell/src/components/navbar/navbar-new/navbar.mod.css b/packages/application-shell/src/components/navbar/navbar-new/navbar.mod.css
@@ -83,17 +83,11 @@
 .item-link {
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   color: var(--color-for-navbar-link);
-  padding: var(--spacing-25);
   width: var(--item-size);
   position: relative;
   display: block;
 }
 
-.item-link-no-submenu {
-  width: 100%;
-  height: 100%;
-}
-
 :global(.body__menu-open) .item-link {
   width: 100%;
 }
@@ -425,8 +419,7 @@
 
 .item-link:hover .sublist-collapsed__active,
 .item-link:hover .sublist-collapsed__active__above,
-.item-link:hover .sublist-expanded__active,
-.item-link-no-submenu:hover .sublist-collapsed__active {
+.item-link:hover .sublist-expanded__active {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -442,9 +435,7 @@
 }
 
 .item-link:hover .sublist-collapsed__active.sublist-collapsed__empty,
-.item-link:hover .sublist-collapsed__active__above.sublist-collapsed__empty,
-.item-link-no-submenu:hover
-  .sublist-collapsed__active.sublist-collapsed__empty {
+.item-link:hover .sublist-collapsed__active__above.sublist-collapsed__empty {
   visibility: hidden;
 }
 

diff --git a/packages/application-shell/src/components/navbar/navbar-new/navbar.tsx b/packages/application-shell/src/components/navbar/navbar-new/navbar.tsx
@@ -207,30 +207,19 @@ export const ApplicationMenu = (props: ApplicationMenuProps) => {
         onMouseLeave={props.shouldCloseMenuFly}
         identifier={menuItemIdentifier}
       >
-        {/* menu-item should be a link only if it doesn't contain a submenu */}
-        {!hasSubmenu ? (
-          <MenuItemLink
-            linkTo={`/${props.projectKey}/${props.menu.uriPath}`}
-            useFullRedirectsForLinks={props.useFullRedirectsForLinks}
-            onClick={props.onMenuItemClick}
-          >
-            <ItemContainer
-              labelAllLocales={props.menu.labelAllLocales}
-              defaultLabel={props.menu.defaultLabel}
-              applicationLocale={props.applicationLocale}
-              icon={props.menu.icon}
-              isMenuOpen={props.isMenuOpen}
-            />
-          </MenuItemLink>
-        ) : (
+        <MenuItemLink
+          linkTo={`/${props.projectKey}/${props.menu.uriPath}`}
+          useFullRedirectsForLinks={props.useFullRedirectsForLinks}
+          onClick={props.onMenuItemClick}
+        >
           <ItemContainer
             labelAllLocales={props.menu.labelAllLocales}
             defaultLabel={props.menu.defaultLabel}
             applicationLocale={props.applicationLocale}
             icon={props.menu.icon}
             isMenuOpen={props.isMenuOpen}
           />
-        )}
+        </MenuItemLink>
         <MenuGroup
           id={props.menu.key}
           level={2}