I have created a blog and I want to ensure it is responsive. My aim is to have a dropdown menu on the right side for mobile devices, featuring options for new profile and logout. On desktop mode, I prefer to have the about, new, and profile options in the middle with only the logout button on the right.
Here is the code I have been working on so far. I used 'lg:' to make it responsive for larger than desktop screens.
If there are any grammatical or spelling errors, I apologize in advance as English is not my first language.
``import React from 'react'; import { Link } from 'react-router-dom'; import { useUserContext } from './UserProvider';`
function Navbar() {
const { user, setUser } = useUserContext()
function logout() { localStorage.removeItem('user') setUser(null)
}
return ( Tech-Blog
<div className=" NavLinks bg-pink-100 flex flex-col absolute top-10 right-0 p-4 lg:flex-row ">
<div className="Links
flex flex-col
lg:flex-row lg:absolute lg:left-1/2 lg:top-1/2 lg:transform md:-translate-x-1/2 lg:-translate-y-1/2 text-2xl lg:justify-between lg:w-60 " >
<div className='hover:cursor-pointer '>About</div>
<div className='hover:cursor-pointer '>Profile</div>
<Link to="/new">New</Link>
</div>
<div className='buttons flex md:flex-row md:absolute lg:right-8 lg:top-1 lg:gap-6 '>
{/* check if someone is logged in, if yes then show a logout button */}
{user === null ?
<> <Link to="/login" ><button className='bg-blue-400 px-4 rounded-md py-2 text-white'>SignIn</button></Link>
<Link to="/register" ><button className='bg-blue-400 px-4 rounded-md py-2 text-white'> Register</button></Link> </> :
<button className='bg-blue-400 px-4 rounded-md py-2 text-white font-mono' onClick={logout}>Log out </button>}
</div>
</div>
</div>
) }
export default Navbar `
I tried making some changes in Tailwind using 'lg:' and other adjustments