react-icons/bs#BsFillGearFill JavaScript Examples
The following examples show how to use
react-icons/bs#BsFillGearFill.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Header.js From hackertab.dev with Apache License 2.0 | 5 votes |
|
function Header({ state, dispatcher, showSideBar, setShowSideBar, showSettings, setShowSettings }) {
const [themeIcon, setThemeIcon] = useState(<BsMoon />)
const isFirstRun = useRef(true)
useEffect(() => {
document.documentElement.classList.add(state.theme)
}, [])
useEffect(() => {
if (isFirstRun.current) {
isFirstRun.current = false
} else {
if (!document.documentElement.classList.contains('transitionBgColor')) {
document.documentElement.classList.add('transitionBgColor')
}
trackThemeChange(state.theme)
}
if (state.theme === 'light') {
document.documentElement.classList.replace('dark', state.theme)
setThemeIcon(<BsMoon />)
} else if (state.theme === 'dark') {
document.documentElement.classList.replace('light', state.theme)
setThemeIcon(<IoMdSunny />)
}
}, [state?.theme])
const onThemeChange = () => {
dispatcher({ type: 'toggleTheme' })
}
const onSettingsClick = () => {
setShowSettings(true)
}
const BookmarksBadgeCount = () => {
return state.userBookmarks.length > 0 ? (
state.userBookmarks.length < 10 ? (
<span className="badgeCount">{state.userBookmarks.length}</span>
) : (
<span className="badgeCount">+9</span>
)
) : null
}
return (
<>
<SettingsModal showSettings={showSettings} setShowSettings={setShowSettings} />
<header className="AppHeader">
<span className="AppName">
<i className="logo">
<CgTab />
</i>{' '}
<HackertabLogo className="logoText" />
<Changelog />
</span>
<SearchBar state={state} />
<div className="extras">
<button className="extraBtn" onClick={onSettingsClick}>
<BsFillGearFill />
</button>
<button className="extraBtn darkModeBtn" onClick={onThemeChange}>
{themeIcon}
</button>
<button className="extraBtn" onClick={() => setShowSideBar(!showSideBar)}>
<BsFillBookmarksFill />
<BookmarksBadgeCount />
</button>
</div>
<div className="break"></div>
<UserTags userSelectedTags={state.userSelectedTags} onAddClicked={onSettingsClick} />
</header>
</>
)
}
Example #2
| Source File: Navbar.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function Navbar() {
const { theme, setHandleDrawer } = useContext(ThemeContext);
const [open, setOpen] = useState(false);
const handleDrawerOpen = () => {
setOpen(true);
setHandleDrawer();
};
const handleDrawerClose = () => {
setOpen(false);
setHandleDrawer();
};
const useStyles = makeStyles((t) => ({
navMenu: {
fontSize: '2.5rem',
color: theme.tertiary,
cursor: 'pointer',
transform: 'translateY(-10px)',
transition: 'color 0.3s',
'&:hover': {
color: theme.primary,
},
[t.breakpoints.down('sm')]: {
fontSize: '2.5rem',
},
[t.breakpoints.down('xs')]: {
fontSize: '2rem',
},
},
MuiDrawer: {
padding: '0em 1.8em',
width: '14em',
fontFamily: ' var(--primaryFont)',
fontStyle: ' normal',
fontWeight: ' normal',
fontSize: ' 24px',
background: theme.secondary,
overflow: 'hidden',
borderTopRightRadius: '40px',
borderBottomRightRadius: '40px',
[t.breakpoints.down('sm')]: {
width: '12em',
},
},
closebtnIcon: {
fontSize: '2rem',
fontWeight: 'bold',
cursor: 'pointer',
color: theme.primary,
position: 'absolute',
right: 40,
top: 40,
transition: 'color 0.2s',
'&:hover': {
color: theme.tertiary,
},
[t.breakpoints.down('sm')]: {
right: 20,
top: 20,
},
},
drawerItem: {
margin: '2rem auto',
borderRadius: '78.8418px',
background: theme.secondary,
color: theme.primary,
width: '85%',
height: '60px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-evenly',
padding: '0 30px',
boxSizing: 'border-box',
border: '2px solid',
borderColor: theme.primary,
transition: 'background-color 0.2s, color 0.2s',
'&:hover': {
background: theme.primary,
color: theme.secondary,
},
[t.breakpoints.down('sm')]: {
width: '100%',
padding: '0 25px',
height: '55px',
},
},
drawerLinks: {
fontFamily: 'var(--primaryFont)',
width: '50%',
fontSize: '1.3rem',
fontWeight: 600,
[t.breakpoints.down('sm')]: {
fontSize: '1.125rem',
},
},
drawerIcon: {
fontSize: '1.6rem',
[t.breakpoints.down('sm')]: {
fontSize: '1.385rem',
},
},
}));
const classes = useStyles();
const shortname = (name) => {
if (name.length > 12) {
return name.split(' ')[0];
} else {
return name;
}
};
return (
<div className='navbar'>
<div className='navbar--container'>
<h1 style={{ color: theme.secondary }}>
{shortname(headerData.name)}
</h1>
<IoMenuSharp
className={classes.navMenu}
onClick={handleDrawerOpen}
aria-label='Menu'
/>
</div>
<Drawer
variant='temporary'
onClose={(event, reason) => {
if (reason !== 'backdropClick') {
handleDrawerClose();
} else if (reason !== 'escapeKeyDown') {
handleDrawerClose();
}
}}
anchor='left'
open={open}
classes={{ paper: classes.MuiDrawer }}
className='drawer'
disableScrollLock={true}
>
<div className='div-closebtn'>
<CloseIcon
onClick={handleDrawerClose}
onKeyDown={(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
handleDrawerClose();
}
}}
className={classes.closebtnIcon}
role='button'
tabIndex='0'
aria-label='Close'
/>
</div>
<br />
<div onClick={handleDrawerClose}>
<div className='navLink--container'>
<Fade left>
<NavLink
to='/'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<IoHomeSharp
className={classes.drawerIcon}
/>
<span className={classes.drawerLinks}>
Home
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#about'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<FaUser className={classes.drawerIcon} />
<span className={classes.drawerLinks}>
About
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#resume'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<HiDocumentText
className={classes.drawerIcon}
/>
<span className={classes.drawerLinks}>
Resume
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#services'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<BsFillGearFill
className={classes.drawerIcon}
/>
<span className={classes.drawerLinks}>
Services
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#blog'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<FaFolderOpen
className={classes.drawerIcon}
/>
<span className={classes.drawerLinks}>
Blog
</span>
</div>
</NavLink>
</Fade>
<Fade left>
<NavLink
to='/#contacts'
smooth={true}
spy='true'
duration={2000}
>
<div className={classes.drawerItem}>
<MdPhone className={classes.drawerIcon} />
<span className={classes.drawerLinks}>
Contact
</span>
</div>
</NavLink>
</Fade>
</div>
</div>
</Drawer>
</div>
);
}
