I'm currently working on an angular project with primeng for the UI components. My focus at the moment is on customizing the p-menu component, specifically the appearance of list items that are not active. The challenge I'm facing is that the active class only applies to the link and not the list item itself, making it tricky to style inactive items since :has is not supported.
I've experimented with two different approaches to styling. One method involves applying a normal styling to all list items and then overriding it for items with an active anchor. The other method flips this by initially styling everything as active and excluding those without an active anchor.
In an attempt to troubleshoot, I added margin to see what was effective:
.p-menu .p-menuitem:not(.p-menuitem .p-menuitem-link-active) {
margin-left: 30px;
}
.p-menu .p-menuitem:has(.p-menuitem-link-active) {
margin-left: 60px;
}
Unfortunately, neither of these methods yielded the desired results. Any creative ideas for how I can achieve the styling I am aiming for?
Thank you in advance!
Update 1:
This is the rendered html snippet:
<p-menu _ngcontent-igv-c109="" class="ng-tns-c106-2 ng-star-inserted" ng-reflect-model="[object Object]">
<div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c106-2 ng-animate-disabled p-menu p-component ng-star-inserted" ng-reflect-ng-class="[object Object]">
<ul class="p-menu-list p-reset ng-tns-c106-2">
<li class="p-submenu-header ng-tns-c106-2 ng-star-inserted" ng-reflect-ng-class="[object Object]">
<span class="ng-tns-c106-2 ng-star-inserted">Categories</span>
</li>
<li class="ng-tns-c106-2 p-menuitem ng-star-inserted" ng-reflect-item="[object Object]" ng-reflect-ng-class="[object Object]">
<a role="menuitem" pripple="" class="p-menuitem-link p-ripple ng-star-inserted" ng-reflect-router-link="/manage/buildings" ng-reflect-router-link-active="p-menuitem-link-active" ng-reflect-router-link-active-options="[object Object]" ng-reflect-ng-class="[object Object]" tabindex="0" href="/manage/buildings">
<span class="p-menuitem-text ng-star-inserted">
Buildings
</span>
</a>
</li>
<li class="ng-tns-c106-2 p-menuitem ng-star-inserted" ng-reflect-item="[object Object]" ng-reflect-ng-class="[object Object]">
<a role="menuitem" pripple="" class="p-menuitem-link p-ripple ng-star-inserted" ng-reflect-router-link="/manage/rooms" ng-reflect-router-link-active="p-menuitem-link-active" ng-reflect-router-link-active-options="[object Object]" ng-reflect-ng-class="[object Object" tabindex="0" href="/manage/rooms">
<span class="p-menuitem-text ng-star-inserted">Rooms</span
</a>
</li>
<li class="ng-tns-c106-2 p-menuitem ng-star-inserted" ng-reflect-item="[object Object]" ng-reflect-ng-class="[object Object]">
<a role="menuitem" pripple="" class="p-menuitem-link p-ripple ng-star-inserted p-menuitem-link-active" ng-reflect-router-link="/manage/devices" ng-reflect-router-link-active="p-menuitem-link-active" ng-reflect-router-link-active-options="[object Object]" ng-reflect-ng-class="[object Object]" tabindex="0" href="/manage/devices">
<span class="p-menuitem-text ng-star-inserted">
Devices
</span>
</a>
</li>
</ul>
</div>
</p-menu>
The goal is to style the li elements similar to the image linked below (actual colors may vary): I intend to position regular li items towards the right with margin-left while keeping active items towards the left with little to no margin adjustment.