class Navbar extends Component {

    componentDidMount() {
        $(".button-collapse").sideNav();
        $(".dropdown-button").dropdown();
        $('.tooltipped').tooltip({delay: 50});

        $('.notification-box').sideNav({
            menuWidth: 250,
            edge: 'right',
            closeOnClick: true,
        });

        $('.modal').leanModal();
    }



    render() {

        return (
            <div>
                {/* Dropdown Structure */}
                <ul id="dropdown" className="dropdown-content dropdown-list">
                    <li><a href="#!">Setting</a></li>
                    <li className="divider"></li>
                    <li>
                        <a href="#!" onClick={this.logOut}>Log out</a>
                    </li>
                </ul>

                {/* Notification Box Structure */}
                <ul id="notification-out" className="side-nav">
                    <li>Notification Component Goes Here</li>
                </ul>

                {/* Modal Structure */}
                <div id="notification-box-component" className="modal">
                    <div className="modal-content">
                      <h4>Modal Header</h4>
                      <p>A bunch of text</p>
                    </div>
                    <div className="modal-footer">
                      <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
                    </div>
                </div>

                {/* Naviation Bar */}
                <nav>
                    <div className="container">
                        <div className="nav-wrapper">

                            {/* Our Brand Logo */}
                            <a href="#!" className="brand-logo">MannKo</a>

                            <a href="#!" data-activates="mobile-demo" className="button-collapse">
                                <i className="material-icons">menu</i>
                            </a>

                            <ul className="right hide-on-med-and-down">
                                <li>
                                    <a className="dropdown-button" href="#!" data-activates="dropdown">
                                        <i className="material-icons right">arrow_drop_down</i>
                                    </a>
                                </li>
                            </ul>

                            {/* Notification Icon */}
                            <ul className="right">
                                {/*
                                <li data-activates="notification-out" className="button-collapse notification-box">
                                    <i className="material-icons tooltipped" data-position="top" data-delay="50" data-tooltip="Notifications">notifications</i>
                                </li>
                                */}

                                {/* Modal Trigger */}
                                <li className="modal-trigger" data-target="notification-box-component">

                                    <i className="material-icons tooltipped" data-position="top" data-delay="50" data-tooltip="Notifications">notifications</i>

                                </li>
                            </ul>

                            <ul className="right hide-on-med-and-down">
                                {/* Navigation Bar Search Box */}
                                <li>
                                    <form>
                                        <div className="input-field">

                                            <input id="search" type="search" required />
                                            <label htmlFor="search">
                                                <i className="material-icons">search</i>
                                            </label>
                                            <i className="material-icons">close</i>

                                        </div>
                                    </form>
                                </li>
                            </ul>

                            {/* Naviation on mobile */}
                            <ul className="side-nav" id="mobile-demo">
                                <li><a href="#!">Setting</a></li>
                                <li className="divider"></li>
                                <li><a href="#!" onClick={this.logOut}>Log out</a></li>
                                <li className="divider"></li>
                            </ul>


                        </div>
                    </div>
                </nav>

            </div>
        );
    }
};