> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/sa5-modals/page-1.md).

# Side Panels 🧪

{% hint style="info" %}
Might move this to the Elements lib. 
{% endhint %}

The side-panel concept is;

* A container DIV, containing arbitrary content 
* Which has a tab piece
  * Typically e.g. 30px x 30px square and icon
* Breakpoint-aware, it only appears at certain breakpoints
* Clicking tab expands tray / collapses tray
* Interactions might collapse tray?   
* Tabs are grouped in a panel, 
  * which can be set to sticky or fixed top
  * left / right / bottom / top
    * expansion direction
    * top right + offset ( left )
    * right top + offset ( down )
    * right middle + offset ( + / - ) 
* Multiple panels for each side?  

Implementation; 

* At load, 
  * button sontainers are created
  * buttons are created
  * panels are created offscreen
  * GSAP wiring is done 
* At breakpoint, buttons are shown
  * clicking expands / contracts 

Use cases;

* ToC as in FS ToC
* Filter settings as in FS Filter
* Hours of operation
* Feedback form