add subtitle/badge to menu icon when not expanded

[Mariusthvdb]

using this in card_mod

      .menu ha-icon-button {
        color: {{'var(--alert-color)' if alerts else 'var(--ok-color)'}} !important;
      }

      :host(:not([expanded])) .menu ha-icon-button:after {
        content: {%- set m_alerts = states('sensor.marquee_alerts')|int(0) %} {{m_alerts if m_alerts > 0 }};
        {{style_badge_not_expanded}}
        display: block;
        color: ivory;
        background: var(--alert-color);
        bottom: 20px;
      }

gave me the number on the icon when not expanded.

the latest custom-sidebar release offers no way to set a notification on the menu icon in the config?

please consider adding an option to the non expanded sidebar menu icon

[elchininet]

How does that work when the native notification is shown? Do you hide the native one or is it automatically replaced?

[elchininet]

I have checked, it is an extra element.

This is too specific, it should work only when the sidebar is not expanded and it should hide a native Home Assistant functionality (show a dot when there is a notification) to show something else in its place. I need to think about it to see if it can be achieved with a generic option.

[Mariusthvdb]

Uhm, what native notification is that? I’ve never seen anything there?

that is to say, in the companion app, there is no collapsed menu at all, (so also no notifications there), and, in Desktop, there is no badge on the notification tray in collapsed mode:

with that badge set in card_mod I get

non collapsed (expanded)

collapsed (not:expanded)

I guess the fact there is no badge in the official notification tray is a Frontend bug.

[Mariusthvdb]

Wait, is this what you mean?

tbh I’ve never checked that as it only is a dot and holds no info.

also, I don’t have that on desktop, only in Companion

edit

I can force it to show when minimizing the window width:

so the means my mod does not interfere with that Dot ;-)

btw I had accent-color set to primary color, so in that single spot made me overlook that easily.
I've set it to my alert-color now, and that makes it visible:

unfortunately it make the notification badge too prominent for my taste (reason I had set it to primary-color) ...

seems ok if you think about it as an alerter, but for me that is too distracting, having a badge there itself was enough for me

so, I figured, why not use your new theme variables and set those generically with:

    custom-sidebar-notification-color: var(--primary-color)
    custom-sidebar-notification-text-color: ivory

this way the notification always blends in, and, if must be, I can override them

[elchininet]

Uhm, what native notification is that? I’ve never seen anything there?

Because you never set the sidebar in that mode, that appears when the sidebar is in always_hidden mode. It happens when you enable Always hide the sidebar in your profile and it is the default mode in mobile devices. (you can also enable this mode if you set sidebar_mode as hidden with custom-sidebar)

Wait, is this what you mean?

Yes

also, I don’t have that on desktop, only in Companion
I can force it to show when minimizing the window width:

In desktop it appears if you enable the mode that I mentioned before.

so, I figured, why not use your new theme variables and set those generically with:

custom-sidebar-notification-color: var(--primary-color)
custom-sidebar-notification-text-color: ivory

You can use the plugin options, but those are not the options, the options are notification_color and notification_text_color.

[Mariusthvdb]

Ive set those in my theme, not in the plugin.

But as I demonstrated, my card-mod theme mod for the notification on the menu icon does not interfere with the Dot, which was what you asked