<div className="vertical">
        <header className="header-dark position-fixed" changeNav >
        <Navbar className="vertical-topbar" >
            <Navbar.Collapse id="basic-navbar-nav">
                <DarkHeader/>
                <div className={ !this.state.setting ? "hide setting mr-3 ml-2 position-relative" : "show setting mr-3 ml-2 position-relative" } > 
                <i className="fa fa-gear" onClick={this.handleSetting}>
                <div className="setting-child position-absolute">
                    <Button onClick={() => this.setState({ open: !open })} aria-controls="themecolor" aria-expanded={open} className="d-flex justify-content-between align-items-center">
                    <p className="mb-0">Theme Color
                    <i className="fa fa-angle-right">
                    </Button>
                    <Collapse in={this.state.open}>
                    <div id="themecolor" className="d-flex">
                        <NavDropdown.Item  className="theme-container text-center" onClick={this.showlight} >
                        <div className="light color-setting"><span></span><span></span></div><small>Light</small> 
                        </NavDropdown.Item>
                        <NavDropdown.Item  className="theme-container text-center" onClick={this.showdark} >
                        <div className="dark color-setting"><span></span><span></span></div><small>Dark</small></NavDropdown.Item>
                    </div>
                </Collapse>
                    <Button onClick={() => this.setState({ style: !style })} aria-controls="themestyle" aria-expanded={open} className="d-flex themestyle justify-content-between align-items-center">
                    <p className="mb-0">Navigation Style</p>
                    <i className="fa fa-angle-right"></i>
                    </Button>
                    <Collapse in={this.state.style}>
                    <div id="themestyle">
                        <NavDropdown.Item  className="theme-container" onClick={() => this.props.onPressSwitchLayout('Horizontal')}><div className="btn btn-default">Horizontal</div></NavDropdown.Item>
                        <NavDropdown.Item  className="theme-container vertical-menu" onClick={() => this.props.onPressSwitchLayout('Vertical')}><div className="btn btn-default">Vertical</div></NavDropdown.Item>
                    </div>
                    </Collapse>
                </div>
                </div>
                <div className="d-flex align-items-center"></div>
            </Navbar.Collapse>
        </Navbar>
        </header>
    </div>