Skip to content

Fixed: Mobile Navbar #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Tripti-09 wants to merge 1 commit into
base: deploy
Choose a base branch
from
Open

Fixed: Mobile Navbar #175

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 89 additions & 65 deletions src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { FiSearch, FiX } from 'react-icons/fi';
import { useAuth } from '../context/AuthContext';

export const Navbar = () => {
const { user } = useAuth(); // Get user from context
const { user } = useAuth();
const navigate = useNavigate();

const [showSearch, setShowSearch] = useState(false);
Expand All @@ -14,7 +14,7 @@ export const Navbar = () => {
const handleProfileClick = () => navigate('/profile');

const toggleSearch = () => {
setShowSearch(!showSearch);
setShowSearch((prev) => !prev);
setInputValue("");
};

Expand All @@ -26,78 +26,102 @@ export const Navbar = () => {
}
};



return (
<nav className="bg-black w-full fixed top-0 left-0 z-50 shadow-md h-[70px] flex items-center px-6">
{/* Left: Logo */}
<div className="w-[220px]">
<div className="text-2xl font-extrabold bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-400 bg-clip-text text-transparent">
Anime Ecstasy
<>
<nav className="bg-gray-800 w-full fixed top-0 left-0 z-50 h-[70px] flex items-center px-6">

{/* Left: Logo */}
<div className="w-[220px] overflow-hidden">
<div
className={`text-2xl font-extrabold bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-400 bg-clip-text text-transparent transition-all duration-300 ease-in-out`}
>
{showSearch ? "AE" : "Anime Ecstasy"}
</div>
</div>
</div>

{/* Center: Nav Links (absolute center) */}
<div className="absolute left-1/2 transform -translate-x-1/2 flex space-x-8">
<NavLink to="/" className="text-xl font-bold text-white hover:text-purple-500">
Home
</NavLink>
<NavLink to="/about" className="text-xl font-bold text-white hover:text-blue-500">
About Us
</NavLink>
<NavLink to="/watchlist" className="text-xl font-bold text-white hover:text-pink-300">
Watch-list
</NavLink>
</div>
{/* Center: Nav Links (hidden on mobile) */}
<div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 space-x-8">
<NavLink to="/" className="text-xl font-bold text-white hover:text-purple-500">
Home
</NavLink>
<NavLink to="/about" className="text-xl font-bold text-white hover:text-blue-500">
About Us
</NavLink>
<NavLink to="/watchlist" className="text-xl font-bold text-white hover:text-pink-300">
Watch-list
</NavLink>
</div>

{/* Right: Search + Auth */}
<div className="ml-auto flex items-center space-x-4">
{/* Search */}
<div className="relative">
{showSearch ? (
<div className="flex items-center">
<input
type="text"
placeholder="Search..."
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={handleKeyDown}
className="px-3 py-1 text-black rounded-md focus:outline-none w-[200px]"
/>
<FiX
className="text-white text-2xl ml-2 cursor-pointer"
{/* Right: Search + Auth */}
<div className="ml-auto flex items-center space-x-4">

{/* Search */}
<div className="relative flex items-center">
<div
className={`flex items-center bg-white rounded-md shadow-lg overflow-hidden transition-all duration-300 ease-in-out ${
showSearch ? "w-[220px] px-2" : "w-0 px-0"
}`}
>
{showSearch && (
<input
type="text"
placeholder="Search..."
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={handleKeyDown}
className="px-2 py-1 text-black rounded-md focus:outline-none w-full"
autoFocus
/>
)}
{showSearch && (
<FiX
className="text-black text-xl ml-2 cursor-pointer"
onClick={toggleSearch}
title="Close search"
/>
)}
</div>

{!showSearch && (
<FiSearch
className="text-white text-2xl cursor-pointer ml-2"
onClick={toggleSearch}
title="Close search"
title="Open search"
/>
</div>
)}
</div>

{/* Auth */}
{user ? (
<button
onClick={handleProfileClick}
className="bg-green-600 text-white px-5 py-2 rounded hover:bg-green-700 transition"
>
Profile
</button>
) : (
<FiSearch
className="text-white text-2xl cursor-pointer"
onClick={toggleSearch}
title="Open search"
/>
<button
onClick={handleLoginClick}
className="bg-blue-600 text-white px-5 py-2 rounded hover:bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-400 transition"
>
Login
</button>
)}
</div>
</nav>

{/* Auth */}
{user ? (
<button
onClick={handleProfileClick}
className="bg-green-600 text-white px-5 py-2 rounded hover:bg-green-700 transition"
>
Profile
</button>
) : (
<button
onClick={handleLoginClick}
className="bg-blue-600 text-white px-5 py-2 rounded hover:bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-400 transition"
>
Login
</button>
)}
{/* Mobile Navigation Links */}
<div className="flex flex-row justify-around bg-gray-800 text-white pb-2 lg:hidden mt-[70px] px-2">
<NavLink to="/" className="text-lg font-semibold hover:text-purple-400">
Home
</NavLink>
<NavLink to="/about" className="text-lg font-semibold hover:text-blue-400">
About Us
</NavLink>
<NavLink to="/watchlist" className="text-lg font-semibold hover:text-pink-300">
Watch-list
</NavLink>
</div>
</nav>


</>
);
};
};