Merge branch 'master' of https://github.com/primefaces/primeng

Author: mertsincan

apps/showcase/assets/data/menu.json

@@ -38,16 +38,19 @@
             ]
         },
         {
-            "name": "LLMs.txt",
-            "icon": "pi pi-file",
-            "routerLink": "/llms",
-            "badge": "NEW"
-        },
-        {
-            "name": "MCP Server",
-            "icon": "pi pi-server",
-            "routerLink": "/mcp",
-            "badge": "NEW"
+            "name": "AI Tools",
+            "icon": "pi pi-sparkles",
+            "badge": "NEW",
+            "children": [
+                {
+                    "name": "LLMs.txt",
+                    "routerLink": "/llms"
+                },
+                {
+                    "name": "MCP Server",
+                    "routerLink": "/mcp"
+                }
+            ]
         },
         {
             "name": "Components",

apps/showcase/assets/styles/layout/_sidebar.scss

@@ -29,11 +29,11 @@
         margin: 0;
         padding: 0;
 
-        > li {
+        >li {
             margin-bottom: .25rem;
 
-            > button,
-            > a {
+            >button,
+            >a {
                 display: flex;
                 width: 100%;
                 align-items: center;
@@ -73,9 +73,20 @@
                     }
                 }
 
+                .menu-toggle {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    margin-inline-start: auto;
+
+                    .p-tag {
+                        position: static;
+                        transform: none;
+                    }
+                }
+
                 .menu-toggle-icon {
                     color: var(--text-secondary-color);
-                    margin-inline-start: auto;
                 }
 
                 &:hover {
@@ -95,15 +106,15 @@
                 &.router-link-active {
                     color: var(--primary-text-color);
 
-                    > .menu-icon {
+                    >.menu-icon {
                         i {
                             color: var(--primary-text-color);
                         }
                     }
                 }
             }
 
-            > div {
+            >div {
                 overflow: hidden;
 
                 ol {
@@ -161,8 +172,9 @@
             top: 50%;
             transform: translateY(-50%);
 
-            .p-tag-value {
+            .p-tag-label {
                 line-height: 1;
+                font-size: 0.75rem;
             }
         }
 

apps/showcase/components/layout/menu/app.menuitem.component.ts

@@ -13,7 +13,10 @@ import { MenuItem } from './app.menu.component';
                 <i [ngClass]="item.icon"></i>
             </div>
             <span>{{ item.name }}</span>
-            <i class="menu-toggle-icon pi pi-angle-down"></i>
+            <span class="menu-toggle">
+                <p-tag *ngIf="item.badge" [value]="item.badge" />
+                <i class="menu-toggle-icon pi pi-angle-down"></i>
+            </span>
         </button>
         <a *ngIf="item.href" [href]="item.href" target="_blank" rel="noopener noreferrer">
             <div *ngIf="item.icon && root" class="menu-icon">