Sidebar Link does not show image from classname

[shipswake]

I have a class that displays a coming soon image to a doc in the sidebar:

{
    type: 'doc',
    id: 'explorers',
    label: 'Explorer',
    className: 'coming-soon'
 },

.coming-soon > div > a::after {
  content: url(../../static/img/coming-soon.svg);
  border-top: solid 5px transparent;
  padding-left: 0.3rem;
}

When I apply this class name to a link I do not see the image

[{
    type: 'category',
    label: 'Order Management',
    link: { type: 'doc', id: 'order-management-intro' },
    className: 'coming-soon',
    collapsed: false,
    items: []
 }]

Is there a way to accomplish this?

[shipswake]

I see in the docs there is an image prop on the link sidebar item type but it does not seem to be on the link

[slorber]

maybe related to CSS nesting bug: #9303

[slorber]

It's not really a fix in v3.6, but I think turning on faster / LightningCSS might fix the issue as a side effect.

The bug remains here when not using Lightning CSS, so it's still a bug we have to solve for those can can't turn these new options on.

[shipswake]

I'll try turning on Lightening CSS

[shipswake]

Using 3.6 with experimental_faster: true and I still do not see the className displayed

[slorber]

So, maybe I was wrong, or your code is wrong

[shipswake]

The issue seems to be the hierarchy between the type: doc and the type: category
category contains a div I was not accounting for

[shipswake]

with the above code I am able to get the image to show correctly

When I expand the category the image rotates because of this css

.menu__list-item--collapsed .menu__caret:before {
    transform: rotateZ(90deg);
}

there seems to be a conflict with the a::after and caret::before css

.coming-soon > div > a::after {
  content: url(../../static/img/coming-soon.svg);
  border-top: solid 5px transparent;
  padding-left: 0.3rem;
}

Is there a way to stop the image from rotating when the caret rotates?

[slorber]

For more advanced customizations, it may be better to swizzle and alter the HTML structure rather than trying to piggy pack on our existing HTML structure with complex CSS selectors.

I don't know exactly what you should do, but keep in mind those things are implementation details, and we might change the underlying HTML markup or CSS at any time.

[shipswake]

Trying to swizzle DockSidebarItem\Category but it does not seem to pick it up?
Is this the right object to swizzle?