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

core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-item/dot-nav-item.component.html

@@ -1,20 +1,32 @@
 <div class="dot-nav__title">
     <div
-        (click)="clickHandler($event, data)"
         (mouseenter)="setSubMenuPosition()"
         [class.dot-nav__item--active]="data.active"
         class="dot-nav__item"
+        data-testid="nav-item"
         appendTo="target">
-        <dot-nav-icon
-            [icon]="
-                data.tabIcon === labelImportantIcon ? (data.tabName | dotRandomIcon) : data.tabIcon
-            "
-            aria-hidden="true"></dot-nav-icon>
-        <span class="dot-nav__item-label">{{ data.tabName }}</span>
-        <dot-icon
-            class="dot-nav__item-arrow"
-            aria-hidden="true"
-            name="{{ data.isOpen ? 'arrow_drop_down' : 'arrow_drop_up' }}"></dot-icon>
+        <div
+            class="dot-nav__item-main"
+            data-testid="nav-item-main"
+            (click)="clickHandler($event, data)">
+            <dot-nav-icon
+                [icon]="
+                    data.tabIcon === labelImportantIcon
+                        ? (data.tabName | dotRandomIcon)
+                        : data.tabIcon
+                "
+                aria-hidden="true"></dot-nav-icon>
+            <span class="dot-nav__item-label" data-testid="nav-item-label">{{ data.tabName }}</span>
+        </div>
+        <div
+            class="dot-nav__item-toggle"
+            data-testid="nav-item-toggle"
+            (click)="toggleHandler($event, data)">
+            <dot-icon
+                class="dot-nav__item-arrow"
+                aria-hidden="true"
+                name="{{ data.isOpen ? 'arrow_drop_down' : 'arrow_drop_up' }}"></dot-icon>
+        </div>
     </div>
 </div>
 <dot-sub-nav

core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-item/dot-nav-item.component.scss

@@ -69,15 +69,30 @@
 
 .dot-nav__item {
     align-items: center;
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
     min-height: $navigation-item-height;
-    padding: 14px 22px 13px 25px; // top and bottom padding to get min 48px height
     position: relative;
     transition: background-color $basic-speed ease;
     width: $navigation-width;
 }
 
