Seeking assistance, can anyone help me?
I have an iron-list with individual entries each containing a "settings" icon. When this icon is clicked, a panel slides in from the right. The issue I am facing is that I want the panel to close automatically when another row's panel is opened, but currently they all remain open unless manually closed.
I believe there is something missing in the JavaScript code for this functionality, possibly related to a "close on click outside of the div" scenario.
Any help or guidance provided would be greatly appreciated.
HTML
<div class="container horizontal layout">
<paper-icon-button class="icons" icon="settings" on-click="toggleSettings"></paper-icon-button>
<div id="edit" class="settings">
<paper-icon-button icon="delete"></paper-icon-button>
<paper-icon-button icon="create"></paper-icon-button>
<paper-icon-button icon="clear" on-click="toggleSettings"></paper-icon-button>
</div>
</div>
CSS
.settings {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: grey;
position: fixed;
right: -130px;
transition: transform 0.5s;
color: white;
}
.settingsMove {
transform: translateX(-130px);
}
SCRIPT
<script>
Polymer({
is: 'test-app-list-element',
properties: {
},
toggleSettings : function() {
this.$.edit.classList.toggle('settingsMove');
},
});
</script>