Added React Router sample app

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