import * as React from "react";
import { Navbar } from "./Navbar";

export class Header extends React.Component {
  public render(): JSX.Element {
    return (
        <div className="header_outer">
            <Navbar/>
            <div className="top_header afclr">
                <div className="container">
                    <div className="logo col-lg-4 col-md-3 col-sm-3 col-xs-5">
                        <a href="#">
                            <img src="images/logo.png" />
                        </a>
                    </div>
                    <div className="col-lg-8 col-md-9 col-sm-9 col-xs-6">
                        <div className="menu_block">
                            <div className="site-menu afclr">
                                <a href="javascript:void(1)" className="menu_expand afclr">
                                    <i/>
                                    <i/>
                                    <i/>
                                </a>
                                <ul className="nav-menu">
                                    <li className="login_in"><a href="#"> Login </a></li>
                                    <li><a href="#">Home</a></li>
                                    <li><a href="#">All Products </a></li>
                                    <li className="menu-item-has-children"><a href="#">Why Us?</a>
                                        <ul className="sub-menu">
                                            <li><a href="#">Services1</a></li>
                                            <li className="menu-item-has-children"><a href="#">Services2</a>
                                                <ul className="sub-menu">
                                                    <li><a href="#">Services3</a></li>
                                                    <li><a href="#">Services4</a></li>
                                                    <li><a href="#">Services5</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Passion Projects</a></li>
                                        </ul>
                                    </li>

                                    <li><a href="#">  About Us  </a></li>
                                    <li><a href="#"> Contact </a></li>

                                </ul>
                            </div>
                        </div>
                        <div className="top_right_btn">
                            <div className="btn_top"><a href="#">Login Now</a></div>
                            <div className="search_icon">
                                <a href="javascript:void(0)">
                                    <i className="la la-search"/>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="search_bar">
                <div className="wrapper">
                    <div className="search_bae_inner">
                        <div className="close_outer">
                            <div className="close_btn"><i className="la la-close"/></div>
                        </div>
                        <div className="f_outer">
                            <form method="get">
                                <input type="text" className="search_field" name="s" />
                                <input type="submit" name="" value="" className="sbtn" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
  }
}