export class Header extends React.Component<any, any> {
            private readonly searchServerUrl = "";
            private appButtonElement: HTMLElement;

            constructor(props: any) {
                super(props);

                this.state = { showAppMenu: false };
            }

            render() {
                const { showAppMenu } = this.state;
                const { className, navItems, singleColumn, appItems } = this.props;

                return (
                    <header className={className}>
                        <div className="app-icon">
                            <button className="nav-button" onClick={() => this.toggleAppMenu()} ref={(menuButton: any) => this.appButtonElement = menuButton}><i className="ms-Icon ms-Icon--Waffle" aria-hidden="true"></i></button>
                        </div>

    ***When image is clicked, show the <AllSites/> component in the HomeComponent below.***
                        <img src="/Styles/Images/logo/loop-logo-white.png" className="nav-logo" onClick={} />


 {showAppMenu ? <ApplicationMenu navItems={appItems} targetElement={this.appButtonElement} onDismiss={() => this.onDismiss()} /> : null}
                    <div className="nav-container"><TopNavigation classNam

e={className} navItems={navItems} singleColumn={singleColumn} /></div>
                        <div className="search-container">
                            <SearchBox onSearch={(searchTerm: string) => this.executeSearch(searchTerm)} />
                        </div>
                    </header>
                );
            }

export class HomeComponent extends React.Component<any, any> {
            constructor(props: any) {
                super(props);
                this.state = { navItems: [], appItems: [], singleColumnLayout: false, showAllSites: false };
            }

            componentDidMount() {
                this.checkWidth();
                window.addEventListener("resize", this.checkWidth.bind(this));

                this.fetchNavigation()
                    .then(nav => this.setState({ navItems: nav }));

                this.fetchAppIcons()
                    .then(icons => this.setState({ appItems: icons }));
            }


            componentWillUnmount(): void {
                window.addEventListener("resize", this.checkWidth.bind(this));
            }

            render() {
                const { navItems, appItems, singleColumnLayout } = this.state;

                return (
                    <Fabric>
                        <Header navItems={navItems} appItems={appItems} singleColumn={singleColumnLayout} />
                        <div className="main-container">
                            <AlertBar />
                            <div className="main-content">


                                <div className="ms-Grid">

<Hero singleColumn={singleColumnLayout} />
                                    <div className="ms-Grid-row">
                                        <div className="ms-Grid-col ms-sm12 ms-xl4 webpart-container">
                                            <UpcomingEvents />
                                        </div>
                                        <div className="ms-Grid-col ms-sm12 ms-xl4 webpart-container">
                                            <EmployeeNews />
                                        </div>
                                        <div className="ms-Grid-col ms-sm12 ms-xl4 webpart-container">
                                            <div className="ms-Grid-row">
                                                <div className="ms-Grid-col ms-sm12 webpart-container">
                                                    <IndustryNews />
                                                </div>
                                                <div className="ms-Grid-col ms-sm12 webpart-container">
                                                    <Quote />
                                                </div>

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

                                <Footer navItems={navItems} />
                            </div>
                        </div>
                    </Fabric>
                );
            }