Настроить NavBar в react- bootstrap - PullRequest
Новая
       9

Настроить NavBar в react- bootstrap

0 голосов
/ 28 мая 2020

Я разработал панель навигации, используя response- bootstrap, как определено ниже: 


function NavHeader() {
        return (
                <Navbar className="village-header" width="100" expand="lg">
                    <Navbar.Brand href="/">
                        <img
                            src= { SiteLogo }
                            width="214"
                            height="28"
                            className="d-inline-block align-top"
                            alt="Village"
                        />
                    </Navbar.Brand>
                    <SearchForm />
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="mr-auto village-header">
                        <Nav.Link href="/discover">Discover</Nav.Link>
                        <Nav.Link href="/create">Create</Nav.Link>
                        <Nav.Link href="/howitworks">How it Works</Nav.Link>
                        <Nav.Link href="/login">Login/Register</Nav.Link>
                        <NavDropdown title="Profile" id="basic-nav-dropdown">
                            <NavDropdown.Item>Firstname LastName</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item href="/profile">Profile</NavDropdown.Item>
                            <NavDropdown.Item href="/messages">Messages</NavDropdown.Item>
                            <NavDropdown.Item href="/settings">Settings</NavDropdown.Item>
                            <NavDropdown.Item href="/logout">Logout</NavDropdown.Item>
                        </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
        );
}

Я пытаюсь настроить ее:

  • Скрыть раскрывающийся список «Профиль» если пользователь не вошел в систему, просто отобразите элемент входа / регистрации.

Я тоже хочу сделать наоборот, при входе в систему элемент логин / регистрация скрывается и мы просто отображаем Профиль

  • Как заменить текст «Профиль» используется в моем раскрывающемся списке вместо изображения?
  • Как я могу изменить размер поля поиска на фиксированный?

Спасибо за вашу помощь

...