reactstrap#NavbarText JavaScript Examples
The following examples show how to use
reactstrap#NavbarText.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Header.js From ReactJS-Projects with MIT License | 6 votes |
|
Header = () => {
return (
<Navbar color="info" light>
<NavbarBrand tag={Link} to="/" className="text-white">LCO Contact App</NavbarBrand>
<NavbarText className="text-white float-right">
Contact app
</NavbarText>
</Navbar>
);
}
Example #2
| Source File: NavItemLogin.js From hivemind with Apache License 2.0 | 6 votes |
|
NavItemLogin = () => {
const { user, logout } = useUser()
return typeof user === 'undefined' ? (
<NavItem>
<NavbarText>
<Spinner size={'sm'} />
</NavbarText>
</NavItem>
) : user ? (
<NavItem>
<NavLink href={'#'} onClick={logout}>
<LogOut />
</NavLink>
</NavItem>
) : (
<NavItem>
<Link href={'/auth'} passHref>
<NavLink>
<LogIn />
</NavLink>
</Link>
</NavItem>
)
}
Example #3
| Source File: NavItemUser.js From hivemind with Apache License 2.0 | 6 votes |
|
NavItemUser = () => {
const { user } = useUser()
return typeof user === 'undefined' ? (
<NavItem>
<NavbarText>
<Spinner size={'sm'} />
</NavbarText>
</NavItem>
) : user ? (
<NavItem>
<NavbarText>{user.email}</NavbarText>
</NavItem>
) : null
}
Example #4
| Source File: index.js From relay_09 with MIT License | 6 votes |
|
MyNav = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="primary" light expand="md">
<NavbarBrand href="/" id="navItem">
<b>?하부리?</b>
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="http://49.50.160.6:8080/">Chat</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>하부리란?</DropdownItem>
<DropdownItem>하부리 기능</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<NavbarText id="navItem">Latta is horse</NavbarText>
</Collapse>
</Navbar>
</div>
);
}
Example #5
| Source File: Header.jsx From aglomerou with GNU General Public License v3.0 | 6 votes |
|
Header = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar className={styles.header} color="light" light expand="md">
<NavbarBrand href="https://ifto-palmas.github.io/aglomerou/">
<img className={styles.image} src={logoImage} alt="Logo aglomerou"></img>
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="#">Notificações</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://coronavirus.palmas.to.gov.br/">COVID-19</NavLink>
</NavItem>
</Nav>
<NavbarText>IFTO</NavbarText>
</Collapse>
</Navbar>
</div>
);
}
Example #6
| Source File: NavBar.js From ReactJS-Projects with MIT License | 5 votes |
|
NavBar = () => {
const context = useContext(UserContext)
const [isToggled, setIsToggled] = useState(false)
const toggle = () => setIsToggled(!isToggled)
return (
<Navbar
color="danger"
light
expand="md"
>
<NavbarBrand>
<Link to="/" className='text-white'>Github Repo Search App</Link>
</NavbarBrand>
<NavbarText className='text-white'>
Welcome, {context.user?.email ? context.user?.email : ""}
</NavbarText>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isToggled} navbar>
<Nav navbar style={{ marginLeft: "auto" }}>
{
context.user ?
(
<NavItem>
<NavLink onClick={() => { context.setUser(null) }} className='text-white'>
Logout
</NavLink>
</NavItem>
) :
(
<>
<NavItem>
<NavLink tag={Link} to="/signup" className='text-white'>
Signup
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to="/signin" className='text-white'>
Signin
</NavLink>
</NavItem>
</>
)
}
</Nav>
</Collapse>
</Navbar>
)
}
Example #7
| Source File: Layout.js From hivemind with Apache License 2.0 | 4 votes |
|
Layout = ({ children }) => {
const [isOpen, setOpen] = useState(false)
const [dropdownOpen, setDropdownOpen] = useState(false)
const { pageVars } = useContext(GlobalContext)
const notifyRef = useCallback((node) => {
if (typeof window !== 'undefined') {
if (node) {
window.notify = node.notificationAlert.bind(node)
} else {
window.notify = null
}
}
}, [])
function toggleCollapse() {
setOpen(!isOpen)
}
function toggleDropdown() {
setDropdownOpen(!dropdownOpen)
}
return (
<Container fluid>
<Head>
<script type="text/javascript" src="/js/pace.min.js" async />
<title>{pageVars.title}</title>
<link
rel="apple-touch-icon"
sizes="57x57"
href="/img/logo/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="/img/logo/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="/img/logo/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="/img/logo/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="/img/logo/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="/img/logo/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="/img/logo/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="/img/logo/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/img/logo/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/img/logo/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/img/logo/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="/img/logo/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/img/logo/favicon-16x16.png"
/>
<link rel="manifest" href="/img/logo/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="/img/logo/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#ffffff" />
</Head>
<Navbar color="inverse" light expand="md" className="border-bottom mb-2">
<Link href="/" passHref>
<ForwardedNavbarBrand className="text-wrap">
<img
src="/img/logo/Logo.svg"
style={{ height: '35px' }}
alt="Logo"
/>
</ForwardedNavbarBrand>
</Link>
<NavbarToggler onClick={toggleCollapse} />
<Collapse isOpen={isOpen} navbar>
<MainNav />
<Nav className="ml-auto" navbar>
<NavItem>
<NavbarText>
<Spinner
type="grow"
color="dark"
id={'loading'}
className={'invisible mx-2'}
/>
</NavbarText>
</NavItem>
<NavItemUser />
<Dropdown
nav
inNavbar
isOpen={dropdownOpen}
toggle={toggleDropdown}
>
<DropdownToggle nav caret>
<HelpCircle /> Help
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<Link href={'/help'} passHref>
<NavLink>
<Info /> User Guide
</NavLink>
</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<NavLink
href={'https://github.com/adityamukho/hivemind/discussions'}
target="_blank"
>
<MessageCircle /> Ask a Question (Hivemind)
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
href={'https://gitter.im/recallgraph/community'}
target="_blank"
>
<MessageCircle /> Ask a Question (RecallGraph)
</NavLink>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink
href="https://github.com/adityamukho/hivemind"
target="_blank"
>
<GitHub />
</NavLink>
</NavItem>
<NavItemLogin />
</Nav>
</Collapse>
</Navbar>
<Container fluid>
<NotificationAlert ref={notifyRef} />
<Row>
<Col>{children}</Col>
</Row>
</Container>
</Container>
)
}
