The menu in the p-menubar copied from the official website show abnormally? The first menu item in the menu list is shifted to the right. How can this issue be resolved?

Describe the bug

The menu in the p-menubar copied from the official website show abnormally.The first menu item in the menu list is shifted to the right. How can this issue be resolved?

Environment

angular: ^18.2.0 node.js: v20.11.1 chrome、edge

"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primeng": "^17.18.11",
"quill": "^2.0.2",

Reproducer

No response

Angular version

^18.2.0

PrimeNG version

^17.18.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.11.1

Browser(s)

chrome edge

Steps to reproduce the behavior

1.app.component.html

<p-menubar [model]="menubarItems">
  <ng-template pTemplate="start">
    <i class="pi pi-apple px-2"></i>
  </ng-template>
  <ng-template pTemplate="end">
    <i class="pi pi-video px-2"></i>
    <i class="pi pi-wifi px-2"></i>
    <i class="pi pi-volume-up px-2"></i>
    <span>Fri 13:07</span>
    <i class="pi pi-search px-2"></i>
    <i class="pi pi-bars px-2"></i>
  </ng-template>
</p-menubar>
<div class="dock-window dock-advanced">
  <p-dock [model]="dockItems" position="bottom">
    <ng-template pTemplate="item" let-item>
      <img [src]="item.icon" [alt]="item.label" width="100%" />
    </ng-template>
  </p-dock>

  <p-toast position="top-center" key="tc" />

  <p-dialog
    [(visible)]="displayFinder"
    [breakpoints]="{ '960px': '50vw' }"
    [style]="{ width: '30vw', height: '18rem' }"
    [draggable]="false"
    [resizable]="false">
    <p-tree [value]="nodes" />
  </p-dialog>

  <p-dialog
    [maximizable]="true"
    [(visible)]="displayTerminal"
    [breakpoints]="{ '960px': '50vw' }"
    [style]="{ width: '30vw' }"
    [draggable]="false"
    [resizable]="false">
    <p-terminal
      welcomeMessage="Welcome to PrimeNG (cmd: 'date', 'greet {0}', 'random')"
      prompt="primeng $" />
  </p-dialog>

  <p-galleria
    [showThumbnails]="false"
    [showThumbnailNavigators]="false"
    [showItemNavigators]="true"
    [(visible)]="displayGalleria"
    [responsiveOptions]="responsiveOptions"
    [containerStyle]="{ 'max-width': '850px' }"
    [circular]="true"
    [fullScreen]="true"
  >
    <ng-template pTemplate="item" let-item>
      <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
    </ng-template>
  </p-galleria>
</div>

app.component.scss


:host ::ng-deep {
.dock-window {
width: 100%;
height: 600px;
position: relative;
background-image: url('https://primefaces.org/cdn/primeng/images/dock/window.jpg');
background-repeat: no-repeat;
background-size: cover;
}

.p-dock {
z-index: 1000;
}

.dock-advanced {
.p-dialog-mask,
.p-toast {
  position: absolute;
}

.p-dialog {
  .p-dialog-header {
    padding: .2rem;
  }

  .p-dialog-content {
    padding: 0;
  }

  p {
    margin-top: 0;
  }

  .p-terminal {
    background-color: #212121;
    color: #ffffff;
    border: 0 none;
    min-height: 18rem;
    height: 100%;

    .p-terminal-command {
      color: #80CBC4;
    }

    .p-terminal-prompt {
      color: #FFD54F;
    }

    .p-terminal-response {
      color: #9FA8DA;
    }
  }

  .p-tree {
    height: 100%;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
  }
}

.p-toast {
  top: 20px;
}
}

.p-menubar {
padding-top: 0;
padding-bottom: 0;
border-radius: 0;

.p-menuitem:first-child {
  font-weight: bold;
  padding: 0 1rem;
}

.p-menuitem-link {
  padding: 0.5rem .75rem;
}

.p-menubar-root-list > .p-menuitem > .p-menuitem-link {
  padding: 0.5rem .75rem;

  > .p-submenu-icon {
    display: none;
  }
}

.p-menubar-end {
  span, i {
    padding: 0 .75rem;
  }
}
}
}

.dark-tooltip { .p-tooltip { .p-tooltip-arrow { border-top-color: var(--surface-900); }

.p-tooltip-text {
  background-color: var(--surface-900);
}

} }

