reactstrap#UncontrolledDropdown JavaScript Examples
The following examples show how to use
reactstrap#UncontrolledDropdown.
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: NavMenu.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
render() {
return (
<Navbar className="ui-header" expand="md">
<NavbarBrand className="ui-header-brand">Hexacta Labs</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<UncontrolledDropdown className="ui-header-options" nav inNavbar>
<DropdownToggle caret>
<FaUserInjured />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem
tag={() => (
<Link className="dropdown-item" to="/logout">
Salir
</Link>
)}
/>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
);
}
Example #2
| 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 #3
| Source File: CardHeader.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
return (
<React.Fragment>
<CardBody>
<UncontrolledDropdown className="float-right">
<DropdownToggle tag="i" style={{cursor:"pointer"}} className="arrow-none">
<i className="mdi mdi-dots-vertical m-0 text-muted font-size-20"></i>
</DropdownToggle >
<DropdownMenu right>
<DropdownItem>Edit</DropdownItem>
<DropdownItem>Delete</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<h4 className="card-title">{this.props.title}</h4>
<p className="mb-0">{this.props.columnsubtitle}</p>
</CardBody>
</React.Fragment>
);
}
Example #4
| Source File: Tables.js From covidsos with MIT License | 6 votes |
|
getDropDown(tableConfig, rowData) {
return (
<UncontrolledDropdown>
<DropdownToggle
className="btn-icon-only text-light"
href="#"
role="button"
color=""
onClick={e => e.preventDefault()}>
<i className="fas fa-ellipsis-h"/>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-arrow" right>
{
tableConfig.actions.map(action => {
return (
<DropdownItem href="#" key={action.key + '_' + (rowData.r_id || rowData.v_id)}
onClick={e => {
this.takeAction(action, rowData, tableConfig);
e.preventDefault();
}}>
{action.name}
</DropdownItem>
);
})
}
</DropdownMenu>
</UncontrolledDropdown>
);
}
Example #5
| Source File: Header.jsx From Edlib with GNU General Public License v3.0 | 5 votes |
|
Header = () => {
const { isAuthenticated, user, loginUrl } = React.useContext(authContext);
const { authUrl, logoutRedirectUrl } = React.useContext(configContext);
const [isOpen, setIsOpen] = React.useState(false);
const toggle = () => setIsOpen(!isOpen);
const logoutUrl = `${authUrl}/logout?returnUrl=${logoutRedirectUrl}`;
return (
<div>
<Navbar color="light" light expand="md">
<NavbarBrand tag={Link} to="/">
EdLib Admin
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
{!isAuthenticated && (
<NavItem>
<NavLink href={loginUrl}>Login</NavLink>
</NavItem>
)}
{user && (
<>
<NavItem>
<NavLink tag={Link} to="/system-status">
System status
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
{user.firstName} {user.lastName}
</DropdownToggle>
<DropdownMenu right>
<DropdownItem tag="a" href={logoutUrl}>
Logg ut
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</>
)}
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #6
| Source File: PlotSelector.js From covid19 with MIT License | 5 votes |
|
render() {
const { currentPlotType, currentRegion, lang, data, onPlotTypeChange } = this.props
const plotParameters = plotTypes[currentPlotType]
const currentRegionIsGlobal = currentRegion.length === 1 && currentRegion[0] === str.GLOBAL_ZH
const hasSubregions = Object.keys(getDataFromRegion(data, currentRegion)).length > 4 || currentRegionIsGlobal
return (
<UncontrolledDropdown className="">
<DropdownToggle
tag="span"
className="line-plot-title"
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen}
>
<span>{plotParameters.text[lang]}</span>
<MdArrowDropDownCircle size={20} className="dropdown-arrow" />
</DropdownToggle>
<DropdownMenu
modifiers={{
setMaxHeight: {
enabled: true,
order: 890,
fn: (data) => {
return {
...data,
styles: {
...data.styles,
overflowY: 'auto',
maxHeight: this.state.height * 0.6
}
}
}
}
}}
>
{Object.keys(plotTypes).map(
(plotType) =>
// no One-vs-Rest comparison plot when current region is Global
plotType === 'plot_one_vs_rest' && currentRegionIsGlobal ? (
<div key={`dropdown-${plotType}`} />
) : plotTypes[plotType].subregions && !hasSubregions ? (
<div key={`dropdown-${plotType}`} />
) : (
<Fragment key={`dropdown-${plotType}`}>
{plotType === 'plot_basic' &&
hasSubregions && <DropdownItem header>{i18n.OVERALL[lang]}</DropdownItem>}
{plotType === 'plot_ranking' && hasSubregions && <DropdownItem divider />}
{plotType === 'plot_ranking' &&
hasSubregions && <DropdownItem header>{i18n.SUBREGIONS[lang]}</DropdownItem>}
<DropdownItem
className={currentPlotType === plotType ? 'current' : ''}
onClick={() => {
onPlotTypeChange(plotType)
this.setState({
dropdownOpen: !this.state.dropdownOpen
})
}}
>
{plotTypes[plotType].text[lang]}
</DropdownItem>
</Fragment>
)
)}
</DropdownMenu>
</UncontrolledDropdown>
)
}
Example #7
| Source File: NavBar.js From covid19 with MIT License | 5 votes |
|
render() {
const { scale, lang, darkMode, languageToggle } = this.props
return (
<div className="nav-bar">
<UncontrolledDropdown>
<DropdownToggle
tag="div"
className="nav-bar-icon"
data-toggle="dropdown"
data-tip={i18n.LANGUAGE_HELP_TEXT[lang]}
>
{i18n.LANGUAGE[lang]}
</DropdownToggle>
<DropdownMenu>
{Object.keys(i18n.LANGUAGE).map((x) => (
<DropdownItem
key={x}
className={x === lang ? 'current' : ''}
onClick={() => languageToggle(x)}
>
{i18n.LANGUAGE[x]}
</DropdownItem>
))}
</DropdownMenu>
</UncontrolledDropdown>
{isMobile || isIPad13 ? (
<div className="nav-bar-icon" onTouchStart={this.props.darkModeToggle}>
{darkMode ? i18n.DARK[lang] : i18n.LIGHT[lang]}
</div>
) : (
<div
className="nav-bar-icon"
data-tip={darkMode ? i18n.LIGHT_MODE_HELP_TEXT[lang] : i18n.DARK_MODE_HELP_TEXT[lang]}
onClick={this.props.darkModeToggle}
onMouseEnter={() =>
this.setState({
darkModeText: darkMode ? i18n.LIGHT[lang] : i18n.DARK[lang]
})}
onMouseLeave={this.setTexts}
>
{this.state.darkModeText}
</div>
)}
{isMobile || isIPad13 ? (
<div className="nav-bar-icon" onTouchStart={this.onScaleChange}>
{scale === 'linear' ? i18n.LINEAR_SCALE[lang] : i18n.LOG_SCALE[lang]}
</div>
) : (
<div
className="nav-bar-icon"
data-tip={
scale === 'linear' ? i18n.LOG_SCALE_HELP_TEXT[lang] : i18n.LINEAR_SCALE_HELP_TEXT[lang]
}
onClick={this.onScaleChange}
onMouseEnter={() =>
this.setState({
scaleText: scale === 'linear' ? i18n.LOG_SCALE[lang] : i18n.LINEAR_SCALE[lang]
})}
onMouseLeave={this.setTexts}
>
{this.state.scaleText}
</div>
)}
<div className="nav-bar-icon" data-tip={i18n.RESET_HELP_TEXT[lang]} onClick={this.props.reset}>
{i18n.RESET[lang]}
</div>
</div>
)
}
Example #8
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
const { isOpen, isOpenToggler } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Navbar</strong>
</h5>
<div className="mb-5">
<Navbar color="light" expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Option 1</DropdownItem>
<DropdownItem>Option 2</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
<h5 className="mb-4">
<strong>Navbar Toggler</strong>
</h5>
<div className="mb-5">
<Navbar color="faded">
<NavbarBrand href="/" className="mr-auto">
reactstrap
</NavbarBrand>
<NavbarToggler onClick={this.toggleToggler} className="mr-2" />
<Collapse isOpen={!isOpenToggler} navbar>
<Nav navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
</div>
)
}
Example #9
| Source File: DefaultHeader.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
// eslint-disable-next-line
const { children, ...attributes } = this.props;
return (
<React.Fragment>
<AppSidebarToggler className="d-lg-none" display="md" mobile />
<AppNavbarBrand
full={{ src: logo, width: 89, height: 25, alt: 'CoreUI Logo' }}
minimized={{ src: sygnet, width: 30, height: 30, alt: 'CoreUI Logo' }}
/>
<AppSidebarToggler className="d-md-down-none" display="lg" />
{/* <Nav className="d-md-down-none" navbar>
<NavItem className="px-3">
<NavLink to="/dashboard" className="nav-link" >Dashboard</NavLink>
</NavItem>
<NavItem className="px-3">
<Link to="/users" className="nav-link">Users</Link>
</NavItem>
<NavItem className="px-3">
<NavLink to="#" className="nav-link">Settings</NavLink>
</NavItem>
</Nav> */}
<Nav className="ml-auto" navbar>
{/* <NavItem className="d-md-down-none">
<NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
</NavItem> */}
{/* <NavItem className="d-md-down-none">
<NavLink to="#" className="nav-link"><i className="icon-list"></i></NavLink>
</NavItem> */}
{/* <NavItem className="d-md-down-none">
<NavLink to="#" className="nav-link"><i className="icon-location-pin"></i></NavLink>
</NavItem> */}
<UncontrolledDropdown nav direction="down">
<DropdownToggle nav>
<img src={'../../assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
</DropdownToggle>
<DropdownMenu right>
{/* <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem> */}
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
{/* <DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem> */}
{/* <DropdownItem divider />
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem> */}
<DropdownItem onClick={this.handleLogout}><i className="fa fa-lock"></i> Logout</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
{/* <AppAsideToggler className="d-md-down-none" /> */}
{/*<AppAsideToggler className="d-lg-none" mobile />*/}
</React.Fragment>
);
}
Example #10
| Source File: Navbars.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Navbar color="info" light expand="md">
<NavbarBrand href="/">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap" target="_blank">Github</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
{/*Warning: React does not recognize the `inNavbar` prop on a DOM element.*/}
{/*waiting for [email protected]*/}
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar Toggler</strong>
</CardHeader>
<CardBody>
<Navbar color="success" light>
<NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
</div>
);
}
Example #11
| Source File: UserDropDown.js From covidsos with MIT License | 5 votes |
|
render() {
const {className, dropDownToggleClassName} = this.props;
const loggedIn = isLoggedIn();
const username = (loggedIn && localStorage.getItem(config.fullNameStorageKey)) || 'Login';
return (
<Nav className={className} navbar>
<UncontrolledDropdown nav>
<DropdownToggle className={dropDownToggleClassName} nav>
<Media className="align-items-center">
<span className="avatar avatar-sm rounded-circle">
<i className="fas fa-user"/>
</span>
<Media className="ml-2 d-none d-lg-block">
<span className="mb-0 text-sm font-weight-bold">
{username}
</span>
</Media>
</Media>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-arrow" right>
{loggedIn ?
<>
<DropdownItem href="#" onClick={e => {
localStorage.clear();
e.preventDefault();
this.props.history.push("/");
}}>
<i className="ni ni-user-run"/>
<span>Logout</span>
</DropdownItem>
</>
:
<>
<DropdownItem href="#" onClick={() => this.props.history.push("/login")}>
<i className="fas fa-user"/>
<span>Volunteer</span>
</DropdownItem>
<DropdownItem href="#" onClick={() => this.props.history.push("/admin-login")}>
<i className="fas fa-users"/>
<span>Admin</span>
</DropdownItem>
</>
}
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
)
;
}
Example #12
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { activeTab } = this.state
return (
<div>
<div className="row">
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>No Bottom Border</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-noborder">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold with Icons</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
<i className="fe fe-activity mr-1" />
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
<i className="fe fe-clock mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
<i className="fe fe-trash mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>
<i className="fe fe-plus-circle" />
Disabled
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold with Dropdown</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Tabs</strong>
</h5>
<div className="mb-5">
<Nav tabs>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Justified Pills</strong>
</h5>
<div className="mb-5">
<Nav pills justified>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills with Icons</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
<i className="fe fe-activity mr-1" />
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
<i className="fe fe-clock mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
<i className="fe fe-trash mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>
<i className="fe fe-plus-circle" />
Disabled
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills with Dropdown</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-12">
<h5 className="mb-4">
<strong>Vertical Pills</strong>
</h5>
<div className="mb-5">
<div className="row">
<div className="col-3">
<Nav pills vertical>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Messages
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</div>
<div className="col-9">
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
<TabPane tabId="2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
When an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
<TabPane tabId="3">
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
</TabContent>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #13
| Source File: Navbars.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<section>
<Container>
{/* Navigation */}
<h2 className="mb-5">
<span>Navbars</span>
</h2>
</Container>
{/* Navbar default */}
<Navbar className="navbar-dark bg-default" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Default Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-default">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-default">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-default">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Discover
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-notification-70" />
<span className="nav-link-inner--text d-lg-none">
Profile
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-default_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar primary */}
<Navbar className="navbar-dark bg-primary mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Primary Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-primary">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-primary">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-primary">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Discover <span className="sr-only">(current)</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Profile
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav>Settings</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-primary_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar success */}
<Navbar className="navbar-dark bg-success mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Success Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-success">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-success">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-success">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Favorites
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-planet" />
<span className="nav-link-inner--text d-lg-none">
Another action
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-success_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar danger */}
<Navbar className="navbar-dark bg-danger mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Danger Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-danger">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-danger">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-danger">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none">
Facebook
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
<span className="nav-link-inner--text d-lg-none">
Twitter
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-google-plus" />
<span className="nav-link-inner--text d-lg-none">
Google +
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none">
Instagram
</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar warning */}
<Navbar className="navbar-dark bg-warning mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Warning Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-warning">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-warning">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-warning">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none">
Share
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
<span className="nav-link-inner--text d-lg-none">
Tweet
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-pinterest" />
<span className="nav-link-inner--text d-lg-none">
Pin
</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar info */}
<Navbar className="navbar-dark bg-info mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Info Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-info">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-info">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-info">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square mr-1" />
<span className="nav-link-inner--text">Facebook</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter mr-1" />
<span className="nav-link-inner--text">Twitter</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-instagram mr-1" />
<span className="nav-link-inner--text">Instagram</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</section>
</>
);
}
Example #14
| Source File: Menus.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<Row className="justify-content-center mt-md">
<Col lg="12">
{/* Menu */}
<h3 className="h4 text-success font-weight-bold mb-4">Menu</h3>
<Row>
<Col lg="6">
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
With text
</small>
</div>
<Navbar className="navbar-dark bg-primary rounded" expand="lg">
<Container>
<NavbarBrand
href="#pablo"
onClick={e => e.preventDefault()}
>
Menu
</NavbarBrand>
<button className="navbar-toggler" id="nav-inner-primary">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#nav-inner-primary">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
id="nav-inner-primary"
type="button"
>
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
href="#pablo"
onClick={e => e.preventDefault()}
>
Discover <span className="sr-only">(current)</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="#pablo"
onClick={e => e.preventDefault()}
>
Profile
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav>Settings</DropdownToggle>
<DropdownMenu
aria-labelledby="nav-inner-primary_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</Col>
<Col className="mt-4 mt-lg-0" lg="6">
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
With icons
</small>
</div>
<Navbar className="navbar-dark bg-success rounded" expand="lg">
<Container>
<NavbarBrand
href="#pablo"
onClick={e => e.preventDefault()}
>
Menu
</NavbarBrand>
<button className="navbar-toggler" id="nav-inner-success">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#nav-inner-success">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
id="nav-inner-success"
>
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Discover
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-notification-70" />
<span className="nav-link-inner--text d-lg-none">
Profile
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="nav-inner-success_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</Col>
</Row>
</Col>
</Row>
</>
);
}
Example #15
| Source File: DemoNavbar.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<header className="header-global">
<Navbar
className="navbar-main navbar-transparent navbar-light headroom"
expand="lg"
id="navbar-main"
>
<Container>
<NavbarBrand className="mr-lg-5" to="/" tag={Link}>
<img
alt="..."
src={require("../../assets//img/brand/argon-react-white.png")}
/>
</NavbarBrand>
<button className="navbar-toggler" id="navbar_global">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar_global">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("../../assets//img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar_global">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="navbar-nav-hover align-items-lg-center" navbar>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-ui-04 d-lg-none mr-1" />
<span className="nav-link-inner--text">Components</span>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-xl">
<div className="dropdown-menu-inner">
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/overview?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-primary rounded-circle text-white">
<i className="ni ni-spaceship" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Getting started
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn how to use Argon compiling Scss, change
brand colors and more.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/colors?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-palette" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Foundation
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn more about colors, typography, icons and the
grid system we used for Argon.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alert?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-ui-04" />
</div>
<Media body className="ml-3">
<h5 className="heading text-warning mb-md-1">
Components
</h5>
<p className="description d-none d-md-inline-block mb-0">
Browse our 50 beautiful handcrafted components
offered in the Free version.
</p>
</Media>
</Media>
</div>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-collection d-lg-none mr-1" />
<span className="nav-link-inner--text">Examples</span>
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/" tag={Link}>
Landing
</DropdownItem>
<DropdownItem to="/profile" tag={Link}>
Profile
</DropdownItem>
<DropdownItem to="/login" tag={Link}>
Login
</DropdownItem>
<DropdownItem to="/addpost" tag={Link}>
Add Post
</DropdownItem>
<DropdownItem to="/posts" tag={Link}>
List Posts
</DropdownItem>
<DropdownItem to="/register" tag={Link}>
Register
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.facebook.com/creativetim"
id="tooltip333589074"
target="_blank"
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Facebook
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip333589074">
Like us on Facebook
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.instagram.com/creativetimofficial"
id="tooltip356693867"
target="_blank"
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none ml-2">
Instagram
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip356693867">
Follow us on Instagram
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://twitter.com/creativetim"
id="tooltip184698705"
target="_blank"
>
<i className="fa fa-twitter-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Twitter
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip184698705">
Follow us on Twitter
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://github.com/creativetimofficial/argon-design-system-react"
id="tooltip112445449"
target="_blank"
>
<i className="fa fa-github" />
<span className="nav-link-inner--text d-lg-none ml-2">
Github
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip112445449">
Star us on Github
</UncontrolledTooltip>
</NavItem>
<NavItem className="d-none d-lg-block ml-lg-4">
<Button
className="btn-neutral btn-icon"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-navbar"
target="_blank"
>
<span className="btn-inner--icon">
<i className="fa fa-cloud-download mr-2" />
</span>
<span className="nav-link-inner--text ml-1">
Download
</span>
</Button>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</header>
</>
);
}
Example #16
| Source File: MapNavBar.js From covid19 with MIT License | 4 votes |
|
render() {
const { lang, metric, currentMap, fullPlot, fullTree, plotType } = this.props
return (
<div className={`map-nav-bar-wrap ${fullPlot && !plotTypes[plotType].metricChange ? 'grey-out' : ''}`}>
<ul className="map-nav-bar">
{[ 'confirmedCount', 'deadCount', 'curedCount' ].map((count) => (
<li key={`map-nav-${count}`} className={count === metric ? 'current' : ''}>
<div value={count} onClick={this.metricToggle}>
{metricText[count][lang]}
</div>
</li>
))}
</ul>
{!fullPlot &&
!fullTree && (
<UncontrolledDropdown className="map-toggle">
<DropdownToggle
className="map-toggle-button"
tag="span"
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen}
>
<FiMap size={14} style={{ marginRight: 10 }} />
<span>{mapText[currentMap].title[lang]}</span>
</DropdownToggle>
<DropdownMenu
modifiers={{
setMaxHeight: {
enabled: true,
order: 890,
fn: (data) => {
return {
...data,
styles: {
...data.styles,
overflowY: 'auto',
maxHeight: this.state.height * 0.5
}
}
}
}
}}
>
{[
'Global',
'Asia',
'Europe',
'North America',
'South America',
'Oceania',
'Africa',
null
].map((continent) =>
Object.keys(mapText)
.filter(
(map) =>
mapText[map].continent === continent ||
(mapText[map].continent && mapText[map].continent['en'] === continent)
)
.map((map, idx) => {
return (
<Fragment key={`map-${idx}`}>
{map === str.TRANSMISSION ? <DropdownItem divider /> : <div />}
{idx === 0 && continent != null && continent !== 'Global' ? (
<Fragment>
<DropdownItem divider />
<DropdownItem header>
{mapText[map].continent[lang]}
</DropdownItem>
</Fragment>
) : (
<div />
)}
<DropdownItem
className={currentMap === map ? 'current' : ''}
onClick={() => this.mapToggle(map)}
>
{map !== str.TRANSMISSION && (
<span
className={`flag-icon ${mapText[map].flagCode
? 'flag-icon-' + mapText[map].flagCode
: ''}`}
/>
)}
{mapText[map].title[lang]}
</DropdownItem>
</Fragment>
)
})
)}
</DropdownMenu>
</UncontrolledDropdown>
)}
</div>
)
}
Example #17
| Source File: Dropdowns.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/dropdowns/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[0]} toggle={() => {
this.toggle(0);
}}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<small> alignment</small>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
<DropdownToggle caret>
This dropdown's menu is right-aligned
</DropdownToggle>
<DropdownMenu right style={{right: 'auto'}}>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<small> sizing</small>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[2]} toggle={() => {this.toggle(2);}} size="lg" className="mb-3">
<DropdownToggle caret>
Large Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={this.state.dropdownOpen[3]} toggle={() => {this.toggle(3);}} className="mb-3">
<DropdownToggle caret>
Normal Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={this.state.dropdownOpen[4]} toggle={() => {this.toggle(4);}} size="sm">
<DropdownToggle caret>
Small Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Custom Dropdowns</strong>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5);}}>
<DropdownToggle
tag="span"
onClick={() => {this.toggle(5);}}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen[5]}
>
Custom Dropdown Content <strong> * </strong>
</DropdownToggle>
<DropdownMenu>
<div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 1</div>
<div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 2</div>
<div className="dropdown-item-text" onClick={() => {this.toggle(5);}}>Custom dropdown text 3</div>
<hr className="my-0 dropdown-item-text" />
<div onClick={() => {this.toggle(5);}}>Custom dropdown item 4</div>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Uncontrolled Dropdown</strong>
</CardHeader>
<CardBody>
<UncontrolledDropdown>
<DropdownToggle caret>
Uncontrolled Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #18
| Source File: ExamplesNavbar.js From Website2020 with MIT License | 4 votes |
|
function ExamplesNavbar(props) {
const [navbarColor, setNavbarColor] = React.useState("navbar-transparent");
const [navbarCollapse, setNavbarCollapse] = React.useState(false);
const toggleNavbarCollapse = () => {
setNavbarCollapse(!navbarCollapse);
document.documentElement.classList.toggle("nav-open");
};
const [scrolled, setScrolled] = React.useState(false);
const handleScroll = () => {
const offset = window.scrollY;
if (offset > 850) {
setScrolled(true);
}
else {
setScrolled(false);
}
}
React.useEffect(() => {
window.addEventListener('scroll', handleScroll)
})
let x = ['navbar', 'custom-navbar-auv'];
if (props.page == "landing-page") {
if (scrolled) {
x.push('scrolled');
}
}
else x.push('scrolled');
return (
<div className={x.join(" ")} >
<Navbar
color-on-scroll="300"
expand="lg"
className="custom-navbar-auv"
>
<Container className="navbar-container">
<div className="navbar-translate">
<NavbarBrand
data-placement="bottom"
to="/index"
title="Coded by Creative Tim"
tag={Link}
style={{ marginLeft: "20px", padding: "0 0" }}
>
<img className="minilogo w-100" src={auvlogomini} alt="logo" />
</NavbarBrand>
<button
aria-expanded={navbarCollapse}
className={classnames("navbar-toggler navbar-toggler u-margin-zero", {
toggled: navbarCollapse,
})}
onClick={toggleNavbarCollapse}
>
<span className="navbar-toggler-bar bar1" />
<span className="navbar-toggler-bar bar2" />
<span className="navbar-toggler-bar bar3" />
</button>
</div>
<Collapse
className=" justify-content-end"
navbar
isOpen={navbarCollapse}
>
<Nav navbar className=" mr-5 navigation">
<NavItem>
<NavLink className={props.activePage === "/landing-page" ? "navbar-content active" : "navbar-content"} to="/landing-page" tag={Link} onClick={toggleNavbarCollapse}>Home
</NavLink>
</NavItem>
<NavItem>
<NavLink className={props.activePage === "/about-us" ? "navbar-content active" : "navbar-content"} to="/about-us" tag={Link} onClick={toggleNavbarCollapse}>
About Us
</NavLink>
</NavItem>
<NavItem>
<NavLink className={props.activePage === "/team" ? "navbar-content active" : "navbar-content"} to="/team" tag={Link} onClick={toggleNavbarCollapse}>
Team
</NavLink>
</NavItem>
<NavItem>
<NavLink className={props.activePage === "/events" ? "navbar-content active" : "navbar-content"} to="/events" tag={Link} onClick={toggleNavbarCollapse} onClick={toggleNavbarCollapse}>
Events
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle
aria-expanded={false}
aria-haspopup={true}
caret
color="black"
data-toggle="dropdown"
href="#pablo"
id="dropdownMenuButton"
nav
onClick={e => e.preventDefault()}
role="button"
style={{ textAlign: 'center' }}
className={props.activePage === "/vehicles/anahita" || props.activePage === "/vehicles/varun" ? "navbar-content active" : "navbar-content"}
>
Vehicles
</DropdownToggle>
<DropdownMenu
aria-labelledby="dropdownMenuButton"
className="dropdown-info ml-auto mr-auto"
style={{ borderRadius: "0", textAlign: "center" }}
>
<Link to='/vehicles/tarang'>
<DropdownItem
style={{ textAlign: "center" }}
className="auv-dropdown"
onClick={toggleNavbarCollapse}
>
Tarang
</DropdownItem>
</Link>
<Link to='/vehicles/anahita'>
<DropdownItem
style={{ textAlign: "center" }}
className=" auv-dropdown"
onClick={toggleNavbarCollapse}
>
Anahita
</DropdownItem>
</Link>
<Link to='/vehicles/varun'>
<DropdownItem
style={{ textAlign: "center" }}
className="auv-dropdown"
onClick={toggleNavbarCollapse}
>
Varun
</DropdownItem>
</Link>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink className={props.activePage === "/blogs" ? "navbar-content active" : "navbar-content"} to="/blogs" tag={Link}>
Blogs
</NavLink>
</NavItem>
<NavItem>
<NavLink className={props.activePage === "/contact-us" ? "navbar-content active" : "navbar-content"} to="/contact-us" tag={Link}>
Contact Us
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.facebook.com/auviitk"
target="_blank"
title="Like us on Facebook"
style={{ textAlign: "center", color: "white" }}
>
<i className="fa fa-facebook-square nav-social" />
<p className="d-lg-none" style={{ color: "white" }}>Facebook</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://github.com/AUV-IITK"
target="_blank"
title="Star on GitHub"
style={{ textAlign: "center", color: "white" }}
>
<i className="fa fa-github nav-social" />
<p className="d-lg-none" style={{ color: "white" }} >GitHub</p>
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
</div>
);
}
Example #19
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div className="row">
<div className="col-lg-12 mb-5">
<h5 className="mb-4">
<strong>Default Group</strong>
</h5>
<ButtonGroup className="mr-2 mb-2">
<Button color="" className="btn btn-success">
Left
</Button>
<Button color="" className="btn btn-success">
Middle
</Button>
<Button color="" className="btn btn-success">
Right
</Button>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2">
<Button color="white" className="btn btn-rounded">
Left
</Button>
<Button color="white">Middle</Button>
<Button color="danger" className="btn btn-rounded">
Right
</Button>
</ButtonGroup>
</div>
<div className="col-lg-12 mb-5">
<h5 className="mb-4">
<strong>Nesting Group</strong>
</h5>
<ButtonGroup className="mr-2 mb-2">
<Button color="primary">1</Button>
<Button color="primary">2</Button>
<UncontrolledDropdown>
<DropdownToggle color="light" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2">
<Button color="light">1</Button>
<Button color="light">2</Button>
<UncontrolledDropdown>
<DropdownToggle color="light" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</ButtonGroup>
</div>
<div className="col-lg-12 mb-3">
<h5 className="mb-4">
<strong>Vertical Group</strong>
</h5>
<div className="btn-group-vertical mr-2 mb-2">
<Button className="btn btn-danger">Button</Button>
<div className="btn-group">
<Button color="danger">Dropdown</Button>
<div className="dropdown-menu">
<a className="dropdown-item" href="">
Action
</a>
<a className="dropdown-item" href="">
Another action
</a>
<a className="dropdown-item" href="">
Something else here
</a>
<div className="dropdown-divider" />
<a className="dropdown-item" href="">
Separated link
</a>
</div>
</div>
<Button className="btn btn-danger">Button</Button>
<div className="btn-group">
<Button color="danger">Dropdown</Button>
<div className="dropdown-menu">
<a className="dropdown-item" href="">
Action
</a>
<a className="dropdown-item" href="">
Another action
</a>
<a className="dropdown-item" href="">
Something else here
</a>
<div className="dropdown-divider" />
<a className="dropdown-item" href="">
Separated link
</a>
</div>
</div>
</div>
<ButtonGroup vertical>
<UncontrolledDropdown>
<DropdownToggle color="light" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Button color="light">Button</Button>
<Button color="primary">Button</Button>
<Button color="light">Button</Button>
</ButtonGroup>
</div>
</div>
)
}
Example #20
| Source File: Dashboard.js From sofia-react-template with MIT License | 4 votes |
|
Dashboard = () => {
const [checkboxes, setCheckboxes] = useState([true, false])
const toggleCheckbox = (id) => {
setCheckboxes(checkboxes => checkboxes
.map((checkbox, index) => index === id ? !checkbox : checkbox ))
}
const meals = [meal1, meal2, meal3];
return (
<div>
<Row>
<Col className="pr-grid-col" xs={12} lg={8}>
<Row className="gutter mb-4">
<Col className="mb-4 mb-md-0" xs={12} md={6}>
<Widget className="">
<div className="d-flex justify-content-between widget-p-md">
<div className="headline-3 d-flex align-items-center">Your activity</div>
<UncontrolledDropdown>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</div>
<ApexActivityChart className="pb-4"/>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget className="widget-p-md">
<div className="d-flex justify-content-between">
<div className="headline-3 d-flex align-items-center">Your meals</div>
<UncontrolledDropdown>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</div>
{meals.map((meal) =>
<div key={uuidv4()} className={`mt-4 ${s.widgetBlock}`}>
<div className={s.widgetBody}>
<div className="d-flex">
<img className="img-fluid mr-2" src={meal} alt="..." />
<div className="d-flex flex-column">
<p className="body-2">Salmon salad</p>
<p className="body-3 muted">300 g</p>
</div>
</div>
<div className="body-3 muted">
175 cal
</div>
</div>
</div>
)}
</Widget>
</Col>
</Row>
<Row className="gutter mb-4">
<Col xs={12}>
<Widget className="widget-p-none">
<div className="d-flex flex-wrap align-items-center justify-content-center">
<div className="d-flex flex-column align-items-center col-12 col-xl-6 p-sm-4">
<p className="headline-1">Upgrade your plan</p>
<p className="body-3">So how did the classical Latin become so </p>
<div className="d-flex justify-content-between my-4">
<Button className="rounded-pill mr-3" color="primary">Go Premium</Button>
<Button className="rounded-pill body-3" outline color="dark">Try for free</Button>
</div>
</div>
<div className="d-flex justify-content-center col-12 col-xl-6">
<img className="p-1 img-fluid" src={upgradeImage} alt="..." />
</div>
</div>
</Widget>
</Col>
</Row>
<Row className="gutter">
<Col className="mb-4 mb-xl-0" xs={6} sm={6} xl={3}>
<Widget className="widget-p-sm">
<div className={s.smallWidget}>
<div className="d-flex mb-4">
<img className="py-1 mr-2 img-fluid" src={heartRed} alt="..." />
<div className="d-flex flex-column">
<p className="headline-3">Text</p>
<p className="body-2">Num<span className="body-3 muted">/ ber</span></p>
</div>
</div>
<div>
<Progress color="secondary-red" className={`progress-xs ${s.mutedPink}`} value="75" />
</div>
</div>
</Widget>
</Col>
<Col className="mb-4 mb-xl-0" xs={6} sm={6} xl={3}>
<Widget className="widget-p-sm">
<div className={s.smallWidget}>
<div className="d-flex mb-4">
<img className="py-1 mr-2 img-fluid" src={heartYellow} alt="..." />
<div className="d-flex flex-column">
<p className="headline-3">Text</p>
<p className="body-2">Num<span className="body-3 muted">/ ber</span></p>
</div>
</div>
<div>
<Progress color="secondary-yellow" className={`progress-xs ${s.mutedYellow}`} value="75" />
</div>
</div>
</Widget>
</Col>
<Col xs={6} sm={6} xl={3}>
<Widget className="widget-p-sm">
<div className={s.smallWidget}>
<div className="d-flex mb-4">
<img className="py-1 mr-2 img-fluid" src={heartTeal} alt="..." />
<div className="d-flex flex-column">
<p className="headline-3">Text</p>
<p className="body-2">Num<span className="body-3 muted">/ ber</span></p>
</div>
</div>
<div>
<Progress color="secondary-cyan" className={`progress-xs ${s.mutedTeal}`} value="75" />
</div>
</div>
</Widget>
</Col>
<Col xs={6} sm={6} xl={3}>
<Widget className="widget-p-sm">
<div className={s.smallWidget}>
<div className="d-flex mb-4">
<img className="py-1 mr-2 img-fluid" src={heartViolet} alt="..." />
<div className="d-flex flex-column">
<p className="headline-3">Text</p>
<p className="body-2">Num<span className="body-3 muted">/ ber</span></p>
</div>
</div>
<div>
<Progress color="violet" className={`progress-xs ${s.mutedViolet}`} value="75" />
</div>
</div>
</Widget>
</Col>
</Row>
</Col>
<Col className="mt-4 mt-lg-0 pl-grid-col" xs={12} lg={4}>
<Widget className="widget-p-lg">
<div className="d-flex">
<img className={s.image} src={user} alt="..." />
<div className={s.userInfo}>
<p className="headline-3">Christina Karey</p>
<p className="body-3 muted">Brasil</p>
</div>
</div>
<div className={s.userParams}>
<div className="d-flex flex-column">
<p className="headline-3">63 kg</p>
<p className="body-3 muted">Weight</p>
</div>
<div className="d-flex flex-column">
<p className="headline-3">175 sm</p>
<p className="body-3 muted">Height</p>
</div>
<div className="d-flex flex-column">
<p className="headline-3">28 y.</p>
<p className="body-3 muted">Age</p>
</div>
</div>
<div className={s.goals}>
<div className={s.goalsTitle}>
<p className="headline-3">Your Goals</p>
<UncontrolledDropdown>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</div>
<div className="d-flex flex-column mt-3">
<div className={s.activity}>
<p className="body-2">Sleep</p>
<p className="body-2">92<span className="body-3 muted"> / 160</span></p>
</div>
<Progress color="secondary-red" className="progress-xs" value={60} />
</div>
<div className="d-flex flex-column mt-3">
<div className={s.activity}>
<p className="body-2">Sport</p>
<p className="body-2">40<span className="body-3 muted"> / 50</span></p>
</div>
<Progress color="secondary-yellow" className="progress-xs" value={80} />
</div>
<div className="d-flex flex-column mt-3">
<div className={s.activity}>
<p className="body-2">Water</p>
<p className="body-2">25<span className="body-3 muted"> / 40</span></p>
</div>
<Progress color="secondary-cyan" className="progress-xs" value={40} />
</div>
</div>
<p className="headline-3">Appointments</p>
<div className={`mt-3 ${s.widgetBlock}`}>
<div className={s.widgetBody}>
<div className="d-flex">
<img className="img-fluid mr-2" src={gymIcon} alt="..." />
<div className="d-flex flex-column">
<p className="body-2">02.11 , 12:00 - 13:00</p>
<p className="body-3 muted">Yoga, Airplace Gym</p>
</div>
</div>
<div className="checkbox checkbox-primary">
<input
id="checkbox0"
type="checkbox"
className="styled"
checked={checkboxes[0]}
onChange={() => toggleCheckbox(0)}
/>
<label htmlFor="checkbox0" />
</div>
</div>
</div>
<div className={`mt-3 ${s.widgetBlock}`}>
<div className={s.widgetBody}>
<div className="d-flex">
<img className="img-fluid mr-2" src={therapyIcon} alt="..." />
<div className="d-flex flex-column">
<p className="body-2">03.11 , 16:00 - 17:30</p>
<p className="body-3 muted">Therapy</p>
</div>
</div>
<div className="checkbox checkbox-primary">
<input
id="checkbox1"
type="checkbox"
className="styled"
checked={checkboxes[1]}
onChange={() => toggleCheckbox(1)}
/>
<label htmlFor="checkbox1" />
</div>
</div>
</div>
<a className={`btn-secondary-red ${s.statsBtn}`} href="#top" role="button">
<img className={s.pieImg} src={statsPie} alt="..." />
<div>
<p className="headline-2">STATISTIC</p>
<p className="body-3">Download your activity</p>
</div>
</a>
</Widget>
</Col>
</Row>
</div>
)
}
Example #21
| Source File: Widget.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
const {
title,
className,
children,
close,
fullscreen,
collapse,
refresh,
settings,
settingsInverse,
tooltipPlacement,
showTooltip,
bodyClass,
customControls,
customClose,
customExpand,
customCollapse,
customFullscreen,
customReload,
fetchingData,
customDropDown,
customBody,
prompt,
collapsed,
widgetType,
updateWidgetData,
options, //eslint-disable-line
...attributes
} = this.props;
const mainControls = !!(close || fullscreen || collapse || refresh || settings || settingsInverse);
const {
reloading,
fullscreened,
randomId,
height,
hideWidget,
collapseWidget,
modal,
} = this.state;
return (
<React.Fragment>
<section
style={{display: hideWidget ? 'none' : ''}}
className={
classNames('widget', {'fullscreened' : !!fullscreened, 'collapsed' : !!collapseWidget}, s.widget, className, (reloading || fetchingData) ? s.reloading : '')
} {...attributes}
>
{
title && (
typeof title === 'string'
? <h5 className={s.title}>{title}</h5>
: <header className={s.title}>{title}</header>
)
}
{
!customControls && mainControls && (
<div className={`${s.widgetControls} widget-controls`}>
{settings && (
<button><i className="la la-cog" /></button>
)}
{settingsInverse && (
<button className={`bg-gray-transparent ${s.inverse}`}><i
className="la la-cog text-white"
/></button>
)}
{refresh && (
<button onClick={this.handleReload} id={`reloadId-${randomId}`}>
{typeof refresh === 'string' ?
<strong className="text-gray-light">{refresh}</strong> :
<i className="la la-refresh" />}
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`reloadId-${randomId}`}
>Reload</UncontrolledTooltip>
)}
</button>
)}
{fullscreen && (
<button onClick={this.handleFullscreen} id={`fullscreenId-${randomId}`}>
<i className={`glyphicon glyphicon-resize-${fullscreened ? 'small' : 'full'}`} />
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`fullscreenId-${randomId}`}
>Fullscreen</UncontrolledTooltip>
)}
</button>
)}
{!fullscreened &&
collapse && (
<span>
<button onClick={this.handleCollapse} id={`collapseId-${randomId}`}>
<i className={`la la-angle-${!collapseWidget ? 'down' : 'up'}`} />
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`collapseId-${randomId}`}
>Collapse</UncontrolledTooltip>
)}
</button>
</span>
)
}
{!fullscreened && (
(close && !prompt) ? (
<button onClick={this.handleClose} id={`closeId-${randomId}`}>
{typeof close === 'string' ?
<strong className="text-gray-light">{close}</strong> :
<i className="la la-remove" />}
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`closeId-${randomId}`}
>Close</UncontrolledTooltip>
)}
</button>
) : (
<button onClick={this.toggleModal} id={`closeId-${randomId}`}>
{typeof close === 'string' ?
<strong className="text-gray-light">{close}</strong> :
<i className="la la-remove" />}
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`closeId-${randomId}`}
>Modal</UncontrolledTooltip>
)}
</button>
))}
</div>
)}
{customDropDown && (
<div className={`${s.widgetControls} widget-controls`}>
<UncontrolledDropdown>
<DropdownToggle
tag="span"
data-toggle="dropdown"
>
<i className="glyphicon glyphicon-cog" />
</DropdownToggle>
<DropdownMenu className="bg-widget-transparent" right>
<DropdownItem onClick={this.handleReload} title="Reload">
Reload
<span className="badge badge-pill badge-success animate__animated animate__bounceIn">
<strong>9</strong>
</span>
</DropdownItem>
<DropdownItem onClick={this.handleFullscreen} title={!fullscreened ? "Full Screen" : "Restore"}>{!fullscreened ? "Fullscreen" : "Restore"} </DropdownItem>
<DropdownItem divider />
{!fullscreened && (!prompt ? <DropdownItem onClick={this.handleClose} title="Close">Close</DropdownItem>
: <DropdownItem onClick={this.toggleModal} title="Close">Close</DropdownItem>)}
</DropdownMenu>
</UncontrolledDropdown>
</div>
)}
{
customControls && (
<div className={`${s.widgetControls} widget-controls`}>
{!fullscreened && ((customClose && !prompt) ? (
<button onClick={this.handleClose} id={`closeId-${randomId}`} className={s.customControlItem}><i title="Close" className="glyphicon glyphicon-remove"/></button>
) : (
<button onClick={this.toggleModal} id={`closeId-${randomId}`} className={s.customControlItem}><i title="Close" className="glyphicon glyphicon-remove"/></button>
))}
{!fullscreened && (customCollapse && (
<button onClick={this.handleCollapse} id={`closeId-${randomId}`} className={s.customControlItem}><i title="Collapse" className={`glyphicon glyphicon-chevron-${!collapseWidget ? 'down' : 'up'}`}/></button>
))}
{customFullscreen && (
<button onClick={this.handleFullscreen} id={`closeId-${randomId}`} className={s.customControlItem}><i title="Fullscreen" className={`glyphicon glyphicon-resize-${fullscreened ? 'small' : 'full'}`} /></button>
)}
{customReload && (
<button onClick={this.handleReload} id={`closeId-${randomId}`} className={s.customControlItem}><i title="I am spinning!" className="fa fa-refresh" /></button>
)}
</div>
)
}
<AnimateHeight
duration={ 500 }
height={ height }
>
<div className={`${s.widgetBody} widget-body ${bodyClass}`}>
{reloading || fetchingData ? <Loader className={s.widgetLoader} size={40}/> : customBody ? (
<div className="jumbotron handle bg-default text-white mb-0">
<div className="container">
<h1>Draggable story!</h1>
<p className="lead">
<em>Build</em> your own
interfaces! Sit back and relax.
</p>
<p className="text-center">
<button onClick={this.handleFullscreen} className="btn btn-danger btn-lg">
{!fullscreened ?
<React.Fragment>Fullscreen me!
<i className="fa fa-check" />
</React.Fragment>
: 'Go Back'
}
</button>
</p>
</div>
</div>
) : children}
</div>
</AnimateHeight>
</section>
{prompt && (
<Modal isOpen={modal} toggle={this.toggleModal} id="news-close-modal">
<ModalHeader toggle={this.toggleModal} id="news-close-modal-label">Sure?</ModalHeader>
<ModalBody className="bg-white">
Do you really want to unrevertably remove this super news widget?
</ModalBody>
<ModalFooter>
<Button color="default" onClick={this.toggleModal} data-dismiss="modal">No</Button>{' '}
<Button color="danger" onClick={this.closeWithModal} id="news-widget-remove">Yes,
remove widget</Button>
</ModalFooter>
</Modal>
)}
<div style={{display: fullscreened ? 'block' : 'none'}} className={s.widgetBackground}></div>
</React.Fragment>
);
}
Example #22
| Source File: Navbar.js From Frontend with Apache License 2.0 | 4 votes |
|
IndexNavbar = (props) => {
const [isOpen, setIsOpen] = useState(false)
const toggle = () => setIsOpen(!isOpen)
const deleteCred = () => {
localStorage.removeItem('creds')
window.location.assign('/')
}
var prevScrollpos = window.pageYOffset
window.onscroll = function () {
var currentScrollPos = window.pageYOffset
if (prevScrollpos > currentScrollPos) {
document.getElementById('navbar').style.top = '0'
} else {
document.getElementById('navbar').style.top = '-70px'
}
prevScrollpos = currentScrollPos
}
const creds = JSON.parse(localStorage.getItem('creds'))
const [uu, setuu] = useState()
// console.log(uu);
const handle = '/profile/' + uu
useEffect(() => {
if (creds) {
setuu(creds.username)
}
}, [])
if (creds) {
return (
<div>
<Navbar
id="navbar"
color="dark"
light
expand="md"
style={{ background: 'transparent !important', paddingRight: '3% ' }}
>
<NavbarBrand href="/" light>
<img src={logo1} id="BrandLogo" />
CODEDIGGER
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem style={{ color: 'white' }}>
<NavLink style={{ color: 'white' }} href="/problems">
Problems
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Practice
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink
className="dropdown_link"
href="/topicwise/practice"
>
Topicwise
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
className="dropdown_link"
href="/levelwise/practice"
>
Levelwise
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Ladders
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink className="dropdown_link" href="/topicwise/ladder">
Topicwise
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/levelwise/ladder">
Levelwise
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem style={{ color: 'white' }}>
<NavLink style={{ color: 'white' }} href="/contest">
Contests
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Upsolve
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink
className="dropdown_link"
href="/upsolve/codeforces"
>
Codeforces
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/upsolve/codechef">
Codechef
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/upsolve/atcoder">
Atcoder
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
{/* <NavItem>
<NavLink href="/profile">Hello, {creds.username}</NavLink>
</NavItem> */}
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Hello, {creds.username}
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink className="dropdown_link" href={handle}>
Profile
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/updateProfile">
Edit Profile
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
className="dropdown_link"
href={`/change_password_request`}
>
Edit Password
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href={`/list/${uu}`}>
Problem Lists
</NavLink>
</DropdownItem>
<DropdownItem>
<NavItem>
<NavLink className="dropdown_link" onClick={deleteCred}>
Log Out
</NavLink>
</NavItem>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
)
} else
return (
<div>
<Navbar
id="navbar"
color="dark"
light
expand="md"
style={{
background: 'transparent !important',
paddingLeft: '3%',
paddingRight: '4% ',
}}
>
<NavbarBrand href="/" light>
<img src={logo1} id="BrandLogo" />
CODEDIGGER
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem style={{ color: 'white' }}>
<NavLink style={{ color: 'white' }} href="/problems">
Problems
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Practice
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink
className="dropdown_link"
href="/topicwise/practice"
>
Topicwise
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
className="dropdown_link"
href="/levelwise/practice"
>
Levelwise
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Ladders
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink className="dropdown_link" href="/topicwise/ladder">
Topicwise
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/levelwise/ladder">
Levelwise
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Upsolve
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink
className="dropdown_link"
href="/upsolve/codeforces"
>
Codeforces
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/upsolve/codechef">
Codechef
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/upsolve/atcoder">
Atcoder
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
{/* <NavItem>
<NavLink href="/profile">Hello, {creds.username}</NavLink>
</NavItem> */}
<NavItem>
<NavLink style={{ color: 'white' }} href="/login">
Login/Register
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
{/* <br/>
<br/>
<br/> */}
</div>
)
}
Example #23
| Source File: SectionNavbars.js From Website2020 with MIT License | 4 votes |
|
function SectionNavbars() {
return (
<>
<div className="section section-navbars">
<Container id="menu-dropdown">
<div className="title">
<h3>Menu</h3>
</div>
<br />
<Row>
<Col md="6">
<Navbar className="bg-primary" expand="lg">
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Menu
</NavbarBrand>
<button
aria-controls="navbarSupportedContent"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-menu"
data-toggle="collapse"
id="navbar-menu"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-menu">
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Link
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle
aria-expanded={false}
aria-haspopup={true}
caret
color="default"
data-toggle="dropdown"
href="#pablo"
id="dropdownMenuButton"
nav
onClick={e => e.preventDefault()}
role="button"
>
Dropdown
</DropdownToggle>
<DropdownMenu
aria-labelledby="dropdownMenuButton"
className="dropdown-info"
>
<DropdownItem header tag="span">
Dropdown header
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Separated link
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another separated link
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Navbar>
</Col>
<Col md="6">
<Navbar className="bg-danger" expand="lg">
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Icons
</NavbarBrand>
<button
aria-controls="navbarSupportedContent"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-menu-icon"
data-toggle="collapse"
id="navbar-menu-icon"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-menu-icon">
<Nav className="ml-auto" navbar>
<NavItem className="active">
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="nc-icon nc-email-85" />
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-single-02"
/>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle
aria-expanded={false}
aria-haspopup={true}
caret
color="default"
data-toggle="dropdown"
href="#pablo"
nav
onClick={e => e.preventDefault()}
role="button"
>
<i
aria-hidden={true}
className="nc-icon nc-settings-gear-65"
/>
</DropdownToggle>
<DropdownMenu className="dropdown-danger" right>
<DropdownItem header tag="span">
Dropdown header
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Separated link
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Navbar>
</Col>
</Row>
</Container>
</div>
</>
);
}