+.dot-nav__item-main {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    padding: $spacing-3 0 $spacing-2 $spacing-4;
+}
+
+.dot-nav__item-toggle {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    padding: $spacing-3 $spacing-4 $spacing-2 0;
+    position: relative;
+}
+
 .dot-nav__item-label {
     flex: 1;
     margin-left: $spacing-3;

core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-item/dot-nav-item.component.spec.ts

@@ -89,7 +89,7 @@ describe('DotNavItemComponent', () => {
         de = deHost.query(By.css('dot-nav-item'));
         component = de.componentInstance;
         fixtureHost.detectChanges();
-        navItem = de.query(By.css('.dot-nav__item'));
+        navItem = de.query(By.css('[data-testid="nav-item"]'));
         subNav = de.query(By.css('dot-sub-nav'));
     });
 
@@ -120,13 +120,77 @@ describe('DotNavItemComponent', () => {
     });
 
     it('should emit menuClick when nav__item is clicked', () => {
+        const mainArea = de.query(By.css('[data-testid="nav-item-main"]'));
         jest.spyOn(component.menuClick, 'emit');
-        navItem.nativeElement.dispatchEvent(new MouseEvent('click', {}));
+        mainArea.nativeElement.click();
         expect(component.menuClick.emit).toHaveBeenCalledTimes(1);
     });
 
+    describe('Toggle functionality', () => {
+        let mainArea: DebugElement;
+        let toggleArea: DebugElement;
+
+        beforeEach(() => {
+            mainArea = de.query(By.css('[data-testid="nav-item-main"]'));
+            toggleArea = de.query(By.css('[data-testid="nav-item-toggle"]'));
+        });
+
+        it('should have two clickable areas (main and toggle)', () => {
+            expect(mainArea).toBeDefined();
+            expect(toggleArea).toBeDefined();
+        });
+
+        it('should emit menuClick when clicking on the main area (first 2/3)', () => {
+            jest.spyOn(component.menuClick, 'emit');
+            mainArea.nativeElement.click();
+            fixtureHost.detectChanges();
+
+            expect(component.menuClick.emit).toHaveBeenCalledTimes(1);
+            expect(component.menuClick.emit).toHaveBeenCalledWith({
+                originalEvent: expect.any(MouseEvent),
+                data: componentHost.menu
+            });
+        });
+
+        it('should emit menuClick with toggleOnly flag when clicking on toggle area (last 1/3)', () => {
+            jest.spyOn(component.menuClick, 'emit');
+            toggleArea.nativeElement.click();
+            fixtureHost.detectChanges();
+
+            expect(component.menuClick.emit).toHaveBeenCalledTimes(1);
+            expect(component.menuClick.emit).toHaveBeenCalledWith({
+                originalEvent: expect.any(MouseEvent),
+                data: componentHost.menu,
+                toggleOnly: true
+            });
+        });
+
+        it('should emit menuClick without toggleOnly flag when clicking on main area', () => {
+            jest.spyOn(component.menuClick, 'emit');
+            mainArea.nativeElement.click();
+            fixtureHost.detectChanges();
+
+            expect(component.menuClick.emit).toHaveBeenCalledWith({
+                originalEvent: expect.any(MouseEvent),
+                data: componentHost.menu
+            });
+            expect(component.menuClick.emit).toHaveBeenCalledWith(
+                expect.not.objectContaining({ toggleOnly: true })
+            );
+        });
+
+        it('should stop propagation when clicking toggle area', () => {
+            const event = new MouseEvent('click', { bubbles: true });
+            jest.spyOn(event, 'stopPropagation');
+
+            toggleArea.nativeElement.dispatchEvent(event);
+
+            expect(event.stopPropagation).toHaveBeenCalled();
+        });
+    });
+
     it('should set label correctly', () => {
-        const label: DebugElement = de.query(By.css('.dot-nav__item-label'));
+        const label: DebugElement = de.query(By.css('[data-testid="nav-item-label"]'));
         expect(label.nativeElement.textContent.trim()).toBe('Name');
     });
 
@@ -149,7 +213,7 @@ describe('DotNavItemComponent', () => {
 
             fixtureHost.detectChanges();
 
-            navItem.triggerEventHandler('mouseenter', {});
+            navItem.nativeElement.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
             fixtureHost.detectChanges();
 
             await fixtureHost.whenStable();
@@ -180,7 +244,7 @@ describe('DotNavItemComponent', () => {
 
             fixtureHost.detectChanges();
 
-            navItem.triggerEventHandler('mouseenter', {});
+            navItem.nativeElement.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
             fixtureHost.detectChanges();
 
             expect(subNav.styles.cssText).toEqual(
@@ -190,7 +254,7 @@ describe('DotNavItemComponent', () => {
 
         it('should reset menu position when mouseleave', () => {
             component.collapsed = true;
-            de.triggerEventHandler('mouseleave', {});
+            de.nativeElement.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
             fixtureHost.detectChanges();
             expect(subNav.styles.cssText).toEqual('height: 0px; overflow: hidden;');
         });

core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-item/dot-nav-item.component.ts

@@ -29,7 +29,8 @@ export class DotNavItemComponent {
     @Input() data: DotMenu;
 
     @Output()
-    menuClick: EventEmitter<{ originalEvent: MouseEvent; data: DotMenu }> = new EventEmitter();
+    menuClick: EventEmitter<{ originalEvent: MouseEvent; data: DotMenu; toggleOnly?: boolean }> =
+        new EventEmitter();
 
     @Output()
     itemClick: EventEmitter<{ originalEvent: MouseEvent; data: DotMenuItem }> = new EventEmitter();
@@ -63,6 +64,23 @@ export class DotNavItemComponent {
         });
     }
 
+    /**
+     * Handle toggle click on the last third of the nav item
+     * Only toggles the menu open/close state without navigation
+     *
+     * @param MouseEvent $event
+     * @param DotMenu data
+     * @memberof DotNavItemComponent
+     */
+    toggleHandler($event: MouseEvent, data: DotMenu): void {
+        $event.stopPropagation();
+        this.menuClick.emit({
+            originalEvent: $event,
+            data: data,
+            toggleOnly: true
+        });
+    }
+
     /**
      * Align the submenu top or bottom depending of the browser window
      *

core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.ts

@@ -78,12 +78,12 @@ export class DotNavigationComponent {
      * @param DotMenu currentItem
      * @memberof DotNavigationComponent
      */
-    onMenuClick(event: { originalEvent: MouseEvent; data: DotMenu }): void {
+    onMenuClick(event: { originalEvent: MouseEvent; data: DotMenu; toggleOnly?: boolean }): void {
         if (this.$isCollapsed()) {
             this.#dotNavigationService.goTo(event.data.menuItems[0].menuLink);
         } else {
             // Check if the menu is not already open to prevent redundant navigation actions.
-            if (!event.data.isOpen) {
+            if (!event.data.isOpen && !event.toggleOnly) {
                 this.#dotNavigationService.goTo(event.data.menuItems[0].menuLink);
             }