Skip to content

Commit

Permalink
navbar ui component
Browse files Browse the repository at this point in the history 
implements #2
  • Loading branch information
= committed Sep 26, 2024
1 parent 6f2de57 commit 9f42caf
Showing 1 changed file with 34 additions and 23 deletions.
57 changes: 34 additions & 23 deletions app/components/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@ const Navbar = () => {
<FaLeaf className="text-white text-3xl mr-2" />
<span className="text-white text-2xl font-bold">
<a href="/">FarmRuler</a>
</span>

<span className="text-white text-2xl font-bold pl-5">
</span>
<span className="text-white text-2xl font-bold pl-5 hover:text-gray-200">
<a href="/dashboard">Dashboard</a>
</span>


</span>
</div>
<div className="hidden md:flex space-x-6">
<a href="/about" className="text-white hover:text-gray-300">About</a>
<a href="/contact" className="text-white hover:text-gray-300">Contact</a>
<a href="/faq" className="text-white hover:text-gray-300">FAQ</a>
<button className="bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-200" ><a href="/sign-in"> Sign In </a></button>

<button className="bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-200" ><a href="/sign-up"> Sign Up </a></button>
<div className="hidden md:flex gap-4 items-center">
<a href="/about" className="text-white hover:text-gray-300 hover:text-xl transition-all ease-out duration-200">About</a>
<a href="/contact" className="text-white hover:text-gray-300 hover:text-xl transition-all ease-out duration-200">Contact</a>
<a href="/faq" className="text-white hover:text-gray-300 hover:text-xl transition-all ease-out duration-200">FAQ</a>
<button className="bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-200">
<a href="/sign-in"> Sign In </a>
</button>
<button className="bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-200">
<a href="/sign-up"> Sign Up </a>
</button>
</div>
<div className="md:hidden">
<button onClick={() => setIsOpen(!isOpen)} className="text-white focus:outline-none">
Expand All @@ -35,17 +35,28 @@ const Navbar = () => {
</button>
</div>
</div>
{isOpen && (
<div className="md:hidden">
<a href="#about" className="block text-white hover:text-gray-300 py-2">About</a>
<a href="#contact" className="block text-white hover:text-gray-300 py-2">Contact</a>
<a href="#faq" className="block text-white hover:text-gray-300 py-2">FAQ</a>
<button className="block w-full bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-200 mt-2" ><a href="/sign-in"> Sign In </a></button>
<button className="block w-full bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-200 mt-2" ><a href="/sign-up"> Sign Up </a></button>
</div>
)}

{/* Side drawer positioned on the right */}
<div className={`fixed top-0 right-0 h-full bg-green-600 text-white w-64 transform ${isOpen ? "translate-x-0" : "translate-x-full"} transition-transform duration-300 ease-in-out md:hidden`}>
<button onClick={() => setIsOpen(false)} className="p-4 focus:outline-none">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<a href="/about" className="block text-white hover:text-gray-300 py-2 px-4">About</a>
<a href="/contact" className="block text-white hover:text-gray-300 py-2 px-4">Contact</a>
<a href="/faq" className="block text-white hover:text-gray-300 py-2 px-4">FAQ</a>

{/* Sign In and Sign Up buttons inside the drawer */}
<button className="block w-full bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-200 mt-2">
<a href="/sign-in"> Sign In </a>
</button>
<button className="block w-full bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-200 mt-2">
<a href="/sign-up"> Sign Up </a>
</button>
</div>
</nav>
);
};

export default Navbar;
export default Navbar;

0 comments on commit 9f42caf

Please sign in to comment.