Nav drawer items ripple size doesn't match

[damyanpetev]

Description

Describe the issue.

• igniteui-angular version: 18.0.x +
• browser: N/A

Steps to reproduce

1. Open https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer#pinned-persistent-setup
   OR https://stackblitz.com/edit/bbmjrs
2. Click on an item to select it (multiple times if needed)
3. Observe the size of the ripple against the selection background

Result

The ripple is larger than the selection background, which I'm not sure is intended:

Expected result

Similar setup with 17.2 still in the App Builder looks like this:

[desig9stein]

@simeonoff @damyanpetev The problem arises because the background is implemented with an :after pseudo-element to match the design specified in the UI kit. However, this results in the background being smaller than the drawer item, which is the ripple target. Possible solutions include adding an extra wrapper or a ghost element (something that behaves like the :after pseudo-element) inside the nav drawer item to make it targetable by the ripple directive. Let me know your thoughts or if you have a better idea.

[damyanpetev]

@desig9stein @simeonoff I see, because the content box is much smaller than the visible background. Don't suppose the difference can be split between padding and margin to achieve the same thing and guessing there's a reason it's padding only.

Extra items might still have the same issues as the background, no? Almost better if we convert this into a component for some internal structure like we do in Web Components; at the cost of handling extra use cases with links, etc and making it a bit less simple.
But perhaps we're not there yet - I do have suggestions actually :)

Can we have a custom override for the item with ripple active, like .igx-nav-drawer__item[--active].igx-ripple?
If so, was initially going to suggest overflow-clip-margin: content-box .5rem; but that doesn't account for the rounded edges and only works right on Chromium-s. However, clip-path seems to be widely supported with inset() and seems to work great:

Works on Chromium & FF on my end.