super-hog/packages/frontend/js/components/sidebar.riot

<app-sidebar>
    <div class={ getCssClasses() }>
        <div class="sidebar__inner">

            <!-- header -->
            <div class="bar">
                <div class="bar__main">
                    <slot name="title" />
                </div>
                <div class="bar__end">
                    <button class="button button--transparent" type="button" onclick={ (event) => { handleClose(event) } }>
                        <svg class="icon fill-text-contrast" aria-hidden="true">
                            <use xlink:href="/symbol-defs.svg#icon-close"></use>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- body -->
            <div class="sidebar__body">
                <slot name="form" />
            </div>

            <!-- footer -->
            <div class="sidebar__footer">
                <button class="button m-bottom-0" type="submit" form="{ props.formId }">
                    Save
                    <svg class="icon fill-success p-left-3" aria-hidden="true">
                        <use xlink:href="/symbol-defs.svg#icon-check"></use>
                    </svg>
                </button>
                <button class="button m-bottom-0" type="submit" form="{ props.formId }" close>
                    Save and Close
                    <svg class="icon fill-success p-left-3" aria-hidden="true">
                        <use xlink:href="/symbol-defs.svg#icon-arrow-right"></use>
                    </svg>
                </button>
            </div>

        </div>
    </div>

    <script>

        /**
         *
         *
         *
         */

        export default {

            /**
             *
             *
             */
            handleClose()
            {
                this.props.close()
            },

            /**
             *
             *
             */
            getCssClasses()
            {
                const classes = [
                    'sidebar'
                ]

                if (this.props.open === true) {
                    classes.push('sidebar--open')
                }

                return classes.join(' ')
            }

        }

    </script>
</app-sidebar>