Monitor shell panel status collapsed/expanded

Question

I have this shell panel

<calcite-shell-panel slot="panel-start" position="start" id="shell-panel-start">

and want to monitor whether it's expended or not.

So I use JS reactiveutils but it doesn't seem to work.

const shellPanel = document.getElementById("shell-panel-start");
  reactiveUtils.watch(
    () => shellPanel.collapsed,
    () => {
      console.log("collapsed");
    });

MattDriscoll · Answer

Thanks @LefterisKoumis. I'll pass the feedback along.

LefterisKoumis · Answer

Yes, I am. Thank you for creating the issue. I also saw that after comments from your colleagues you closed it. ☹️  One of them said "Action Bar Actions that toggle the collapsed state or the Panel close event, etc." could monitor the state of the shell panel. That's correct. But also, I am using the shell panel to display the feature widget that displays the popup when a feature is clicked on. At each time I have to monitor the width of the table that is on the calcite-panel slot "panel-bottom". An event to monitor the state of the calcite shell slot "panel-start" would make it a lot easier to manage and less code to write.

MattDriscoll · Answer

Hi @LefterisKoumis,

Are you referring to the "collapsed" property on the "calcite-shell-panel"?

There are no UI elements in the component that a user would click to toggle this property. If it is being toggled, its likely being done programmatically somewhere in your code. If that's the case, you should be able to track the state of it there.

I will create an issue to add an event to listen for when this property changes.

Issue: https://github.com/Esri/calcite-design-system/issues/10116