react-feather#Menu JavaScript Examples
The following examples show how to use
react-feather#Menu.
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: navigation.jsx From ambition-fund-website with MIT License | 5 votes |
|
render() {
const { mobileMenuOpen } = this.state
return (
<Nav {...this.props} scrolled={this.state.hasScrolled}>
<StyledContainer>
<Brand>
<Scrollspy offset={-64} item={["top"]} currentClassName="active">
<Image />
{this.getNavLink({
name: "Ambition Fund",
pathname: "/",
hash: "#top",
})}
</Scrollspy>
</Brand>
<Mobile>
<button
onClick={this.toggleMobileMenu}
style={{ color: "black", background: "none" }}
>
{this.state.mobileMenuOpen ? (
<X size={24} alt="close menu" />
) : (
<Menu size={24} alt="open menu" />
)}
</button>
</Mobile>
<Mobile hide>{this.getNavList({})}</Mobile>
</StyledContainer>
<Mobile>
{mobileMenuOpen && (
<MobileMenu>
<Container>{this.getNavList({ mobile: true })}</Container>
</MobileMenu>
)}
</Mobile>
</Nav>
)
}
Example #2
| Source File: Navbar.js From spotify-react with MIT License | 5 votes |
|
render() {
const navbarItems = [
{ path: RouteConstant.HOME, icon: <Home />, name: "Home" },
{ path: RouteConstant.CHARTS, icon: <Lightning />, name: "Charts" },
{ path: RouteConstant.NEW, icon: <Label />, name: "New" },
{ path: RouteConstant.GENRES, icon: <LightBulb />, name: "Genres" },
{ path: RouteConstant.PLAYLISTS, icon: <Layers />, name: "Playlists" },
{ path: RouteConstant.LIKED, icon: <Heart />, name: "Songs" },
{ path: RouteConstant.ARTISTS, icon: <User />, name: "Artists" },
];
const {isHidden, isMenuOpen} = this.state;
return (
<React.Fragment>
{isHidden &&
<div
className="navbar__open-btn flex-center fixed-btn"
onClick={this.toggleMenu}>
{isMenuOpen ? <X /> : <Menu/>}
</div>
}
<nav className={`app__navbar ${isHidden
? `app__navbar_mobile${isMenuOpen ? "_open" : ""}`
: ""
}`}>
<div className="navbar">
<div className="navbar__logo">
<img className="navbar__logo-img" src={logo} alt=""/>
<SearchBtn className="navbar__search"/>
</div>
<ul className="navbar__group">
{navbarItems.slice(0, 4).map(({path, icon, name}, index) => {
return (
<li
key={index}
onClick={() => {
isMenuOpen && this.toggleMenu();
}}
>
<NavLink
exact
to={path}
className="navbar__item"
activeClassName="active"
>
<span className="navbar__icon">{icon}</span>
{name}
</NavLink>
</li>
);
})}
</ul>
<ul className="navbar__group">
<p className="navbar__group-header">YOUR LIBRARY</p>
{navbarItems.slice(4, 7).map(({path, icon, name}, index) => {
return (
<li
key={index + 4}
onClick={() => {
isMenuOpen && this.toggleMenu();
}}
>
<NavLink
exact
to={path}
className="navbar__item"
activeClassName="active"
>
<span className="navbar__icon">{icon}</span>
{name}
</NavLink>
</li>
);
})}
</ul>
</div>
</nav>
</React.Fragment>
);
}
Example #3
| Source File: Header.js From dashboard with MIT License | 5 votes |
|
function Header() {
const { mode, toggleMode } = useContext(WindmillContext);
const { toggleSidebar } = useContext(SidebarContext);
const history = useHistory();
return (
<header className="z-40 py-2 h-12 dark:bg-gray-800 bg-white shadow-md overflow-hidden">
<div className="flex justify-between px-2 dark:text-primary-400 text-primary-500">
<div className="flex flex-shrink-0 justify-between">
<button
type="button"
className="focus:shadow-outline-primary mr-2 p-1 rounded-md focus:outline-none md:mr-6"
onClick={toggleSidebar}
aria-label="Menu"
>
<Menu className="w-5 h-5" aria-hidden="true" />
</button>
<button
type="button"
aria-label="Care Dashboard"
className="hidden mr-1 md:block"
onClick={() => {
history.push("/");
}}
>
<span className="flex text-2xl subpixel-antialiased font-black leading-none">
Care Dashboard
</span>
</button>
</div>
<div className="item-center flex flex-shrink-0 justify-between space-x-6">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 714 173"
className="h-6"
aria-hidden="true"
>
<use fill="#fff" />
<use fill="#b21936" />
<path
d="M703.5 73.1a51.46 51.46 0 00-10.6-18.6c-4.8-5.3-10.6-9.6-17.2-12.6-7-3.1-14.6-4.7-22.3-4.6-4.4 0-8.7.4-13 1.3l.7-7.4c.6-9.9-5.7-18.9-15.2-21.7-3.2-.9-6.4-1.6-9.7-2-3.2-.4-6.5-.5-9.7-.5-6.4 0-12.8 1-18.8 3.2-6.1 2.2-11.8 5.6-16.5 10-4.9 4.7-8.7 10.4-11.1 16.7l-1.2 3.4c-1.8.7-3.6 1.6-5.2 2.8-7.7-3.8-16.7-5.8-27-5.8-10.5.1-20.9 1.8-30.9 5.2l-.5.2-.6-.2c-4.6-1.7-9.4-3-14.2-3.9-4.9-.9-9.8-1.3-14.7-1.3-13.7 0-25.2 3.6-34.1 10.6-.8.6-1.6 1.3-2.3 2l-.1-.1c-8.4-7.6-20.1-11.5-34.6-11.5-4.7 0-9.4.3-14.1 1-4.1.6-8.2 1.4-12.2 2.6s-7.5 3.6-10.1 6.8c-6.2-5.5-15.7-10.4-30-10.4-5.3 0-10.5.8-15.5 2.5-.6.2-1.3.5-1.9.7-1.7-.7-3.4-1.1-5.2-1.3l-3.2-.3c-2.4-.2-4.7-.2-7.1 0l-3.4.3c-6 .7-11.4 4-14.9 9.1a48.72 48.72 0 00-9.5-5.9c-7.3-3.4-15.2-5.1-23.3-5a53.71 53.71 0 00-23.3 5c-.9.4-1.7.9-2.6 1.3-3-2.3-6.5-3.9-10.2-4.4a37.08 37.08 0 00-4.7-.3H202c-4.6 0-9.2.6-13.7 1.8-1.8-.8-3.7-1.3-5.6-1.5l-3.2-.3c-2.4-.2-4.7-.2-7.1 0l-3.4.3c-6 .7-11.4 4-14.9 9a48.72 48.72 0 00-9.5-5.9c-7.3-3.4-15.2-5.1-23.3-5-10-.2-19.8 2.4-28.3 7.7-2-1.8-4.3-3.1-6.9-4-3.7-1.2-7.5-2.1-11.4-2.7-4.5-.7-9-1-13.6-1-8.2-.1-16.3 1.5-23.8 4.7-7.1 3.1-13.4 7.7-18.5 13.5-4.8 5.6-8.4 12.1-10.7 19.2-2.3 7-3.4 14.3-3.3 21.6 0 17.8 5.1 32.2 15 42.7 10.3 10.8 24.5 16.3 42.3 16.3 4.7 0 9.4-.4 14-1.2 3.9-.7 7.6-1.7 11.3-3 2.1-.8 4.1-1.9 5.9-3.3 1.5.9 3.1 1.8 4.7 2.5 7.3 3.4 15.2 5.1 23.3 5a53.71 53.71 0 0023.3-5c3.4-1.6 6.5-3.6 9.4-5.9 3.3 4.8 8.3 8 14 8.9 1.6.3 3.3.4 4.9.5a43.98 43.98 0 003.2.1c.8 0 1.9 0 3.4-.1 1.6-.1 3.2-.2 4.8-.5 9.5-1.6 16.7-9.3 17.7-18.8.4.6.9 1.2 1.4 1.8 4.7 6 10.7 10.8 17.6 14 14.8 6.6 31.8 6.6 46.6 0 3.4-1.6 6.5-3.6 9.5-5.9 3.3 4.8 8.3 8 14 8.9 1.6.3 3.3.4 4.9.5l3.2.1c.7 0 1.9 0 3.4-.1 1.6-.1 3.2-.2 4.8-.5 7-1.2 13-5.8 15.9-12.3 2.9 6.5 8.9 11.1 15.9 12.3 1.6.3 3.3.4 4.9.5a43.98 43.98 0 003.2.1c.8 0 1.9 0 3.4-.1 1.6-.1 3.2-.2 4.8-.5 4-.7 7.8-2.5 10.8-5.3 8.2 4.8 18.2 7.2 30 7.2 5.5 0 11-.4 16.4-1.2 5.2-.7 9.5-1.4 13.2-2.2 1.4-.3 2.8-.7 4.1-1.3a85.31 85.31 0 005.4 1.8c2.3.6 4.6 1.2 6.9 1.6 2.6.5 5.2.8 7.8 1 2.4.2 5 .3 7.8.3a63.52 63.52 0 0019.9-2.9 52.74 52.74 0 0015-7.5c.5.4 1.1.8 1.6 1.2 5.4 3.7 11.6 6.2 18 7.5 5.8 1.2 11.7 1.8 17.6 1.7 6.8.1 13.5-.6 20.1-1.8a133.78 133.78 0 0014.2-3.5c.3-.1.7-.2 1-.4 2.7 1.9 5.7 3.2 9 3.8 4.5.7 9 1.1 13.5 1.1s9-.4 13.4-1.1c6.5-1.1 12.1-5.1 15.2-10.9 4.5 3.6 9.5 6.6 14.9 8.6 8 3 16.6 4.4 25.2 4.3 11.1.1 22.1-1.8 32.5-5.7 8.4-3.2 13.9-11.5 13.6-20.5-.1-4.4-.8-8.8-1.9-13a21.67 21.67 0 005.1-10.4c.4-2.1.6-4.1.8-6.2a81.93 81.93 0 00.3-7c-.1-7-1.2-13.9-3.4-20.5z"
fill="#fff"
/>
<path
d="M656.4 157.2c-8.7.1-17.3-1.3-25.5-4.3-5.1-2-10-4.7-14.3-8.1-3.3 5.6-8.9 9.4-15.3 10.4-9 1.5-18.2 1.5-27.2 0-3.2-.5-6.3-1.8-8.9-3.6l-.6.2c-4.7 1.4-9.5 2.6-14.3 3.6-6.7 1.3-13.5 1.9-20.3 1.9-6 0-11.9-.6-17.8-1.8-6.5-1.3-12.8-3.9-18.3-7.7l-1.1-.8c-4.5 3.1-9.5 5.6-14.7 7.3-6.5 2-13.4 3.1-20.2 3-2.8 0-5.5-.1-7.9-.3-2.6-.2-5.3-.5-7.9-1l-7-1.6-5.2-1.7c-1.3.5-2.6.9-3.9 1.2-3.8.8-8.1 1.5-13.3 2.2-5.5.8-11 1.2-16.5 1.2-11.6 0-21.6-2.4-29.9-7-3.1 2.6-6.8 4.4-10.8 5.1-1.6.2-3.2.4-4.9.5-1.5.1-2.6.1-3.4.1s-1.8 0-3.2-.1c-1.7-.1-3.3-.2-5-.5-6.7-1.1-12.5-5.2-15.8-11.2-3.3 6-9.1 10.1-15.8 11.2-1.6.3-3.2.4-4.9.5-1.1.1-2.3.1-3.4.1-.8 0-1.8 0-3.3-.1-1.7-.1-3.3-.2-5-.5-5.6-.9-10.7-4-14.1-8.6-2.8 2.1-5.7 3.9-8.9 5.4a57.39 57.39 0 01-47.3 0c-7-3.3-13.1-8.2-17.9-14.2l-.1-.2c-1.8 9-9 15.9-18.1 17.4-1.6.2-3.2.4-4.9.5-1.5.1-2.6.1-3.4.1s-1.8 0-3.2-.1c-1.7-.1-3.3-.2-5-.5a22.21 22.21 0 01-14.1-8.5c-2.8 2.1-5.7 3.9-8.9 5.4-15.1 6.8-32.3 6.8-47.3 0-1.4-.7-2.8-1.4-4.2-2.3-1.7 1.3-3.6 2.3-5.7 3-3.7 1.3-7.6 2.3-11.5 3.1-4.7.8-9.4 1.3-14.1 1.2-18 0-32.5-5.6-42.9-16.6C9.1 129.9 4 115.4 4 97.3c-.1-7.4 1.1-14.8 3.3-21.8 2.3-7.2 6-13.8 10.9-19.5 5.1-5.9 11.6-10.7 18.8-13.8 7.6-3.3 15.8-4.9 24.1-4.8 4.6 0 9.2.4 13.8 1.1 3.9.6 7.8 1.5 11.5 2.7 2.4.8 4.7 2.1 6.7 3.7 1.5-.9 3-1.7 4.6-2.4a57.39 57.39 0 0147.3 0c3.1 1.5 6.1 3.3 8.9 5.4 3.6-4.8 9-7.9 14.9-8.7 1.2-.2 2.3-.2 3.4-.3 2.4-.2 4.8-.2 7.2 0l3.3.3c1.9.2 3.8.7 5.6 1.4 4.4-1.2 9-1.8 13.6-1.8h1.5c1.6 0 3.3.1 4.9.4 3.7.5 7.2 2 10.2 4.2.7-.4 1.4-.7 2.1-1.1a57.39 57.39 0 0147.3 0c3.1 1.5 6.1 3.3 8.9 5.4 3.6-4.8 9-7.9 14.9-8.7 1.2-.2 2.3-.2 3.4-.3 2.4-.2 4.8-.2 7.2 0l3.3.3c1.7.2 3.4.6 5.1 1.3l1.7-.6c5.1-1.7 10.4-2.5 15.7-2.5 12.1 0 22.1 3.4 29.9 10.1 2.7-3 6.1-5.2 10-6.4 4.1-1.2 8.2-2.1 12.4-2.7 4.7-.7 9.4-1 14.2-1 14.5 0 26.2 3.8 34.7 11.3.6-.5 1.1-1 1.7-1.4 9.1-7.2 20.8-10.8 34.7-10.8 5 0 10 .5 14.9 1.3a90.14 90.14 0 0114.4 3.9l.3.1.2-.1c5.2-1.8 10.6-3.1 16.1-4 16.6-2.6 30.5-1.1 42 4.4 1.4-1 2.9-1.8 4.5-2.4l1-3c2.4-6.4 6.3-12.3 11.3-17 4.8-4.6 10.5-8 16.8-10.3A54.16 54.16 0 01606.4 6c3.3 0 6.5.1 9.8.5a55.22 55.22 0 019.8 2.1c10 2.8 16.6 12.2 15.9 22.6-.1 2.2-.3 4.2-.5 6.2 4-.7 8-1.1 12-1.1 7.8-.1 15.5 1.5 22.7 4.6 6.7 3 12.6 7.3 17.5 12.8s8.5 11.9 10.8 18.9c2.2 6.7 3.2 13.7 3.2 20.7a84.28 84.28 0 01-.3 7.1c-.2 2.3-.5 4.5-.8 6.3-.7 3.9-2.4 7.5-5 10.5 1.1 4.2 1.7 8.4 1.8 12.7.3 9.4-5.4 18-14.2 21.4-10.4 4.1-21.5 6-32.7 5.9zm-40.3-15.1l.8.7c4.4 3.6 9.3 6.4 14.6 8.5 7.9 2.9 16.4 4.4 24.8 4.2 11 .1 21.9-1.8 32.2-5.6a20.25 20.25 0 0013-19.6c-.1-4.3-.8-8.6-1.9-12.8l-.1-.5.3-.4c2.5-2.8 4.2-6.3 4.9-10a65.92 65.92 0 00.8-6.1 81.93 81.93 0 00.3-7c0-6.8-1-13.6-3.1-20.2-2.2-6.8-5.7-13-10.5-18.3-4.7-5.2-10.5-9.5-16.9-12.3-6.9-3.1-14.4-4.6-22-4.5-4.3 0-8.6.5-12.8 1.4l-1.2.3.2-1.3c.3-2.4.5-4.8.7-7.3.6-9.5-5.5-18.1-14.6-20.8-3.1-.9-6.3-1.6-9.5-2s-6.4-.5-9.6-.5c-6.3 0-12.6 1-18.5 3.1-6 2.1-11.5 5.5-16.2 9.9-4.8 4.6-8.5 10.2-10.9 16.4-.4 1.1-.8 2.2-1.1 3.3l-.1.4-.4.2c-1.8.7-3.5 1.6-5 2.7l-.4.3-.5-.2c-11.2-5.5-25-7.1-41.4-4.4-5.4.9-10.7 2.2-15.8 3.9l-.8.3-.9-.4c-4.6-1.7-9.3-2.9-14.1-3.8s-9.7-1.3-14.6-1.3c-13.5 0-24.8 3.5-33.6 10.4-.8.6-1.5 1.3-2.2 1.9l-.6.5-.6-.5c-8.4-7.6-19.8-11.4-34.1-11.4-4.7 0-9.3.3-14 1-4.1.6-8.1 1.4-12.1 2.6-3.8 1.2-7.2 3.4-9.7 6.5l-.6.7-.7-.6c-7.6-6.8-17.5-10.2-29.4-10.2-5.2 0-10.3.8-15.2 2.4-.6.2-1.3.4-1.9.7l-.3.1-.3-.1c-1.6-.6-3.3-1.1-5-1.3l-3.2-.3a40.91 40.91 0 00-7 0l-3.3.3c-5.8.7-11 3.9-14.2 8.7l-.5.8-.7-.6c-2.9-2.3-6-4.2-9.3-5.8a56.22 56.22 0 00-45.8 0c-.9.4-1.7.9-2.6 1.3l-.5.3-.5-.4c-2.8-2.2-6.2-3.7-9.8-4.2a35.53 35.53 0 00-4.6-.3h-1.4c-4.5 0-9.1.5-13.4 1.7l-.3.1-.3-.1c-1.7-.7-3.5-1.2-5.4-1.4l-3.2-.3a40.91 40.91 0 00-7 0l-3.3.3c-5.8.7-11 3.9-14.2 8.7l-.5.8-.7-.6c-2.9-2.3-6-4.2-9.3-5.8a56.22 56.22 0 00-45.8 0c-1.7.8-3.3 1.7-4.9 2.7l-.6.3-.5-.4c-1.9-1.7-4.2-3-6.6-3.8-3.7-1.2-7.4-2.1-11.2-2.7-4.5-.7-8.9-1-13.4-1-8-.1-16 1.5-23.4 4.6-7 3-13.2 7.6-18.2 13.3C14.8 62.7 11.2 69.1 9 76S5.7 90.1 5.7 97.3c0 17.6 5 31.7 14.8 42.1 10.1 10.6 24.1 16 41.6 16a80.4 80.4 0 0013.8-1.2c3.8-.7 7.6-1.7 11.2-3 2-.7 3.9-1.8 5.7-3.1l.5-.4.5.3c1.5.9 3 1.7 4.6 2.5a56.22 56.22 0 0045.8 0c3.3-1.6 6.4-3.5 9.3-5.8l.7-.6.5.8c3.1 4.6 8 7.7 13.4 8.6 1.6.2 3.2.4 4.8.5 1.4.1 2.5.1 3.2.1s1.9 0 3.3-.1c1.6-.1 3.1-.2 4.6-.5 9.1-1.5 16-8.9 16.9-18l.2-2.3 1.4 1.9 1.4 1.8c4.6 5.8 10.6 10.5 17.3 13.7a56.22 56.22 0 0045.8 0c3.3-1.6 6.4-3.5 9.3-5.8l.7-.6.5.8c3.1 4.6 8 7.7 13.5 8.6 1.6.2 3.2.4 4.8.5a43.98 43.98 0 003.2.1c.7 0 1.9 0 3.3-.1 1.6-.1 3.1-.2 4.6-.5 6.7-1.1 12.5-5.5 15.3-11.8l.8-1.8.8 1.8c2.8 6.2 8.5 10.7 15.3 11.8 1.6.2 3.2.4 4.8.5a43.98 43.98 0 003.2.1c.7 0 1.9 0 3.3-.1 1.6-.1 3.1-.2 4.6-.5 3.9-.6 7.5-2.4 10.4-5.1l.5-.4.6.3c8.1 4.7 18 7.1 29.5 7.1 5.4 0 10.9-.4 16.3-1.2 5.1-.7 9.5-1.4 13.2-2.2 1.3-.3 2.7-.7 3.9-1.2l.3-.1.3.1c2.1.8 3.9 1.3 5.4 1.8 2.3.6 4.5 1.2 6.9 1.6 2.5.5 5.1.8 7.7 1 2.4.2 5 .3 7.8.3 6.7.1 13.3-.9 19.6-2.9 5.3-1.7 10.3-4.2 14.8-7.4l.5-.4.5.4 1.6 1.2c5.3 3.6 11.3 6.1 17.7 7.4 5.7 1.2 11.6 1.7 17.4 1.7 6.7.1 13.4-.6 20-1.8 4.7-.9 9.4-2.1 14.1-3.5l.8-.3.7-.2.4.3c2.5 1.8 5.5 3.1 8.6 3.6a79.18 79.18 0 0026.6 0c6.2-1 11.6-4.9 14.6-10.4l.4-1.2z"
fill="#b21936"
/>
<path d="M78 124.3c.6 1.2 1 2.5 1.3 3.8l.9 4a53.44 53.44 0 01-8.1 2.1c-3.3.6-6.6.9-10 .9-11.8 0-20.8-3.2-26.9-9.7s-9.2-15.8-9.3-28.1c0-5.1.7-10.1 2.3-14.9 1.4-4.4 3.7-8.5 6.7-12s6.8-6.2 11-8c4.8-2 10-3 15.2-2.9 3.4 0 6.9.2 10.3.8 2.6.4 5.2 1 7.7 1.8a19.31 19.31 0 01-.5 4.2c-.2 1.3-.6 2.6-1.1 3.8-2.3-.8-4.7-1.3-7.1-1.7-3.1-.5-6.2-.7-9.3-.7-3.8-.1-7.6.7-11.1 2.2-3.1 1.4-5.8 3.5-7.9 6.2-2.2 2.8-3.8 5.9-4.7 9.3-1.1 3.9-1.6 7.9-1.6 11.9 0 10.2 2.4 17.7 7.3 22.4s11.4 7.1 19.7 7.1c2.7 0 5.4-.2 8.1-.7 2.5-.4 4.8-1 7.1-1.8zm43.3 10.8c-4.9.1-9.7-.9-14.1-2.9-3.9-1.8-7.4-4.6-10.1-8-2.8-3.6-4.8-7.6-6-12a57.52 57.52 0 010-29.7c1.2-4.4 3.2-8.4 6-12 2.7-3.4 6.2-6.2 10.1-8 4.4-2 9.3-3 14.1-2.9 4.8-.1 9.7.9 14.1 2.9 3.9 1.9 7.3 4.6 10 8 2.8 3.6 4.8 7.6 6.1 12 2.7 9.7 2.7 20 0 29.7-1.2 4.4-3.3 8.4-6.1 12-2.7 3.4-6.1 6.1-10 8-4.5 2-9.3 3-14.1 2.9zm0-8.2c7.5 0 13.2-2.6 16.9-7.9s5.6-12.5 5.6-21.6c0-9.2-1.9-16.4-5.6-21.7s-9.4-7.9-16.9-7.9c-7.6 0-13.2 2.6-16.9 7.9s-5.6 12.5-5.6 21.7c0 9.1 1.9 16.3 5.6 21.6s9.3 7.9 16.9 7.9zm50.2-65.7c.8-.1 1.5-.2 2.2-.2l2-.1 2.1.1 2.1.2c.2 1.7.3 3.7.4 6s.1 4.4.1 6.3c1.9-3.5 4.6-6.5 7.9-8.8 3.4-2.4 7.9-3.6 13.4-3.6h1.5c.6 0 1.2.1 1.8.1.3 1.5.4 3 .4 4.5s-.1 2.9-.4 4.4c-.6-.1-1.2-.1-1.8-.2H202c-6.4 0-11.5 2-15.4 6.1s-5.8 10.8-5.8 20.2v37.1c-.8.1-1.6.2-2.3.2-1 0-1.8.1-2.3.1s-1.2 0-2.3-.1c-.8 0-1.6-.1-2.4-.2V61.2zm72.7 73.9c-4.9.1-9.7-.9-14.1-2.9-4-1.8-7.4-4.6-10.1-8-2.8-3.6-4.8-7.6-6-12a57.52 57.52 0 010-29.7c1.2-4.4 3.2-8.4 6-12 2.7-3.4 6.2-6.2 10.1-8 4.4-2 9.3-3 14.1-2.9 4.9-.1 9.7.9 14.1 2.9 3.9 1.9 7.3 4.6 10 8 2.8 3.6 4.8 7.6 6.1 12 2.7 9.7 2.7 20 0 29.7-1.2 4.4-3.3 8.4-6.1 12-2.7 3.4-6.1 6.1-10 8-4.4 2-9.3 3-14.1 2.9zm0-8.2c7.5 0 13.2-2.6 16.9-7.9s5.6-12.5 5.6-21.6c0-9.2-1.9-16.4-5.6-21.7s-9.4-7.9-16.9-7.9-13.2 2.6-16.9 7.9-5.6 12.5-5.6 21.7c0 9.1 1.9 16.3 5.6 21.6s9.4 7.9 16.9 7.9zm50.2-65.7c.8-.1 1.5-.2 2.2-.2l2-.1 2.1.1 2.1.2c.2 1.7.3 3.8.4 6.4l.1 6.7c1-1.8 2.3-3.6 3.7-5.2 1.6-1.8 3.3-3.4 5.3-4.7 2.2-1.5 4.5-2.7 7-3.5 2.8-.9 5.7-1.4 8.6-1.3 8.3 0 14.3 2.5 18.1 7.4s5.7 11.9 5.7 20.9v45.6c-.6.1-1.4.2-2.3.2l-2.3.1c-.6 0-1.2 0-2.3-.1-.8 0-1.6-.1-2.4-.2V90.7c0-8-1.2-13.8-3.8-17.3s-6.2-5.2-11.2-5.2c-3.2 0-6.4.7-9.3 2s-5.5 3.3-7.6 5.7c-2.2 2.7-3.9 5.9-5 9.3a38.45 38.45 0 00-1.8 12.6v35.7c-.8.1-1.6.2-2.3.2l-2.3.1c-.6 0-1.2 0-2.3-.1-.8 0-1.6-.1-2.4-.2V61.2zm117.8 24.5c0-6.2-1.5-10.8-4.4-13.7s-7.3-4.3-13-4.3c-3.5 0-6.9.2-10.3.8-2.8.4-5.6 1.1-8.3 1.9-.6-1.2-1-2.4-1.2-3.7-.3-1.5-.5-3-.5-4.5 2.9-.9 6-1.5 9-1.9 3.6-.5 7.3-.8 11-.8 9.1 0 15.9 2 20.4 6 4.4 4 6.7 10.3 6.6 18.9v47.7c-3.3.7-7.3 1.3-12 2-4.5.6-8.9 1-13.4 1-8.8 0-15.7-1.7-20.7-5.2s-7.6-9.2-7.6-17c-.1-3.5.7-7 2.2-10.1 1.4-2.9 3.5-5.5 6.1-7.5 2.8-2.1 6-3.7 9.3-4.6 3.9-1.1 7.9-1.6 12-1.6 3.4 0 6.3.1 8.8.4l6.1.6-.1-4.4zm0 12.6c-1.6-.2-3.6-.4-6-.6l-6.9-.4c-7.1 0-12.5 1.3-16.4 4-3.8 2.5-6 6.8-5.8 11.3-.1 2.6.5 5.2 1.8 7.5a11.9 11.9 0 004.6 4.3 19.58 19.58 0 006.2 2c2.2.3 4.5.5 6.8.5 2.7 0 5.5-.1 8.2-.4l7.5-1.1V98.3zm41.6 3.2c-5.3-1.5-9.4-3.7-12.4-6.7s-4.5-7.4-4.5-13.3c0-7.2 2.6-12.8 7.7-16.8 5.1-4.1 12.1-6.1 21-6.1 3.7 0 7.3.3 10.9 1 3.7.7 7.3 1.7 10.9 3-.2 2.6-.7 5.1-1.4 7.6a41.17 41.17 0 01-2.7 6.9c-2.4-1-4.9-1.8-7.5-2.5-2.8-.7-5.7-1.1-8.6-1.1-2.6-.1-5.2.4-7.5 1.5-1.8.9-2.8 2.8-2.7 4.7 0 2.1.6 3.5 1.9 4.4 1.7 1 3.5 1.9 5.4 2.4l8.1 2.4c2.5.7 4.9 1.6 7.1 2.8 2 1 3.9 2.4 5.4 4 1.6 1.7 2.8 3.7 3.5 5.9.9 2.8 1.4 5.7 1.3 8.6 0 3.4-.7 6.7-2.2 9.8s-3.7 5.8-6.4 7.9c-3 2.3-6.5 4.1-10.1 5.2-4.3 1.3-8.9 2-13.4 1.9-2.3 0-4.3-.1-6.2-.2-1.8-.1-3.6-.4-5.4-.7-1.7-.3-3.5-.7-5.2-1.2s-3.5-1.1-5.5-1.8c.2-2.6.6-5.2 1.3-7.7a43.5 43.5 0 012.8-7.6c2.9 1.1 5.8 2.1 8.8 2.8 2.9.6 5.8.9 8.7.9 1.4 0 2.9-.1 4.3-.4 1.5-.2 2.9-.6 4.3-1.3 1.3-.6 2.4-1.4 3.3-2.5s1.4-2.5 1.3-3.9c0-2.3-.7-3.9-2-4.9-1.8-1.2-3.7-2.1-5.7-2.6l-8.6-2.4zm84.6-16.2a11.55 11.55 0 00-1.1-5.5c-.7-1.4-1.8-2.5-3.1-3.3-1.5-.9-3.2-1.4-4.9-1.6-2.1-.3-4.3-.4-6.4-.4-5.5.1-11 1.1-16.3 3a42.34 42.34 0 01-3-6.9c-.7-2.5-1-5.2-1-7.8 7.7-2.6 15.8-4 24-4.1 9.8 0 17.5 2.4 23 7.1s8.3 12.3 8.3 22.6v42.4a116.9 116.9 0 01-12 3c-5.3 1-10.6 1.5-16 1.4-4.4 0-8.9-.4-13.2-1.3-3.7-.7-7.2-2.2-10.3-4.2-2.8-1.9-5.1-4.6-6.6-7.6-1.6-3.6-2.4-7.5-2.3-11.5-.1-4 .9-7.9 2.9-11.4 1.9-3 4.5-5.5 7.5-7.4 3.2-1.9 6.6-3.3 10.3-4a53.55 53.55 0 0111.3-1.2l9.1.4v-1.7zm0 14.6l-3.7-.5c-1.2-.1-2.4-.2-3.5-.2-4.6 0-8.3.8-11 2.5s-4 4.3-4 8c-.1 2 .4 4 1.5 5.7a9.02 9.02 0 003.8 2.9c1.5.6 3.1 1 4.7 1.1l4.3.2c1.4 0 2.8-.1 4.2-.4l3.7-.6V99.9zm39.3-24.4h-11.6c-.3-1.4-.4-2.7-.6-4.1l-.1-3.8.1-3.5c.1-1.3.3-2.6.6-3.8h11.6v-3.5c-.1-4.1.6-8.2 2-12.1a24.34 24.34 0 015.9-8.9c2.6-2.4 5.7-4.3 9.1-5.5 3.8-1.3 7.7-2 11.7-1.9 2.4 0 4.8.1 7.2.4 2.1.3 4.2.7 6.3 1.3a119.67 119.67 0 01-.9 8.4c-.4 2.5-1.1 5-2 7.4l-3.2-.6c-1.5-.3-3-.4-4.5-.3a13.67 13.67 0 00-8.1 2.3c-2.1 1.6-3.2 4.9-3.4 10v3.1h17c.3 1.4.4 2.7.6 4.1l.2 3.8-.2 3.5c-.1 1.3-.3 2.6-.6 3.8h-17v57.9c-3.3.6-6.6.8-9.9.8-3.4 0-6.7-.3-10-.8l-.2-58zm60.1 27.5c.4 5.7 2.3 9.8 5.9 12.3s8.3 3.8 14.1 3.8a53.33 53.33 0 009.8-.9c3.3-.6 6.5-1.5 9.5-2.6 1.1 2.2 2 4.4 2.7 6.8.8 2.8 1.2 5.6 1.3 8.5-8 2.9-16.4 4.4-24.9 4.2-5.9.1-11.9-.8-17.5-2.8-4.5-1.7-8.6-4.4-11.9-7.9-3.1-3.4-5.4-7.5-6.8-11.9-3-9.9-2.9-20.4.1-30.3a35.97 35.97 0 016.7-12.3c3-3.5 6.8-6.3 11-8.3 4.8-2.1 10.1-3.1 15.3-3 4.7-.1 9.3.8 13.7 2.6 3.8 1.7 7.3 4.2 10.1 7.4s5 7 6.3 11.1c1.4 4.5 2.2 9.1 2.1 13.8l-.2 5.3-.5 4.2h-46.8zm28.7-14c-.2-4.5-1.4-8.2-3.8-11-2.3-2.8-5.5-4.2-9.7-4.2-4.7 0-8.3 1.3-10.8 4s-3.9 6.4-4.4 11.2h28.7z" />
<defs>
<path
id="coronaSafeLogo_svg__B"
d="M707.2 84.4c-2.1-6.9-5.6-13.3-10.3-18.8-4.7-5.4-10.5-9.8-17-12.8-7-3.2-14.6-4.9-22.2-5-4.4-.1-8.8.3-13.1 1.1l.8-7.4c.8-9.9-5.4-19-14.9-21.9-3.1-1-6.4-1.7-9.6-2.2-3.2-.4-6.4-.6-9.7-.7-6.4-.2-12.8.8-18.9 2.8-6.2 2.1-11.9 5.4-16.7 9.8-5 4.6-8.9 10.2-11.4 16.5l-1.2 3.3a23.29 23.29 0 00-5.2 2.7c-7.7-4-16.6-6.1-26.9-6.3-10.5-.1-21 1.5-31 4.7-.2.1-.4.1-.5.2-.2-.1-.4-.2-.6-.2-4.6-1.8-9.3-3.1-14.1-4.1s-9.7-1.5-14.7-1.5c-13.7-.2-25.2 3.1-34.3 10-.8.6-1.6 1.2-2.3 1.9l-.1-.1c-8.3-7.8-19.9-11.8-34.4-12.1-4.7-.1-9.4.2-14.1.8-4.2.5-8.3 1.3-12.3 2.5s-7.6 3.5-10.3 6.6c-6.1-5.6-15.5-10.7-29.8-11-5.2-.1-10.5.6-15.5 2.2l-2 .7c-1.7-.7-3.4-1.2-5.1-1.4-1.1-.2-2.2-.3-3.2-.4-2.4-.2-4.7-.2-7.1-.1-1.1.1-2.2.1-3.4.3-6 .6-11.5 3.9-15 8.8-2.9-2.4-6-4.4-9.4-6.1-14.7-6.9-31.6-7.2-46.5-.8-.9.4-1.8.8-2.6 1.3-2.9-2.4-6.4-4-10.1-4.6-1.6-.3-3.1-.4-4.7-.4h-1.5c-4.6-.1-9.2.4-13.7 1.6-1.8-.8-3.7-1.3-5.6-1.6-1.1-.2-2.2-.3-3.2-.4-2.4-.2-4.7-.3-7.1-.1-1.1.1-2.2.1-3.4.3-6 .6-11.5 3.8-15 8.8-2.9-2.4-6-4.4-9.4-6.1-14.7-6.9-31.6-7.2-46.6-.8a62.82 62.82 0 00-5.1 2.7c-2-1.8-4.3-3.2-6.8-4.1-3.7-1.3-7.5-2.3-11.3-2.9-4.5-.8-9-1.2-13.6-1.3-8.2-.2-16.3 1.2-23.8 4.3-7.1 3-13.5 7.5-18.7 13.2-4.9 5.5-8.6 12-11 19-2.4 6.9-3.7 14.2-3.8 21.5-.3 17.8 4.5 32.3 14.3 42.9 10.1 11 24.2 16.7 42 17 4.7.1 9.4-.2 14-1 3.9-.6 7.7-1.6 11.4-2.8 2.2-.7 4.2-1.8 6-3.2 1.5.9 3 1.8 4.6 2.6 14.7 6.9 31.6 7.2 46.6.8 3.4-1.6 6.6-3.5 9.6-5.8 3.2 4.8 8.2 8.1 13.9 9.2 1.6.3 3.3.5 4.9.6l3.2.1h3.4c1.6 0 3.2-.2 4.8-.4 9.5-1.4 16.9-9 18-18.5.4.6.9 1.2 1.3 1.9 4.6 6 10.6 10.9 17.4 14.3 14.7 6.9 31.6 7.2 46.6.8 3.4-1.6 6.6-3.5 9.5-5.7a21.37 21.37 0 0013.8 9.2c1.6.3 3.3.5 4.9.6 1.1.1 2.1.1 3.2.1h3.4c1.6 0 3.2-.2 4.8-.4 7.1-1 13.1-5.5 16.1-12 2.8 6.6 8.7 11.3 15.7 12.6 1.6.3 3.3.5 4.9.6a43.98 43.98 0 003.2.1h3.4c1.6 0 3.2-.2 4.8-.4 4.1-.6 7.9-2.4 10.9-5.2 8.1 4.9 18.1 7.6 29.9 7.8 5.5.1 11-.2 16.4-.9a195.27 195.27 0 0013.3-2c1.4-.3 2.8-.7 4.1-1.2l5.4 1.9c2.3.7 4.6 1.2 6.9 1.7 2.6.5 5.2.9 7.8 1.1 2.4.2 5 .4 7.8.4 6.8.2 13.5-.7 20-2.6 5.4-1.6 10.5-4 15.1-7.2.5.4 1 .8 1.6 1.2 5.4 3.8 11.4 6.4 17.8 7.8 5.8 1.3 11.7 1.9 17.6 2 6.8.2 13.5-.3 20.2-1.5 4.8-.8 9.6-1.9 14.3-3.3.3-.1.7-.2 1-.3 2.6 2 5.7 3.3 8.9 3.9 8.9 1.7 18 1.8 26.9.5 6.5-1 12.2-4.9 15.4-10.6 4.4 3.7 9.4 6.7 14.7 8.9 8 3.1 16.5 4.7 25.1 4.7 11.1.3 22.1-1.4 32.6-5.1 8.5-3.1 14.1-11.2 14-20.2-.1-4.4-.6-8.7-1.7-13 2.7-2.9 4.5-6.5 5.3-10.4.3-1.7.6-3.8.9-6.2.2-2.3.4-4.7.4-7-.4-7.2-1.3-14.1-3.3-20.8z"
/>
</defs>
</svg>
</div>
<button
type="button"
className="focus:shadow-outline-primary p-1 rounded-md focus:outline-none"
onClick={toggleMode}
aria-label="Toggle color mode"
>
{mode === "dark" ? (
<Sun className="w-5 h-5" aria-hidden="true" />
) : (
<Moon className="w-5 h-5" aria-hidden="true" />
)}
</button>
</div>
</div>
</header>
);
}
Example #4
| Source File: Navigation.js From popper.js.org with MIT License | 5 votes |
|
export default function Navigation({ description, lang, meta, path }) {
const [menuOpen, setMenuOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
const menuRef = useRef();
function openMenu() {
setMenuOpen(true);
}
function closeMenu() {
setMenuOpen(false);
}
function handleScroll() {
const scrollTop = menuRef.current.scrollTop;
scrollOffset = scrollTop;
setScrolled(scrollTop > 10);
}
useLayoutEffect(() => {
const menu = menuRef.current;
menu.scrollTop = scrollOffset;
const currentItem = menu.querySelector('[aria-current="page"]');
if (currentItem) {
const rect = currentItem.getBoundingClientRect();
if (rect.bottom > window.innerHeight || rect.top < 0) {
currentItem.scrollIntoView();
}
}
}, []);
return (
<MdxRoutes>
{routes => (
<>
<MobileHeader>
<MenuButton
onClick={openMenu}
aria-expanded={menuOpen ? 'true' : 'false'}
aria-label="Click to open navigation menu"
>
<Menu size={30} />
</MenuButton>
<PopperTextLogo mobile />
</MobileHeader>
<Container open={menuOpen}>
<PopperTextLogoContainer>
<PopperTextLogo />
</PopperTextLogoContainer>
<CloseMenuButton onClick={closeMenu}>Close Menu</CloseMenuButton>
<Search />
<MenuContents ref={menuRef} onScroll={handleScroll}>
{createTree(processRoutes(routes, path)).map((route, index) => (
<Block route={route} key={index} />
))}
</MenuContents>
</Container>
</>
)}
</MdxRoutes>
);
}
Example #5
| Source File: Nav.js From ecomloop.github.io with MIT License | 4 votes |
|
render() {
const { active } = this.state,
{ subNav, data } = this.props,
NavLink = ({ to, className, children, ...props }) => (
<Link
to={to}
className={`NavLink ${
to === this.state.currentPath ? 'active' : ''
} ${className}`}
onClick={this.handleLinkClick}
{...props}
>
{children}
</Link>
)
return (
<nav className={`Nav ${active ? 'Nav-active' : ''}`}>
<div className="Nav--Container container">
<Link to="/" onClick={this.handleLinkClick}>
<Logo />
</Link>
<div className="Nav--Links">
{
<div className={`Nav--Group ${this.state.activeSubNav === 'posts' ? 'active' : ''}`}>
<span
className={`Nav--GroupParent ${this.props.location.pathname.includes('solution')? 'active': ''}`}
onClick={() => this.toggleSubNav('posts')}
>
what we do
<div className="Nav--GroupLinks">
<NavLink to="/ai-integration/" className="Nav--GroupLink">
AI integration
</NavLink>
<NavLink to="/api-integration-services/" className="Nav--GroupLink">
API integration services
</NavLink>
<NavLink to="/nft-consulting/" className="Nav--GroupLink">
Conversion Rate Optimization
</NavLink>
<NavLink to="/crypto-consulting/" className="Nav--GroupLink">
Crypto Consulting
</NavLink>
<NavLink to="/digital-strategy-consulting/" className="Nav--GroupLink">
Digital strategy consulting
</NavLink>
<NavLink to="/metaverse-vr-consulting/" className="Nav--GroupLink">
Metaverse & VR consulting
</NavLink>
<NavLink to="/web-3-development/" className="Nav--GroupLink">
Mobile & web 3 development
</NavLink>
<NavLink to="/nft-consulting/" className="Nav--GroupLink">
NFT consulting
</NavLink>
{/*
<NavLink to="/ecommerce-services/" className="Nav--GroupLink">
Ecommerce agency services
</NavLink>
<NavLink to="/digital-platform-development/" className="Nav--GroupLink">
Digital platform development
</NavLink>
*/}
</div>
{/*<div className="Nav--GroupLinks">
<NavLink to="/solutions/" className="Nav--GroupLink">
All Solutions
</NavLink>
{subNav.products.map((link, index) => (
<NavLink
to={`/solution/${link.handle}/`}
key={'posts-subnav-link-' + index}
className="Nav--GroupLink"
>
{link.title}
</NavLink>
))}
</div>
*/}
</span>
</div>
}
{
<div className={`Nav--Group ${this.state.activeSubNav === 'tools' ? 'active' : ''}`}>
<span
className={`Nav--GroupParent ${this.props.location.pathname.includes('tools')? 'active': ''}`}
onClick={() => this.toggleSubNav('tools')}
>
tools
<div className="Nav--GroupLinks">
<NavLink
to={`https://headless.ecomloop.com/`}
key={'headless'}
className="Nav--GroupLink"
target="_blank"
>
Headless // gatsby + shopify theme
</NavLink>
<NavLink
to={`https://www.gatsbyjs.com/plugins/gatsby-plugin-klaviyo/`}
key={'klatsby'}
className="Nav--GroupLink"
target="_blank"
>
Klatsby // klayvio plugin for gatsby
</NavLink>
<NavLink
to={`#`}
key={'#'}
className="Nav--GroupLink"
target="_blank"
>
Shoptomo // shopify analtyics app
</NavLink>
</div>
</span>
</div>
}
<NavLink to="/blog/" title="ecomloop blog">blog</NavLink>
<NavLink to="/contact/" title="digital commerce solutions" className="Nav--CTA animated rubberBand slow delay-5s"> start {next} project</NavLink>
</div>
<button
className="Nav--MenuButton"
onClick={this.handleMenuToggle}
to='/home'
>
{active ? <X /> : <Menu />}
</button>
</div>
</nav>
)
}
