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

<app-sidebar>
    <div class={ getClasses() }>
        <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" data={ state.data } />
            </div>

            <!-- footer -->
            <div class="sidebar__footer">
                <button class="button m-bottom-0" type="submit" form="app-users-form">
                    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="app-users-form" 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>

        import observable from '@riotjs/observable'

        /**
         *
         *
         *
         */

        export default {

            state: {
                isOpen: false
            },

            onMounted()
            {
                observable(this.root)

                this.root.on('open', () => {
                    this.state.isOpen = true
                    this.update()
                })
            },

            /**
             *
             *
             */
            getClasses()
            {
                let classes = [
                    'sidebar'
                ]

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

                return classes.join(' ')
            }

        }

    </script>
</app-sidebar>