react-icons/fa#FaBars JavaScript Examples
The following examples show how to use
react-icons/fa#FaBars.
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: MenuBar.js From kalimba-tabs with MIT License | 7 votes |
|
render() {
return (
<div style={styles.mainContainer}>
<div style={styles.left}>
<MenuButton
icon={<FaBars />}
hoverColor="#91bfff"
menuFunction={() => {
Menu.openMenu();
}}
/>
</div>
<div style={styles.middle}>Kalimba Tabs</div>
<div style={styles.right}>
<MenuButton
icon={<FaWindowMinimize />}
hoverColor="#91bfff"
menuFunction={() => {
Menu.minimizeWindow();
}}
/>
<MenuButton
icon={<FaWindowMaximize />}
hoverColor="#91bfff"
menuFunction={() => {
Menu.maximizeWindow();
}}
/>
<MenuButton
icon={<FaWindowClose />}
hoverColor="red"
menuFunction={() => {
Menu.closeWindow();
}}
/>
</div>
</div>
);
}
Example #2
| Source File: MyPageButton.js From airdnd-frontend with MIT License | 6 votes |
|
MyPageButton = ({ isScrollTop, togglePopup, isLoggedIn, data }) => {
const { profileImg } = data;
return (
<StMyPageButton
btnType="oval"
isScrollTop={isScrollTop}
onClick={togglePopup}
>
<FaBars></FaBars>
{isLoggedIn && profileImg && <StProfileImg src={profileImg} />}
{isLoggedIn && !profileImg && <StProfileImg src={imgPath} />}
{!isLoggedIn && (
<StProfileSvg>
<path d="m16 .7c-8.437 0-15.3 6.863-15.3 15.3s6.863 15.3 15.3 15.3 15.3-6.863 15.3-15.3-6.863-15.3-15.3-15.3zm0 28c-4.021 0-7.605-1.884-9.933-4.81a12.425 12.425 0 0 1 6.451-4.4 6.507 6.507 0 0 1 -3.018-5.49c0-3.584 2.916-6.5 6.5-6.5s6.5 2.916 6.5 6.5a6.513 6.513 0 0 1 -3.019 5.491 12.42 12.42 0 0 1 6.452 4.4c-2.328 2.925-5.912 4.809-9.933 4.809z"></path>
</StProfileSvg>
)}
</StMyPageButton>
);
}
Example #3
| Source File: index.js From layer5-ng with Apache License 2.0 | 6 votes |
|
Navigation = () => {
const [expand, setExpand] = useState(false);
const [scroll, setScroll] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () =>
window.pageYOffset > 50 ? setScroll(true) : setScroll(false)
);
}, [ ]);
return (
<NavigationWrap className={`nav-block ${scroll ? "scrolled" : ""}`}>
<Container>
<div className="navbar-wrap">
<Link to="#" className="logo">
<img src={logo} alt="prime app landing" />
</Link>
<nav className="nav">
<FaBars
className="mobile-menu-icon"
onClick={() => setExpand(!expand)}
/>
<ScrollspyMenu
className={`collapsed ${expand ? "is-expanded" : ""}`}
menuItems={Data.menuItems}
/>
</nav>
</div>
</Container>
</NavigationWrap>
);
}
Example #4
| Source File: HeaderElements.js From portfolio-react with MIT License | 6 votes |
|
Bars = styled(FaBars)`
display: none;
color: #fff;
font-size: 1.8rem;
cursor: pointer;
@media screen and (max-width: 768px) {
display: block;
}
`
Example #5
| Source File: Header.jsx From gatsby-contentful-portfolio with MIT License | 5 votes |
|
Header = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false)
const { site } = useStaticQuery(graphql`
query {
site {
data: siteMetadata {
menu {
name
to
}
}
}
}
`)
return (
<div className="container pt-6 pb-12 md:pt-12">
<div className="flex justify-between items-center">
<Link to="/">
<img alt="Logo" className="w-24 md:w-32" src="logo.svg" />
</Link>
<button
className="sm:hidden"
onClick={() => setIsMenuOpen(true)}
aria-label="Open Menu"
>
<FaBars className="h-6 w-auto text-gray-900 fill-current -mt-1" />
</button>
<div className="hidden sm:block">
{site.data.menu.map((link, key) => (
<Link
key={`menu_desktop_link${key}`}
className="ml-6 sm:ml-8 text-sm sm:text-base font-medium px-px border-b-2 pb-2 border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-200 transition duration-150 ease-in-out"
activeClassName="border-blue-600 text-gray-900 hover:border-blue-600"
to={link.to}
>
{link.name}
</Link>
))}
</div>
</div>
<MenuMobile
isOpen={isMenuOpen}
setIsOpen={setIsMenuOpen}
links={site.data.menu}
/>
</div>
)
}
Example #6
| Source File: header-desktop.js From next-ecommerce with MIT License | 4 votes |
|
export default function HeaderDesktop({ viewer }) {
const cart = useQuery(CART_COUNT);
return (
<>
<div className="header header-top">
<Logo />
<SearchBox />
<div className="nav-buttons">
<Link href="/cart">
<a className="nav-buttons-items">
<FaShoppingCart color="#808080" />
<p>
<sup className="items-total">{cart.data.cart.cartCount}</sup>{' '}
Items
</p>
</a>
</Link>
<Link href="/wishlist">
<a className="nav-buttons-wishlist">
<FaRegHeart color="#808080" />
<p>Wishlist</p>
</a>
</Link>
{!viewer && (
<Link href="/user/login">
<a className="nav-buttons-signin">
<FaUser color="#808080" />
<p>Sign In</p>
</a>
</Link>
)}
{viewer && (
<>
<Link href="/profile">
<a className="nav-buttons-profile">
<FaUser color="#808080" />
<p>{viewer.name}</p>
</a>
</Link>
<Link href="/user/signout">
<a className="nav-buttons-signout">
<FaSignOutAlt />
</a>
</Link>
</>
)}
</div>
</div>
<div className="header header-bottom">
<div className="all-categories-box">
<FaBars color="#d8d8d8" />
<select name="categories" id="categories">
<option value="All Categories" selected>
All Categories
</option>
<option value="#">Desktop</option>
<option value="#">Smartphone</option>
<option value="#">Watches</option>
<option value="#">Games</option>
<option value="#">Laptop</option>
<option value="#">Keyboards</option>
<option value="#">TV & Video</option>
<option value="#">Accessories</option>
</select>
</div>
<nav className="main-nav">
<Link href="#">
<a>Super Deals</a>
</Link>
<Link href="#">
<a>Featured Brands</a>
</Link>
<Link href="#">
<a>Collections</a>
</Link>
<Link href="#">
<a>Bestselling</a>
</Link>
</nav>
<div className="settings">
<div className="menu-dropdown">
<p>Help</p>
</div>
<div className="menu-dropdown">
<p>USD</p>
</div>
<div className="menu-dropdown">
<p>Language</p>
</div>
</div>
</div>
<style jsx>{`
/* Header Top */
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 28px 10vw;
}
.nav-buttons {
display: flex;
flex-direction: row;
align-items: center;
}
.nav-buttons a {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 32px;
font-style: normal;
font-weight: 500;
font-size: 14px;
text-decoration: none;
color: #808080;
}
.nav-buttons .items-total {
font-size: 12px;
align-self: flex-end;
}
.nav-buttons .nav-buttons-signout {
margin-left: 12px;
}
.nav-buttons a:hover {
text-decoration: underline;
}
.nav-buttons a p {
margin-left: 8px;
}
/* Header Bottom */
.header-bottom {
padding: 0px 10vw;
border-top: 2px solid #f5f5f5;
}
.header-bottom .all-categories-box {
height: 100%;
display: flex;
align-items: center;
/* Border */
border-right: 2px solid #f5f5f5;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 48px;
}
.header-bottom .all-categories-box select {
height: 100%;
padding-left: 15px;
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 60px;
color: #808080;
border: none;
background: none;
}
.header-bottom .all-categories-box select:focus {
outline: none;
}
.header-bottom .main-nav {
display: flex;
align-items: center;
}
.header-bottom .main-nav a {
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #666666;
text-decoration: none;
margin-left: 16px;
margin-right: 16px;
}
.header-bottom .main-nav a:hover {
text-decoration: underline;
}
.header-bottom .settings {
display: flex;
flex-direction: row;
align-items: center;
}
.header-bottom .settings .menu-dropdown {
/* Border */
border-left: 2px solid #f5f5f5;
padding: 20px 24px;
}
.header-bottom .settings .menu-dropdown p {
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #b3b3b3;
}
`}</style>
</>
);
}
Example #7
| Source File: LeftPanel.js From sailplane-web with GNU General Public License v3.0 | 4 votes |
|
export function LeftPanel({
setCurrentRightPanel,
currentRightPanel,
isDownload,
}) {
const isSmallScreen = useIsSmallScreen();
const [isMobileOpen, setIsMobileOpen] = useState(false);
const styles = {
container: {
position: 'relative',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
backgroundColor: primary45,
color: '#FFF',
padding: `${isSmallScreen ? 8 : 20}px 10px 0px 10px`,
minWidth: 200,
fontFamily: 'Open Sans',
paddingBottom: 0,
},
logo: {
display: 'inline-block',
fontFamily: 'MuseoModerno',
color: '#FFF',
fontSize: 24,
fontWeight: 400,
marginBottom: isSmallScreen && !isMobileOpen ? 8 : 20,
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
userSelect: 'none',
cursor: 'pointer',
lineHeight: '24px',
},
settingsBlock: {
bottom: 0,
width: '100%',
},
mobilePadding: {
paddingBottom: 6,
},
menuIcon: {
position: 'absolute',
top: isSmallScreen ? 16 : 25,
left: 14,
},
logoContainer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
footer: {
textAlign: 'center',
marginBottom: 8,
fontSize: 13,
lineHeight: '14px',
fontFamily: 'Open Sans',
},
iconGithub: {
cursor: 'pointer',
},
githubTxt: {
fontSize: 10,
userSelect: 'none',
},
icon: {
position: 'relative',
top: 6,
width: 30,
},
logoTitle: {
display: 'inline-flex',
},
};
let iconComponent = FaBars;
if (isMobileOpen) {
iconComponent = FaTimes;
}
const IconComponent = iconComponent;
return (
<div style={styles.container}>
{isSmallScreen ? (
<IconComponent
color={'#FFF'}
size={24}
style={styles.menuIcon}
onClick={() => {
setIsMobileOpen(!isMobileOpen);
}}
/>
) : null}
<div>
<div style={styles.logoContainer}>
<div
style={styles.logo}
onClick={() => {
document.location = `${
window.location.origin + window.location.pathname
}`;
}}>
<img src={logo} style={styles.icon} />
<div style={styles.logoTitle}>Sailplane</div>
</div>
</div>
{(isMobileOpen || !isSmallScreen) && !isDownload ? (
<>
<PanelItem
title={'Files'}
iconComponent={FaFolderOpen}
selected={currentRightPanel === 'files'}
onClick={() => {
setIsMobileOpen(false);
setCurrentRightPanel('files');
}}
/>
<PanelItem
title={'Drives'}
iconComponent={FaServer}
selected={currentRightPanel === 'instances'}
onClick={() => {
setIsMobileOpen(false);
setCurrentRightPanel('instances');
}}
/>
<PanelItem
title={'Contacts'}
iconComponent={FaAddressBook}
selected={currentRightPanel === 'contacts'}
onClick={() => {
setIsMobileOpen(false);
setCurrentRightPanel('contacts');
}}
/>
{/*<div style={styles.settingsBlock}>*/}
{/* <PanelItem*/}
{/* title={'Settings'}*/}
{/* selected={currentRightPanel === 'settings'}*/}
{/* onClick={() => setCurrentRightPanel('settings')}*/}
{/* iconComponent={FaCog}*/}
{/* />*/}
{/*</div>*/}
</>
) : (
<div style={styles.mobilePadding} />
)}
{isDownload ? (
<>
<div style={styles.settingsBlock}>
<PanelItem
title={'Home'}
onClick={() =>
(document.location =
'https://cypsela.github.io/sailplane-web/#/')
}
iconComponent={FaHome}
/>
</div>
<div style={styles.settingsBlock}>
<PanelItem
title={'Downloads'}
onClick={() => {}}
iconComponent={FaDownload}
selected={true}
/>
</div>
</>
) : null}
</div>
{!isSmallScreen ? (
<div style={styles.footer}>
<a
href={'https://github.com/cypsela/sailplane-web'}
target={'_blank'}
rel={'noopener'}>
<FaGithub color={primary15} size={20} style={styles.iconGithub} />
</a>
<div style={styles.githubTxt}>Source</div>
</div>
) : null}
</div>
);
}
