Side Panels 🧪

Might move this to the Elements lib.

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