react-bootstrap#NavDropdown TypeScript Examples
The following examples show how to use
react-bootstrap#NavDropdown.
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: NetworkSwitcher.tsx From devex with GNU General Public License v3.0 | 5 votes |
|
NetworkSwitcher: React.FC = () => {
const history = useHistory()
const networkName = useNetworkName()
const networkUrl = useNetworkUrl()
const userPrefContext = useContext(UserPrefContext)
const { networkMap } = userPrefContext!
const [showDropdown, setShowDropdown] = useState(false)
const [currentNetwork, setCurrentNetwork] = useState(networkName)
useEffect(() => {
setCurrentNetwork(networkName)
}, [networkName])
const changeNetwork = useCallback((k: string) => {
history.push({
pathname: '/',
search: '?' + new URLSearchParams({ network: k }).toString()
})
}, [history])
return (
<Nav style={{ minWidth: '120px' }}>
<OverlayTrigger placement='left'
overlay={<Tooltip id={'network-tt'}> {networkUrl} </Tooltip>}>
<FontAwesomeIcon className='info-icon' icon={faInfoCircle} />
</OverlayTrigger>
<NavDropdown onToggle={(e: boolean) => { setShowDropdown(e) }}
show={showDropdown} title={currentNetwork} id="header-network-dropdown">
{networkMap.size === 0
? <div className='text-center'>
No networks
</div>
: Array.from(networkMap, ([k, v]) => (
<div key={k} className='node-div'>
<NavDropdown.Item className='node-item' onClick={() => {
if (currentNetwork !== v) {
changeNetwork(k)
}
}}>
{v}
</NavDropdown.Item>
</div>
))}
</NavDropdown>
</Nav>
)
}
Example #2
| Source File: Navigation.tsx From apps with MIT License | 5 votes |
|
NavDropdownPage = ({ path, description }: { path: string; description: string }) => {
const route = `/${Manager.region()}/${path}`;
return (
<NavDropdown.Item as={Link} to={route} eventKey={route}>
{description}
</NavDropdown.Item>
);
}
Example #3
| Source File: SideNavbar.tsx From 3Speak-app with GNU General Public License v3.0 | 4 votes |
|
export function SideNavbar(props: any) {
const [login, setLogin] = useState('')
const [myChannelLink, setMyChannelLink] = useState('')
useEffect(() => {
const load = async () => {
const login = localStorage.getItem('SNProfileID')
if (login) {
const user = (await AccountService.getAccount(login)) as any
const ringItem = user.keyring[0]
setLogin(user.nickname)
setMyChannelLink(`${ringItem.type}:${ringItem.username}`)
}
}
void load()
}, [])
const logOut = async () => {
//TODO: logout logic
const profileID = localStorage.getItem('SNProfileID')
const user = await AccountService.logout(profileID)
const accountsInit = (await AccountService.getAccounts()) as any
localStorage.removeItem('SNProfileID')
console.log(accountsInit)
if (accountsInit.length > 0) {
localStorage.setItem('SNProfileID', accountsInit[0]._id)
}
window.location.reload()
}
return (
<Navbar bg="white" expand="lg" id="layoutNav" className="bg_white fixed-left">
<Navbar.Brand>
<img src={SpeakLogo} />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav">
<span className="navbar-toggler-icon"></span>
</Navbar.Toggle>
<Navbar.Collapse>
<Nav className="mr-auto nav_dist">
{login && (
<NavDropdown
id="nav-dropdown"
title={
<>
<div className="nav_icons">
<VscKey size="21px" />
</div>
<span>@{login}</span>
</>
}
>
<NavDropdown.Item href="#/accounts">Switch account</NavDropdown.Item>
<NavDropdown.Item href={`#/user/${myChannelLink}`}>Go to my channel</NavDropdown.Item>
<NavDropdown.Item href="#/login">Add account</NavDropdown.Item>
{login && (
<NavDropdown.Item
onClick={() => {
logOut()
}}
>
Log out
</NavDropdown.Item>
)}
</NavDropdown>
)}
{!login && (
<Nav.Link href="#/login" className="display-mobile">
<button className="btn btn-dark text-white btn-sm">Add account</button>
</Nav.Link>
)}
<hr />
<Nav.Link href="#/">
<div className="nav_icons">
<img src={iconHome} height="14px" />
</div>
Home
</Nav.Link>
<Nav.Item></Nav.Item>
<Nav.Link href="#/trends">
<div className="nav_icons">
<img src={iconTrend} height="21px" />
</div>
Trending Content
</Nav.Link>
<Nav.Link href="#/new">
<div className="nav_icons">
<img src={iconNewContent} height="17px" />
</div>
New Content
</Nav.Link>
<NavDropdown
id="nav-dropdown"
title={
<>
<div className="nav_icons">
<img src={shakeHands} style={{ height: '21px' }} />
</div>
Communities
</>
}
>
<Nav.Link href="#/communities">
<FaGlobe /> All Communities...
</Nav.Link>
<NavDropdown.Item href="#/community/hive:hive-181335">
<FaUsers /> Threespeak
</NavDropdown.Item>
<NavDropdown.Item href="#/community/hive:hive-153014">
<FaUsers /> Citizen Journalists
</NavDropdown.Item>
<NavDropdown.Item href="#/community/hive:hive-112355">
<FaUsers /> Threeshorts
</NavDropdown.Item>
<NavDropdown.Item href="#/community/hive:hive-129768">
<FaUsers />
Coronavirus Pandemic
</NavDropdown.Item>
<NavDropdown.Item href="#/community/hive:hive-196427">
<FaUsers /> COVID-19
</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#/leaderboard">
<div className="nav_icons">
<img src={iconLeaderboard} height="12px" />
</div>
Leaderboard
</Nav.Link>
<Nav.Link href="#/newcomers">
<div className="nav_icons">
<img src={iconNewcomer} height="19px" />
</div>
First Uploads
</Nav.Link>
<Nav.Link href="#/uploader">
<div className="nav_icons">
<FaToolbox />
</div>
Uploader
</Nav.Link>
<Nav.Link href="#/creatorstudio">
<div className="nav_icons">
<FaToolbox />
</div>
Creator Studio
</Nav.Link>
<NavDropdown
id="nav-dropdown"
title={
<>
<div className="nav_icons">
<BsFillGearFill style={{ height: '21px' }} />
</div>
Settings
</>
}
>
<Nav.Link href="#/blocklist">
<FaGlobe /> Blocklist
</Nav.Link>
<Nav.Link href="#/pins">
<FaGlobe /> Pins
</Nav.Link>
<Nav.Link href="#/ipfsconsole">
<FaGlobe /> Ipfs Console
</Nav.Link>
</NavDropdown>
</Nav>
<Nav>
<li className="nav-item">
<div className="pad_l">
<h5>3Speak</h5>
</div>
</li>
<li className="nav-item">
<a className="nav-link" href="https://3speak.co/intl/about_us">
About us
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://3speak.co/intl/about_us">
FAQ
</a>
</li>
<li className="nav-item text-center">
<a
className=""
target="_blank"
href="https://twitter.com/3speakonline?utm_source=3speak.co"
>
<FaTwitter size={28} />
</a>
<a className="ml-2" target="_blank" href="https://t.me/threespeak?utm_source=3speak.co">
<FaTelegram size={28} />
</a>
<a
className="ml-2"
target="_blank"
href="https://discord.me/3speak?utm_source=3speak.co"
>
<i className="fab fa-discord text-muted fa-2x"></i>
<FaDiscord size={28} />
</a>
<a
className="ml-2"
target="_blank"
title="Visit Our Blog"
href="https://hive.blog/@threespeak"
>
<img
style={{ width: '32px', marginTop: '-15px', color: 'black' }}
src={iconBlog}
alt=""
/>
</a>
</li>
<Dropdown title="Find us" className="nav-item dropdown mt-2 display-mobile">
<Dropdown.Toggle
className="btn btn-secondary btn-sm dropdown-toggle"
variant="secondary"
data-toggle="dropdown"
aria-haspopup="true"
>
Find us
</Dropdown.Toggle>
<Dropdown.Menu>
<a className="dropdown-item" href="https://t.me/threespeak?utm_source=3speak.co">
Telegram
</a>
<a className="dropdown-item" href="https://discord.me/3speak?utm_source=3speak.co">
Discord
</a>
<a
className="dropdown-item"
target="_blank"
href="https://twitter.com/3speakonline?utm_source=3speak.co"
>
Twitter
</a>
</Dropdown.Menu>
</Dropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
Example #4
| Source File: Navigation.tsx From apps with MIT License | 4 votes |
|
render() {
return (
<>
<Navbar id={"navigation"} bg={"dark"} variant={"dark"} expand={"lg"}>
<Container fluid>
<Navbar.Brand as={Link} to="/" title="Atlas Academy Database">
Atlas Academy DB
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Nav activeKey={this.props.location.pathname}>
<NavPage path="servants" description="Servants" />
<NavPage path="craft-essences" description="Craft Essences" />
<NavPage path="wars" description="Wars" />
<NavDropdown title="Other" id="dropdown-other">
<NavDropdownPage path="command-codes" description="Command Codes" />
<NavDropdownPage path="mystic-codes" description="Mystic Codes" />
<NavDropdownPage path="items" description="Materials" />
<NavDropdownPage path="events" description="Events" />
<NavDropdownPage path="bgms" description="BGMs" />
<NavDropdownPage path="master-missions" description="Master Missions" />
</NavDropdown>
<NavDropdown title="Search" id="dropdown-search">
<NavDropdownPage path="entities" description="Entities" />
<NavDropdownPage path="skills" description="Skills" />
<NavDropdownPage path="noble-phantasms" description="Noble Phantasms" />
<NavDropdownPage path="funcs" description="Functions" />
<NavDropdownPage path="buffs" description="Buffs" />
<NavDropdownPage path="quests" description="Quests" />
<NavDropdownPage path="scripts" description="Scripts" />
</NavDropdown>
<NavDropdown title="Changelog" id="dropdown-search">
<NavDropdownPage path="changes" description="Master Data" />
<NavDropdownPage path="enemy-changes" description="Enemy Data" />
</NavDropdown>
</Nav>
<Nav className={"ml-auto icons"} activeKey="">
<Row>
<Col>
<Link
to={this.regionLink(Region.JP)}
className={`nav-link ${this.regionClass(Region.JP)}`}
>
<JPFlag title="View data from the JP version" />
</Link>
</Col>
<Col>
<Link
to={this.regionLink(Region.NA)}
className={`nav-link ${this.regionClass(Region.NA)}`}
>
<USFlag title="View data from the NA version" />
</Link>
</Col>
<Col>
<Link
to={this.regionLink(Region.CN)}
className={`nav-link ${this.regionClass(Region.CN)}`}
>
<CNFlag title="View data from the CN version" />
</Link>
</Col>
<Col>
<Link
to={this.regionLink(Region.KR)}
className={`nav-link ${this.regionClass(Region.KR)}`}
>
<KRFlag title="View data from the KR version" />
</Link>
</Col>
<Col>
<Link
to={this.regionLink(Region.TW)}
className={`nav-link ${this.regionClass(Region.TW)}`}
>
<TWFlag title="View data from the TW version" />
</Link>
</Col>
</Row>
<Row>
<Col>
<Nav.Link
href="https://atlasacademy.io/discord"
target="_blank"
rel="noreferrer"
>
<FontAwesomeIcon icon={faDiscord} title="Atlas Academy Discord" />
</Nav.Link>
</Col>
<Col>
<Nav.Link
href="https://twitter.com/aacademy_fgo"
target="_blank"
rel="noreferrer"
>
<FontAwesomeIcon icon={faTwitter} title="Atlas Academy Twitter" />
</Nav.Link>
</Col>
<Col>
<Nav.Link
href="https://github.com/atlasacademy/apps"
target="_blank"
rel="noreferrer"
>
<FontAwesomeIcon icon={faGithub} title="Atlas Academy DB Github" />
</Nav.Link>
</Col>
</Row>
<Button variant={"primary"} onClick={() => this.showSettings()}>
<FontAwesomeIcon icon={faCog} title="Settings" />
</Button>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Modal show={this.state.showSettings} onHide={() => this.hideSettings()}>
<Modal.Header>
<Modal.Title>Settings</Modal.Title>
<button className="modal-close" onClick={() => this.hideSettings()}>
<FontAwesomeIcon icon={faXmark} title="Close Settings" />
</button>
</Modal.Header>
<Modal.Body>
<SettingForm language={this.props.language} theme={this.props.theme} />
</Modal.Body>
</Modal>
</>
);
}
Example #5
| Source File: header.component.tsx From cwa-quick-test-frontend with Apache License 2.0 | 4 votes |
|
Header = (props: any) => {
const navigation = useNavigation();
const history = useHistory();
const { t } = useTranslation();
const { keycloak } = useKeycloak();
const [userName, setUserName] = React.useState('');
const [isInit, setIsInit] = React.useState(false)
const [environmentName] = useLocalStorage('environmentName', '');
React.useEffect(() => {
if (navigation)
setIsInit(true);
}, [navigation])
// set user name from keycloak
React.useEffect(() => {
if (keycloak.idTokenParsed) {
setUserName((keycloak.idTokenParsed as any).name);
}
}, [keycloak])
const handleLogout = () => {
keycloak.logout({ redirectUri: window.location.origin + navigation!.calculatedRoutes.landing });
}
const changePasswordUrl = keycloak.authServerUrl + 'realms/' + keycloak.realm + '/account/password';
return (!isInit ? <></> :
<Container className='position-relative'>
{/* simple header with logo */}
{/* user icon and user name */}
<Row id='qt-header'>
<Image id='c19-logo' src={C19Logo} />
<span className='header-font my-auto mx-1 pt-1'>
{t('translation:title')}
{!environmentName
? <></>
: <span className='environment-font my-auto mx-1'>
{'\n' + environmentName}
</span>
}
</span>
{!(environmentName && history.location.pathname === navigation?.routes.root)
? <></>
: < span className='environment-info-text py-3'>
<Trans>
{t('translation:environment-info1')}
{<a
href={t('translation:environment-info-link')}
target='blank'
>
{t('translation:environment-info-link')}
</a>}
{'.'}
</Trans>
</span>
}
</Row>
{/* {!environmentName
? <></>
: <Row id='qt-environment'>
<span className='header-font my-auto mx-1'>
{environmentName}
</span>
</Row>
} */}
<Navbar id='user-container' >
<NavDropdown
className="nav-dropdown-title"
title={userName}
id="responsive-navbar-nav"
>
<Nav.Link
className='mx-0 dropdown-item'
onClick={handleLogout}
>
{t('translation:logout')}
</Nav.Link>
<NavDropdown.Divider className='m-0' />
<Nav.Link className='mx-0 dropdown-item' href={changePasswordUrl} target='passwordchange'>
{t('translation:change-password')}
</Nav.Link>
</NavDropdown>
</Navbar>
</Container >
)
}
