react native nav bars
$ npm install react-native-navbar --savereact native nav bars
$ npm install react-native-navbar --saveReactjs Navbar component
import React, { useEffect, useState } from "react";
const NavBar = ({ menuItems = [{route: "/", label: "Home"}], brand = "Tailwind" }) => {
const [toggle, setToggle] = useState(false)
const [matches, setMatches] = useState(
window.matchMedia("(min-width: 600px)").matches
)
useEffect(() => {
window
.matchMedia("(min-width: 600px)")
.addEventListener('change', e => {
setMatches(e.matches);
setToggle(false);
});
}, []);
const toggleHandler = () => {
setToggle(!toggle);
}
const desktopMenu = (
<ul className="flex last:pr-3">
{menuItems.map(item => {
return <li key={item.route}><a href={item.route} className="p-2 hover:bg-gray-100 mx-1 rounded">{item.label}</a></li>
})}
</ul>
);
const mobileMenu = (
<ul className="flex flex-col text-center bg-gray-700 text-gray-50">
{menuItems.map(item => {
return <li key={item.route}><a href={item.route} className="block p-2 hover:bg-gray-600">{item.label}</a></li>
})}
</ul>
);
return (
<nav>
<div className="bg-gray-800 text-slate-200 flex justify-between items-center w-full">
<div className={`flex justify-between ${!matches && "w-full"}`}>
<h1 className="h-14 text-2xl font-bold px-7 flex items-center">{brand}</h1>
{!matches && <button onClick={toggleHandler}><i className="pr-4">fx</i></button>}
</div>
{matches && desktopMenu}
</div>
{(!matches && toggle) && mobileMenu}
</nav>
)
}
export default NavBar;Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
