@growstocks/stack/Components/SCNavbar/component.ts

The web implementation of GrowStocks' design system. Made with SCSS, Typescript, and ❤.

/*
 *
 * Copyright (c) 2021 GrowStocks
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 */

interface SCNavbarProps {
    componentSelector?: string;
    triggerSelector?: string;
}

class SCNavbar {
    render(params?: SCNavbarProps) {

        const {
            componentSelector = ".sc-navbar",
            triggerSelector = ".sc-navbar__trigger"
        } = params || {};

        const navbar: any = document.querySelector(componentSelector);
        const navbarTrigger: any = document.querySelector(triggerSelector);

        let navbarState: boolean = false;

        if (!navbar) {
            throw new Error('Navbar class is not provided! Please provide a navbar class')
        }
        if (!navbarTrigger) {
            throw new Error('Navbar trigger class is not provided! Please provide a trigger class')
        }

        navbarTrigger.addEventListener('click', function() {
            navbarState = !navbarState;

            if (!navbarState) {
                navbar.classList.remove('visible');
            } else {
                navbar.classList.add('visible');
            }
        });

    }
}

export default SCNavbar;