VanillaJS App Structure

app.js

<!-- Use a function to minify and cache this code on load -->
<script>
window.app = {
    state: {
        search: {
            isSearchOpen: false,
        },
    },
    actions: {
        search: {
            toggleSearchInput: function() {
                this.state.search.isSearchOpen = !this.state.search.isSearchOpen
                this.search.components.renderSearchInput()
            },
        },
    },
    components: {
        search: {
            renderSearchInput: function() {
                if (this.state.search.isSearchOpen) return

                document.getElementById('search-input').innerHTML = `
                <form class="mb0" action="/products" method="get" id="header-search" style="display: block;">
                    <div class="bgb no-margin">
                        <div class="pv1 ph2">
                            <div class="row">
                                <div class="col-sm-10">
                                    <div class="form-group mb0">
                                        <input class="form-control bgb tcw br0 ft10 mb0" placeholder="Search for something..." style="height: 46px; box-shadow: none;" name="q">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <button class="btn btn-lg btn-default btn-block">Search</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                `
            },
        },
    },
}
</script>

<div id="search-input"></div>

<button onclick="app.actions.search.toggleSearchInput()">
    Search
</button>