Panels & Collapsible Panels

Wasn't sure whether or not to post this in Theme Dev help or Extensions Directory. Figured it's more appropriate for here.

With this code you can create something similar to this:

You can add this code in your Board Templates or in the Theme Layout wherever you want the panel to appear. You can add this as many times as you like, just make sure you change the name in the collapsible version.

<div class="panel">
    <div class="panel__title">
        <h2>Custom Panel</h2>
    </div>
    <div class="panel__content">
         Add whatever you like 🤷‍♀️
    </div>
    <div class="panel__footer"></div>
</div>

And if you want to make it collapsible you can jazz it up with this:

<div x-data="{collapsed: $persist(false).as('CUSTOM_PANEL_NAME')}" class="panel" :class="collapsed ? 'panel--collapsed' : ''">
    <div class="panel__title">
        <h2>Collapsable Panel</h2>
        <div class="panel__title__actions">
            <button type="button" class="btn btn-primary panel__expander" type="button" @click="collapsed = !collapsed">
                <template hidden x-if="collapsed">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" class="icon">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6"/>
                    </svg>
                </template>
                <template hidden x-if="! collapsed">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" class="icon">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/>
                    </svg>
                </template>
            </button>
        </div>
    </div>
    <div x-show="! collapsed" class="panel__content">
        Add whatever you like 🤷‍♀️
    </div>
    <div x-show="! collapsed" class="panel__footer"></div>
</div>

Make sure to replace CUSTOM_PANEL_NAME with a name of your choosing so that the state of whether the panel is open/closed can be saved correctly and not collide with another panel.