Luis82
March 11, 2026, 8:40am
1
Hi guys, I’m not too sure how to explain this, but the concept is very simple. I need a variable that can be triggered on and off to control the menu animation (a sliding bar showing and hiding) respectively when the variable is true or false.
I managed to do this, but the variable is from a helper, so it’s global. Because of that, every time I open or close the menu, it does it on all devices at the same time. Instead, I would like the menu to open or close only on the device I’m currently using.
To achieve this, I tried using browser mode, but I can’t seem to make it work. The only thing I managed to do is create a different menu using a pop-up, but I don’t really like using pop-ups for my main menu.
Can anyone assist or suggest where I might find an example with a similar function?
dcapslock
March 11, 2026, 11:41am
2
Check out expander-card which supports actions to expand / collapse.
Luis82
March 12, 2026, 6:30am
3
Thanks Darryn, Are those only visible in the device in use?
Luis82
March 12, 2026, 7:13am
5
I have got this menu set up but is using global variable on helper. Do you believe I can’t do any change to make the open/close menu visible only on the device in use rather than on all devices?
###########################
# MENU BUTTON (always visible)
###########################
- type: icon
entity: input_boolean.input_boolean_floorplan3_move
icon: mdi:menu
style:
'--iron-icon-height': 1vw
'--iron-icon-width': 1vw
'--paper-item-icon-active-color': '#ffff66'
'--paper-item-icon-color': darkgrey
border-radius: 100%
top: 5%
transform: scale(1.2)
width: 6vw
height: 6vw
background: none
border: none
box-shadow: none
display: flex
justify-content: center
align-items: center
padding: 0.5vw # optional, improves touch feel
z-index: 3
card_mod:
style: |
:host {
transition: left 0.7s ease-in-out;
left: {{ '16%' if states('input_boolean.input_boolean_floorplan3_move') == 'on' else '-1%' }};
position: absolute !important;
}
tap_action:
action: toggle
######################### MENU BAR #########################
######################################################################
- type: image
image: /local/ndr_floorplan/sidebar/sidebar_xl.png
style:
height: 100%
#left: 11.73828125%
top: 50%
width: 23.4765625%
z-index: 2
card_mod:
style: |
:host {
transition: left 0.7s ease-in-out;
left: {{ '11.73828125%' if states('input_boolean.input_boolean_floorplan3_move') == 'on' else '-6%' }};
position: absolute !important;
}
tap_action:
action: none
######################### OVERLAYER #########################
######################################################################
- type: image
image: /local/ndr_floorplan/sidebar/sideShadow.png
tap_action:
action: call-service
service: input_boolean.turn_off
data:
entity_id: input_boolean.input_boolean_floorplan3_move
style:
height: 200%
left: 0%
opacity: 0.9
top: 0%
z-index: 1
card_mod:
style: |
:host {
/* no transition here */
width: {{ '200%' if states('input_boolean.input_boolean_floorplan3_move') == 'on' else '0%' }};
position: absolute !important;
}
######################### LOGO #########################
######################################################################
- type: image
image: /local/Logo.png
style:
#left: 12%
top: 7%
width: 8%
z-index: 10
card_mod:
style: |
:host {
transition: left 0.7s ease-in-out;
left: {{ '12%' if states('input_boolean.input_boolean_floorplan3_move') == 'on' else '-6%' }};
position: absolute !important;
}
######################### HOME #########################
- type: image
image: /local/ndr_floorplan/sidebar/home_on.png
style:
border-radius: 5vw
box-shadow: '0px 0.2vw 0.8vw 0px rgba(0,0,0,0.1)'
#left: 11.7%
top: 26%
width: 20.5078125%
z-index: 2
card_mod:
style: |
:host {
transition: left 0.7s ease-in-out;
left: {{ '11.7%' if states('input_boolean.input_boolean_floorplan3_move') == 'on' else '-5%' }};
position: absolute !important;
}
tap_action:
action: navigate
navigation_path: /ndr-floorplan/home
######################### DEVICES #########################
- type: image
image: /local/ndr_floorplan/sidebar/devices_off.png?v=1
style:
#left: 11.7%
top: 34%
width: 20.5078125%
z-index: 2
card_mod:
style: |
:host {
transition: left 0.7s ease-in-out;
left: {{ '11.7%' if states('input_boolean.input_boolean_floorplan3_move') == 'on' else '-5%' }};
position: absolute !important;
}
tap_action:
action: navigate
navigation_path: /ndr-floorplan/devices
this is the side triggered to open and close the menu
left: {{ '11.7%' if states('input_boolean.input_boolean_floorplan3_move') == 'on' else '-5%' }};