diff options
Diffstat (limited to 'react/07-react-router/src/components/Navbar.jsx')
| -rw-r--r-- | react/07-react-router/src/components/Navbar.jsx | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/react/07-react-router/src/components/Navbar.jsx b/react/07-react-router/src/components/Navbar.jsx new file mode 100644 index 0000000..6de4955 --- /dev/null +++ b/react/07-react-router/src/components/Navbar.jsx @@ -0,0 +1,45 @@ +import { Link, NavLink } from "react-router"; + +const Navbar = () => { + return ( + <nav className="navbar"> + {/* Logo */} + <Link to="#" className="nav-link">BrandName</Link> + + {/* Mobile Toggle (Checkbox Hack) */} + <input type="checkbox" id="nav-toggle" className="nav-toggle" /> + <label htmlFor="nav-toggle" className="hamburger"> + <span></span> + <span></span> + <span></span> + </label> + + <ul className="nav-menu"> + <li> + <NavLink className="nav-link" to="/" end> + Home + </NavLink> + </li> + <li> + <NavLink className="nav-link" to="/about" end> + About + </NavLink> + </li> + <li> + <NavLink className="nav-link" to="/posts" end> + Posts + </NavLink> + </li> + + <li> + <NavLink className="nav-link" to="/login">Login</NavLink> + </li> + <li> + <NavLink className="nav-link" to="/register">Register</NavLink> + </li> + </ul> + </nav> + ) +} + +export default Navbar
\ No newline at end of file |