render() { return( <Navbar bg="light" > <Navbar.Brand href="/">React-Bootstrap & React Redux</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <Nav.Link href="#link">Link</Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ) }
const NavigationBar = () => ( <Styles> <Navbar expand="lg"> <Navbar.Brand href="/">Shoreline IoT</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav"/> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="ml-auto"> <Nav.Item><Nav.Link href="/">Notification</Nav.Link></Nav.Item> <Nav.Item><Nav.Link href="/organization">Quick Link</Nav.Link></Nav.Item> </Nav> </Navbar.Collapse> </Navbar> </Styles> )
export function Category() { useInjectReducer({ key: 'category', reducer }); useInjectSaga({ key: 'category', saga }); const classes = useStyles(); return ( <div className={classes.container}> <h5>{messages.title}</h5> <Nav.Link className={classes.category}>{messages.duplexHome}</Nav.Link> <hr /> <Nav.Link className={classes.category}>{messages.drawingRooms}</Nav.Link> <hr /> <Nav.Link className={classes.category}>{messages.bedrooms}</Nav.Link> <Nav.Link className={classes.category}>{messages.kitchenRooms}</Nav.Link> <hr /> <Nav.Link className={classes.category}>{messages.bathrooms}</Nav.Link> <Nav.Link className={classes.category}>{messages.gardenHome}</Nav.Link> <hr /> <Nav.Link className={classes.category}>{messages.animationDesign}</Nav.Link> </div> ); }
const MyTopNav = ({ lessons }) => { console.log(lessons); return ( <Navbar bg="light shadow" expand="lg"> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <LinkContainer to="/"> <Nav.Link>Home</Nav.Link> </LinkContainer> <NavDropdown title={`All lessons`} id="basic-nav-dropdown"> {lessons.map(lesson => ( <LinkContainer to={`/lesson-${lesson.nr}`}> <NavDropdown.Item>lesson {lesson.nr}</NavDropdown.Item> </LinkContainer> ))} </NavDropdown> </Nav> </Navbar.Collapse> </Navbar> ); }
export default function NavBar({ user, onUserChange }) { return ( <Container> <Navbar bg="dark" variant="dark" expand="md" fixed="top"> <Navbar.Brand>React-Blog</Navbar.Brand> <Nav className="mr-auto"> <Nav.Link href="/posts">Recent Posts</Nav.Link> <AddPostNavItem user={user} /> </Nav> <Nav pullright="true"> <SearchNavItem /> <SignInNavItem user={user} onUserChange={onUserChange} /> </Nav> </Navbar> </Container> ); }
function NavigationBarComponent() { const classes = useStyles(); return ( <div className={classes.container}> <Nav className="justify-content-end " activeKey="/home"> <Nav.Item> <Nav.Link href="/" >{messages.home}</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="about">{messages.about}</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="screen">{messages.screen}</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="contact">{messages.contact}</Nav.Link> </Nav.Item> <Nav.Item className={classes.createAccount}> <Nav.Link eventKey="contact">{messages.createAccount}</Nav.Link> </Nav.Item> </Nav> </div> ); }
const Navigation = (props) => { let navigate = props.history return ( <Navbar bg="light" expand="lg"> <Navbar.Brand onClick={() => { navigate.push("/") }}>Recipes</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <Nav.Link onClick={() => { navigate.push("signup") }}> SignUp </Nav.Link> <Nav.Link onClick={()=>{navigate.push("search")}}>Search</Nav.Link> <NavDropdown title="Dropdown" id="basic-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> </Nav> </Navbar.Collapse> </Navbar> ) }
render() { return ( <div> <Navbar bg='light' expand='lg'> <Navbar.Brand href>React Routing Example</Navbar.Brand> <Navbar.Collapse id='basic-navbar-nav'> <Nav className='mr-auto'> <Link to='/'> <Nav.Link href='/'>Home</Nav.Link> </Link> <Link to='/contact'> <Nav.Link href='/contact'>Contact</Nav.Link> </Link> </Nav> </Navbar.Collapse> </Navbar> </div> ) }
function Nav1() { return ( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">Home</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="ml-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" id="collapsible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Actions</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> <Nav.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); }
// Nav className controls alignment of links // Navbar.Brand className controls when that element disappears and reappears with d-block and d-none (choose a size: sm, lg, etc) function Nav2() { return ( <> <Navbar expand="sm" bg="dark" variant="dark"> <Nav className="mx-auto"> <Navbar.Brand className="d-block d-sm-none" href="#home">Home</Navbar.Brand> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#features">Pricing</Nav.Link> <Navbar.Brand className="centeredBrand d-none d-sm-block" href="#home">Home</Navbar.Brand> <Nav.Link href="#pricing">About</Nav.Link> <Nav.Link href="#features">Contact</Nav.Link> </Nav> </Navbar> <Jumbotron> <h1>Hello, world!</h1> <p> This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. </p> <p> <Button variant="primary">Learn more</Button> </p> </Jumbotron> </> ); }
render() { return ( <Navbar default collapseOnSelect> <Container> <Navbar.Brand href="/"> React-Bootstrap </Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> </Container> <Navbar.Collapse> <Nav> <Nav.Link eventKey={1} href="/"> Home </Nav.Link> <Nav.Link eventKey={2} href="/about"> About </Nav.Link> <Nav.Link eventKey={3} href="/news"> News </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ) }
// TODO: NOT DONE YET const Nav6 = () => { return ( <> <Navbar expand="lg" bg="dark" variant="dark"> <Navbar.Brand className="" href="#home">Home</Navbar.Brand> <Nav className="ml-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#features">Pricing</Nav.Link> <Nav.Link href="#pricing">About</Nav.Link> <Nav.Link href="#features">Contact</Nav.Link> </Nav> </Navbar> <Jumbotron> <h1>Hello, world!</h1> <p> This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. </p> <p> <Button variant="primary">Learn more</Button> </p> </Jumbotron> </> ); }
function Nav1() { return ( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">Home</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="ml-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" id="collapsible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Actions</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> <Nav.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); }