3. app.component.ts
```typescript
import { Component, OnDestroy, OnInit } from '@angular/core';
import { MenuItem, MessageService } from 'primeng/api';
import { TerminalService } from 'primeng/terminal';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  providers: [MessageService, TerminalService]
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'test';

  displayTerminal: boolean = false;

  displayFinder: boolean = false;

  displayGalleria: boolean = false;

  dockItems: MenuItem[] | undefined;

  menubarItems: any[] | undefined;

  responsiveOptions: any[] | undefined;

  images: any[] = [];

  nodes: any[] | undefined;

  subscription: Subscription | undefined;

  constructor(private messageService: MessageService, private terminalService: TerminalService) {}

  ngOnInit() {
    this.dockItems = [
      {
        label: 'Finder',
        tooltipOptions: {
          tooltipLabel: 'Finder',
          tooltipPosition: 'top',
          positionTop: -15,
          positionLeft: 15,
          showDelay: 1000
        },
        icon: 'https://primefaces.org/cdn/primeng/images/dock/finder.svg',
        command: () => {
          this.displayFinder = true;
        }
      },
      {
        label: 'Terminal',
        tooltipOptions: {
          tooltipLabel: 'Terminal',
          tooltipPosition: 'top',
          positionTop: -15,
          positionLeft: 15,
          showDelay: 1000
        },
        icon: 'https://primefaces.org/cdn/primeng/images/dock/terminal.svg',
        command: () => {
          this.displayTerminal = true;
        }
      },
      {
        label: 'App Store',
        tooltipOptions: {
          tooltipLabel: 'App Store',
          tooltipPosition: 'top',
          positionTop: -15,
          positionLeft: 15,
          showDelay: 1000
        },
        icon: 'https://primefaces.org/cdn/primeng/images/dock/appstore.svg',
        command: () => {
          this.messageService.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', key: 'tc' });
        }
      },
      {
        label: 'Safari',
        tooltipOptions: {
          tooltipLabel: 'Safari',
          tooltipPosition: 'top',
          positionTop: -15,
          positionLeft: 15,
          showDelay: 1000
        },
        icon: 'https://primefaces.org/cdn/primeng/images/dock/safari.svg',
        command: () => {
          this.messageService.add({ severity: 'warn', summary: 'Safari has stopped working', key: 'tc' });
        }
      },
      {
        label: 'Photos',
        tooltipOptions: {
          tooltipLabel: 'Photos',
          tooltipPosition: 'top',
          positionTop: -15,
          positionLeft: 15,
          showDelay: 1000
        },
        icon: 'https://primefaces.org/cdn/primeng/images/dock/photos.svg',
        command: () => {
          this.displayGalleria = true;
        }
      },
      {
        label: 'GitHub',
        tooltipOptions: {
          tooltipLabel: 'GitHub',
          tooltipPosition: 'top',
          positionTop: -15,
          positionLeft: 15,
          showDelay: 1000
        },
        icon: 'https://primefaces.org/cdn/primeng/images/dock/github.svg'
      },
      {
        label: 'Trash',
        tooltipOptions: {
          tooltipLabel: 'Trash',
          tooltipPosition: 'top',
          positionTop: -15,
          positionLeft: 15,
          showDelay: 1000
        },
        icon: 'https://primefaces.org/cdn/primeng/images/dock/trash.png',
        command: () => {
          this.messageService.add({ severity: 'info', summary: 'Empty Trash', key: 'tc' });
        }
      }
    ];

    this.menubarItems = [
      {
        label: 'Finder',
        styleClass: 'menubar-root'
      },
      {
        label: 'File',
        items: [
          {
            label: 'New',
            icon: 'pi pi-fw pi-plus',
            items: [
              {
                label: 'Bookmark',
                icon: 'pi pi-fw pi-bookmark'
              },
              {
                label: 'Video',
                icon: 'pi pi-fw pi-video'
              }
            ]
          },
          {
            label: 'Delete',
            icon: 'pi pi-fw pi-trash'
          },
          {
            separator: true
          },
          {
            label: 'Export',
            icon: 'pi pi-fw pi-external-link'
          }
        ]
      },
      {
        label: 'Edit',
        items: [
          {
            label: 'Left',
            icon: 'pi pi-fw pi-align-left'
          },
          {
            label: 'Right',
            icon: 'pi pi-fw pi-align-right'
          },
          {
            label: 'Center',
            icon: 'pi pi-fw pi-align-center'
          },
          {
            label: 'Justify',
            icon: 'pi pi-fw pi-align-justify'
          }
        ]
      },
      {
        label: 'Users',
        items: [
          {
            label: 'New',
            icon: 'pi pi-fw pi-user-plus'
          },
          {
            label: 'Delete',
            icon: 'pi pi-fw pi-user-minus'
          },
          {
            label: 'Search',
            icon: 'pi pi-fw pi-users',
            items: [
              {
                label: 'Filter',
                icon: 'pi pi-fw pi-filter',
                items: [
                  {
                    label: 'Print',
                    icon: 'pi pi-fw pi-print'
                  }
                ]
              },
              {
                icon: 'pi pi-fw pi-bars',
                label: 'List'
              }
            ]
          }
        ]
      },
      {
        label: 'Events',
        items: [
          {
            label: 'Edit',
            icon: 'pi pi-fw pi-pencil',
            items: [
              {
                label: 'Save',
                icon: 'pi pi-fw pi-calendar-plus'
              },
              {
                label: 'Delete',
                icon: 'pi pi-fw pi-calendar-minus'
              }
            ]
          },
          {
            label: 'Archieve',
            icon: 'pi pi-fw pi-calendar-times',
            items: [
              {
                label: 'Remove',
                icon: 'pi pi-fw pi-calendar-minus'
              }
            ]
          }
        ]
      },
      {
        label: 'Quit'
      }
    ];

    this.responsiveOptions = [
      {
        breakpoint: '1024px',
        numVisible: 3
      },
      {
        breakpoint: '768px',
        numVisible: 2
      },
      {
        breakpoint: '560px',
        numVisible: 1
      }
    ];

    this.subscription = this.terminalService.commandHandler.subscribe((command) => this.commandHandler(command));

  }

  commandHandler(text: any) {
    let response;
    let argsIndex = text.indexOf(' ');
    let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;

    switch (command) {
      case 'date':
        response = 'Today is ' + new Date().toDateString();
        break;

      case 'greet':
        response = 'Hola ' + text.substring(argsIndex + 1) + '!';
        break;

      case 'random':
        response = Math.floor(Math.random() * 100);
        break;

      default:
        response = 'Unknown command: ' + command;
        break;
    }

    if (response) {
      this.terminalService.sendResponse(response as string);
    }
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

4.angular.json

"styles": [
              "src/styles.scss",
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],

5.styles.scss

@import "primeicons/primeicons.css";

Expected behavior