remove Menu pointer-event completely

[Mariusthvdb]

with sidebar_editable: false we can now prevent the HA menu edit section to open.

However, it still shows the circle at the pointer hold spot.

Ive found that setting:

  card-mod-sidebar-yaml: |

    .: |

      .menu {
        pointer-events: none;
      }

in my card-mod-themes completely removes any interaction, so the menu actually does not respond at all to which ever click/hover the user might undertake

in my config, I find that to be reassuring, and an extra step to keeping people out of the settings.

maybe you like it too

[elchininet]

Hi @Mariusthvdb,

That was my first try, but if you do that you are not able to close/open the sidebar using the hamburger menu because the .menu element wraps both, the title and the menu button.

Regards

[Mariusthvdb]

yes, you are right, I had not noticed that before. And though I have card_mods for

      .menu .title {
        color: {{states('sensor.presence_color')}};
      }

      .menu .title:after {
        content: "{%- set alerts = states('sensor.marquee_alerts')|int(0) %}
                  {%- set phrase = 'Alert: ' if alerts == 1 else 'Alerts:' -%}
                  {{'\A ' ~ phrase ~ alerts if alerts > 0 }}";
        white-space: pre;
        font-size: 12px;
        font-weight: bold;
        display: block;
        line-height: 4px;
        color: var(--alert-color);
        animation: marquee 4s alternate infinite;
      }
      @keyframes marquee {
        from {transform: translateX(0%);}
        to {transform: translateX(35%);}
      }

adding the pointer-events:none to those has no effect at all.

And yet, I cant believe we can not make the pointer Not show the circle and still be able to select the hamburger menu. Maybe with some' not' selector, like:

                  .text-content:not(.info) {
                    color: var(--primary-color);
                  }

or

                :host div:not(.name) {
                  display: none;
                }

I mean, its not a real big deal, but showing the circle and not have other action is a bit counterintuitive.

I guess something like:

      .menu:not(.mdc-icon-button) {
        pointer-events: none;
      }

but need the correct path there. this doesnt work either. hmm
Let me check the card-mod-them thread again....

btw, we can still use this button:

type: custom:button-card
icon: mdi:menu
tap_action:
  action: call-service
  service: |-
    [[[
      this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
      return none;
      ]]]

while the pointer-events is set to none.....so, given the fact we can hide the hamburger menu nicely with Kiosk-mode, I changed to

      .menu {
        {{'pointer-events: none' if is_state('input_boolean.hide_menubutton','on')}};
      }

in the card-mod-theme, and have an even clearer interface. Combined with that custom button I can then toggle the menu in and out.
Need to rethink this for usefulness, but, nice to have the options

[elchininet]

Hi @Mariusthvdb,
Try with the last version of the library. I need to get reports about how it works in different browsers, but I did my best trying to hide it.
Regards

[Mariusthvdb]

works fine, see other discussion I commented

[elchininet]

Glad to know that it is working on your side 👍