how can i create a navbar on the same line?


i created my navbar here with bootsrap and as you see there is a card , search , dropdown … but then when i added a 2 button for men and women i found them at the same line with search but not with the card and navdropdown ; should i change the button of women and men and search ? please help

import React from 'react'
import {Route} from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { LinkContainer  } from 'react-router-bootstrap'
import { Navbar, Nav, Container, NavDropdown  , Button } from 'react-bootstrap'
import { logout } from '../actions/userActions'


import SearchBox from './SearchBox'

const Header = ({setFilter}) => {
  const dispatch = useDispatch()

  const userLogin = useSelector((state) => state.userLogin)
  const { userInfo } = userLogin

  const logoutHandler = () => {
    dispatch(logout())
  }

  return (
    <header style={{color:'white'}}>
      <Navbar style={{backgroundColor:'gray'}} variant='dark' expand='lg' collapseOnSelect>
        <Container  >
          <LinkContainer to='/'>
            <Navbar.Brand>LUCKYOU STYLE </Navbar.Brand>
          </LinkContainer>

           
          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
          <Route    render={({ history }) => <SearchBox  history={history} />} />
           <Nav className='ml-auto'>
         
           <LinkContainer style={{backgroundColor:'inherit'}} to='/products/men'>
            <Button name="men" onClick={(e)=>setFilter(e.target.name)}>Men</Button>              
            </LinkContainer>    
            <LinkContainer style={{backgroundColor:'inherit'}} to='/products/women'>
            <Button name="women" onClick={(e)=>setFilter(e.target.name)}>Women </Button>
           
            </LinkContainer>
                
             <LinkContainer to='/cart'>
                <Nav.Link>
                  <i  className='fas fa-shopping-cart'></i> Cart
                </Nav.Link>
              </LinkContainer>
              {userInfo ? (
                <NavDropdown style={{color:'white'}} title={userInfo.user.name} id='username'>
                  <LinkContainer to='/profile'>
                    <NavDropdown.Item>Profile</NavDropdown.Item>
                  </LinkContainer>
                  <NavDropdown.Item onClick={logoutHandler}>
                    Logout
                  </NavDropdown.Item>
                </NavDropdown>
              ) : (
                <LinkContainer style={{color:'white'}} to='/login'>
                  <Nav.Link>
                    <i  className='fas fa-user'></i> Sign In 
                  </Nav.Link>
                </LinkContainer>
              )}
              {userInfo && userInfo.user.isAdmin && (
                  <NavDropdown  title='Admin' id='adminmenu'>
                  <LinkContainer  to='/admin/userlist'>
                    <NavDropdown.Item >Users</NavDropdown.Item>
                  </LinkContainer>
                  <LinkContainer  to='/admin/productlist'>
                  <NavDropdown.Item >  Products </NavDropdown.Item>
                  </LinkContainer>
                  <LinkContainer  to='/admin/orderlist'>
                  <NavDropdown.Item >  Orders </NavDropdown.Item>
                  </LinkContainer>
                </NavDropdown>
              )}
              
            </Nav>
          </Navbar.Collapse>

        </Container>
      </Navbar>
    </header>
  )
}

export default Header

Source: React – Stack Overflow

November 21, 2021
Category : News
Tags: frontend | html | navbar | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.