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