feat(DotNavItem): Change navigation item to only open/close in the last third

[adrianjm-dotCMS]

Description

This PR introduces an enhanced click behavior for nav-items to provide more control over group expansion and navigation.

The dot-nav-item component has been refactored to be split into two distinct clickable areas:

• Main Area (first 2/3): Retains the default behavior. Clicking here will expand the group and navigate to the first item (or perform its default action).
• Toggle Area (last 1/3): This new, smaller area is dedicated only to expanding or collapsing the group. It does not trigger navigation.

Changes Made

• dot-nav-item.component.html

  • Updated the template to include the new two-div structure (for the main and toggle areas), identified by data-testid attributes.

• dot-nav-item.component.scss

  • Added new styles to support the 2/3 and 1/3 layout and the new interactive zones.

• dot-nav-item.component.ts

  • Created a new toggleHandler method to manage clicks on the new toggle area.
  • The existing menuClick emitter is reused. When the toggle area is clicked, it now emits menuClick with an optional toggleOnly: true flag.
  • Clicks on the main area emit menuClick without the toggleOnly flag, preserving the original functionality.
  • stopPropagation() is called on toggle clicks to prevent the event from bubbling up.

Tests

• dot-nav-item.component.spec.ts
  • Added new tests to verify that both the main and toggle areas are rendered correctly.
  • Confirms that menuClick emits with toggleOnly: true when the toggle area is clicked.
  • Confirms that menuClick emits without the toggleOnly flag when the main area is clicked.
  • Ensures that event.stopPropagation() is correctly called on toggle area clicks.

Demo

Please see the video below demonstrating the new split-click behavior.

PR23381.mp4

This PR fixes #32017

[zJaaal]

Make use of the spacing variables that you can find here

https://github.com/dotCMS/core/blob/b76b504351f45e51bba3e51f24255fdcf61a9834/core-web/libs/dotcms-scss/shared/_spacing.scss

[adrianjm-dotCMS]

Okay, now I'm using the spacing variables, but I'm using the closest values since they are not exact. It's just a 1px or 2px difference, but I'm not sure if we are going to have an issue with the design.

[zJaaal]

Same here, use the ones that are more close to the value