Don't render hidden menu buttons rather than relying on CSS.

src/components/menu.ts

@@ -1,11 +1,5 @@
 import { HomeAssistant, handleAction, hasAction } from 'custom-card-helpers';
-import {
-  CSSResultGroup,
-  LitElement,
-  TemplateResult,
-  html,
-  unsafeCSS,
-} from 'lit';
+import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -16,6 +10,7 @@ import './submenu.js';
 
 import type {
   Actions,
+  ActionType,
   ExtendedHomeAssistant,
   MenuButton,
   MenuConfig,
@@ -41,6 +36,8 @@ export class FrigateCardMenu extends LitElement {
   public hass?: HomeAssistant & ExtendedHomeAssistant;
 
   set menuConfig(menuConfig: MenuConfig) {
+    this.expanded = !menuConfig?.mode.startsWith('hidden-');
+
     this._menuConfig = menuConfig;
     if (menuConfig) {
       this.style.setProperty('--frigate-card-menu-button-size', menuConfig.button_size);
@@ -49,12 +46,19 @@ export class FrigateCardMenu extends LitElement {
   @state()
   protected _menuConfig?: MenuConfig;
 
-  @property({ attribute: false })
-  protected expand = false;
+  @state()
+  protected expanded = false;
 
   @property({ attribute: false })
   public buttons: MenuButton[] = [];
 
+  protected _isFrigateCardAction(action: ActionType): boolean {
+    // Determine if this action is a Frigate card action, if so handle it
+    // internally.
+    const frigateCardAction = convertActionToFrigateCardCustomAction(action);
+    return !!frigateCardAction && frigateCardAction.frigate_card_action == 'frigate';
+  }
+
   /**
    * Handle an action on a menu button.
    * @param ev The action event.
@@ -86,22 +90,19 @@ export class FrigateCardMenu extends LitElement {
       return;
     }
 
-    // Determine if this action is a Frigate card action, if so handle it
-    // internally.
-    const frigateCardAction = convertActionToFrigateCardCustomAction(action);
     if (
-      frigateCardAction &&
-      frigateCardAction.frigate_card_action == 'frigate' &&
+      action &&
+      this._isFrigateCardAction(action) &&
       this._menuConfig?.mode.startsWith('hidden-')
     ) {
       // If the user presses the frigate button and it's a hide-away menu,
       // then expand the menu and return.
-      this.expand = !this.expand;
+      this.expanded = !this.expanded;
       return;
     }
 
     // Collapse menu after the user clicks on something.
-    this.expand = false;
+    this.expanded = false;
     handleAction(this, this.hass as HomeAssistant, config, interaction);
   }
 
@@ -113,10 +114,10 @@ export class FrigateCardMenu extends LitElement {
   protected _renderButton(button: MenuButton): TemplateResult | void {
     if (button.type == 'custom:frigate-card-menu-submenu') {
       let corner: Corner | undefined;
-      if (this._menuConfig?.mode.endsWith("-left")) {
+      if (this._menuConfig?.mode.endsWith('-left')) {
         // Minor nicety: Start the menu to the right of the menu itself is on
         // the left, otherwise use the default.
-        corner = "BOTTOM_RIGHT";
+        corner = 'BOTTOM_RIGHT';
       }
 
       return html` <frigate-card-submenu
@@ -128,11 +129,11 @@ export class FrigateCardMenu extends LitElement {
       </frigate-card-submenu>`;
     }
 
-    let stateParameters: StateParameters = {...button};
+    let stateParameters: StateParameters = { ...button };
 
     if (stateParameters.icon == FRIGATE_BUTTON_MENU_ICON) {
       stateParameters.icon =
-        this._menuConfig?.mode.startsWith('hidden-') && !this.expand
+        this._menuConfig?.mode.startsWith('hidden-') && !this.expanded
           ? 'mdi:alpha-f-box-outline'
           : 'mdi:alpha-f-box';
     }
@@ -192,10 +193,14 @@ export class FrigateCardMenu extends LitElement {
         mode.startsWith('overlay-') ||
         mode.startsWith('hover-'),
       'expanded-horizontal':
-        (mode.startsWith('overlay-') || mode.startsWith('hover-') || this.expand) &&
+        (mode.startsWith('overlay-') ||
+          mode.startsWith('hover-') ||
+          (mode.startsWith('hidden-') && this.expanded)) &&
         (mode.endsWith('-top') || mode.endsWith('-bottom')),
       'expanded-vertical':
-        (mode.startsWith('overlay-') || mode.startsWith('hover-') || this.expand) &&
+        (mode.startsWith('overlay-') ||
+          mode.startsWith('hover-') ||
+          (mode.startsWith('hidden-') && this.expanded)) &&
         (mode.endsWith('-left') || mode.endsWith('-right')),
       full: mode == 'above' || mode == 'below',
       left: mode.endsWith('-left'),
@@ -204,9 +209,14 @@ export class FrigateCardMenu extends LitElement {
       bottom: mode.endsWith('-bottom'),
     };
 
+    // If the hidden menu isn't expanded, only show the Frigate button.
+    const buttons =
+      !mode.startsWith('hidden-') || this.expanded
+        ? this.buttons
+        : this.buttons.filter((button) => button.icon === FRIGATE_BUTTON_MENU_ICON);
     return html`
       <div class=${classMap(classes)}>
-        ${Array.from(this.buttons).map((button) => this._renderButton(button))}
+        ${buttons.map((button) => this._renderButton(button))}
       </div>
     `;
   }