shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 22:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

NAVBAR

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-24 22:23:14 +05:30
parent 2a449a6f00
commit 6e55237581
15 changed files with 98 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/banner/Banner.jsx
View File

@@ -16,7 +16,7 @@ function Banner({ item, index }) {
return (
<section className="spotlight w-full h-full">
<img
src={`https://wsrv.nl/?url=${item.poster}`}
src={`${item.poster}`}
alt={item.title}
className="absolute right-0 object-cover h-full w-[80%] bg-auto max-[1200px]:w-full max-[1200px]:bottom-0"
/>

2
src/components/cart/Cart.jsx
View File

@@ -47,7 +47,7 @@ function Cart({ label, data, path }) {
ref={(el) => (cardRefs.current[index] = el)}
>
<img
src={`https://wsrv.nl/?url=${item.poster}`}
src={`${item.poster}`}
alt={item.title}
className="flex-shrink-0 w-[60px] h-[75px] rounded-md object-cover cursor-pointer"
onClick={() => navigate(`/watch/${item.id}`)}

4
src/components/categorycard/CategoryCard.jsx
View File

@@ -143,7 +143,7 @@ const CategoryCard = React.memo(
<div className="overlay"></div>
<div className="overflow-hidden">
<img
src={`https://wsrv.nl/?url=${item.poster}`}
src={`${item.poster}`}
alt={item.title}
className={`w-full h-[320px] object-cover max-[1200px]:h-[35vw] max-[758px]:h-[45vw] max-[478px]:h-[60vw] group-hover:blur-[7px] transform transition-all duration-300 ease-in-out ultra-wide:h-[400px] ${cardStyle}`}
/>
@@ -258,7 +258,7 @@ const CategoryCard = React.memo(
<div className="overlay"></div>
<div className="overflow-hidden">
<img
src={`https://wsrv.nl/?url=${item.poster}`}
src={`${item.poster}`}
alt={item.title}
className={`w-full h-[250px] object-cover max-[1200px]:h-[35vw] max-[758px]:h-[45vw] max-[478px]:h-[60vw] ${cardStyle} group-hover:blur-[7px] transform transition-all duration-300 ease-in-out `}
/>

2
src/components/continue/ContinueWatching.jsx
View File

@@ -92,7 +92,7 @@ const ContinueWatching = () => {
className="inline-block bg-[#2a2c31] absolute left-0 top-0 w-full h-full group"
>
<img
src={`https://wsrv.nl/?url=${item?.poster}`}
src={`${item?.poster}`}
alt={item?.title}
className="block w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:blur-[4px]"
title={item?.title}

99
src/components/navbar/Navbar.jsx
View File

@@ -1,11 +1,8 @@
import { useState, useEffect } from "react";
import logoTitle from "@/src/config/logoTitle";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faBars,
faFilm,
faRandom,
faStar,
} from "@fortawesome/free-solid-svg-icons";
import { useLanguage } from "@/src/context/LanguageContext";
import { Link, useLocation } from "react-router-dom";
@@ -13,7 +10,6 @@ import Sidebar from "../sidebar/Sidebar";
import { SearchProvider } from "@/src/context/SearchContext";
import WebSearch from "../searchbar/WebSearch";
import MobileSearch from "../searchbar/MobileSearch";
import { FaTelegramPlane } from "react-icons/fa";
function Navbar() {
const location = useLocation();
@@ -41,11 +37,13 @@ function Navbar() {
const handleCloseSidebar = () => {
setIsSidebarOpen(false);
};
const handleRandomClick = () => {
if (location.pathname === "/random") {
window.location.reload();
}
};
useEffect(() => {
setIsNotHomePage(
location.pathname !== "/" && location.pathname !== "/home"
@@ -55,89 +53,64 @@ function Navbar() {
return (
<SearchProvider>
<nav
className={`fixed top-0 left-0 w-full h-16 z-[1000000] flex p-4 py-8 items-center justify-between transition-all duration-300 ease-in-out ${
isNotHomePage ? "bg-[#201F31]" : "bg-opacity-0"
} ${
isScrolled ? "bg-[#2D2B44] bg-opacity-90 backdrop-blur-md" : ""
} max-[600px]:h-fit max-[600px]:flex-col max-[1200px]:bg-opacity-100 max-[600px]:py-2`}
className={`fixed top-0 left-0 w-full z-[1000000] transition-all duration-300 ease-in-out
${isNotHomePage ? "bg-[#18181B]" : "bg-opacity-0"}
${isScrolled ? "bg-[#18181B]/80 backdrop-blur-md shadow-lg" : ""}`}
>
<div className="flex gap-x-6 items-center w-fit max-lg:w-full max-lg:justify-between">
<div className="flex gap-x-6 items-center w-fit">
<div className="max-w-[1920px] mx-auto px-4 h-16 flex items-center justify-between">
{/* Left Section */}
<div className="flex items-center gap-8">
<div className="flex items-center gap-4">
<FontAwesomeIcon
icon={faBars}
className="text-2xl text-white mt-1 cursor-pointer"
className="text-xl text-gray-200 cursor-pointer hover:text-white transition-colors"
onClick={handleHamburgerClick}
/>
<Link
to="/"
className="text-4xl font-bold max-[575px]:text-3xl cursor-pointer"
>
{logoTitle.slice(0, 3)}
<span className="text-[#FFBADE]">{logoTitle.slice(3, 4)}</span>
{logoTitle.slice(4)}
<Link to="/" className="flex items-center">
<img src="/logo.png" alt="JustAnime Logo" className="h-9 w-auto" />
</Link>
</div>
</div>
{/* Center Section - Search */}
<div className="flex-1 flex justify-center items-center max-w-none mx-8 hidden md:flex">
<div className="flex items-center gap-2 w-[600px]">
<WebSearch />
</div>
<div className="flex gap-x-7 items-center max-lg:hidden">
{[
{ icon: faRandom, label: "Random", path: "/random" },
{ icon: faFilm, label: "Movie", path: "/movie" },
{ icon: faStar, label: "Popular", path: "/most-popular" },
].map((item) => (
<Link
key={item.path}
to={
item.path === "/random"
? location.pathname === "/random"
? "#"
: "/random"
: item.path
}
onClick={item.path === "/random" ? handleRandomClick : undefined}
className="flex flex-col gap-y-1 items-center cursor-pointer"
to={location.pathname === "/random" ? "#" : "/random"}
onClick={handleRandomClick}
className="p-[10px] aspect-square bg-[#2a2a2a]/75 text-white/50 hover:text-white rounded-lg transition-colors flex items-center justify-center"
title="Random Anime"
>
<FontAwesomeIcon
icon={item.icon}
className="text-[#ffbade] text-xl font-bold"
/>
<p className="text-[15px]">{item.label}</p>
<FontAwesomeIcon icon={faRandom} className="text-lg" />
</Link>
))}
<div className="flex flex-col gap-y-1 items-center w-auto">
<div className="flex">
{["EN", "JP"].map((lang, index) => (
</div>
</div>
{/* Right Section */}
<div className="flex items-center gap-6">
<div className="hidden md:flex items-center gap-2 bg-[#27272A] rounded-md p-1">
{["EN", "JP"].map((lang) => (
<button
key={lang}
onClick={() => toggleLanguage(lang)}
className={`px-1 py-[1px] text-xs font-bold ${
index === 0 ? "rounded-l-[3px]" : "rounded-r-[3px]"
} ${
className={`px-3 py-1 text-sm font-medium rounded ${
language === lang
? "bg-[#ffbade] text-black"
: "bg-gray-600 text-white"
? "bg-[#3F3F46] text-white"
: "text-gray-400 hover:text-white"
}`}
>
{lang}
</button>
))}
</div>
<div className="w-full">
<p className="whitespace-nowrap text-[15px]">Anime name</p>
</div>
</div>
<Link
to="https://t.me/zenime_discussion"
className="flex flex-col gap-y-1 items-center cursor-pointer"
>
<FaTelegramPlane
// icon={faTelegram}
className="text-xl font-bold text-[#ffbade]"
/>
<p className="text-[15px] mb-[1px] text-white">Join Telegram</p>
</Link>
</div>
{/* Mobile Search */}
<div className="md:hidden">
<MobileSearch />
</div>
</nav>
<Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />
</SearchProvider>

11
src/components/searchbar/MobileSearch.jsx
View File

@@ -24,10 +24,11 @@ function MobileSearch() {
return (
<>
{isSearchVisible && (
<div className="flex w-full mt-2 relative custom-md:hidden ">
<div className="flex w-full mt-2 relative custom-md:hidden px-4">
<div className="relative w-full">
<input
type="text"
className="bg-white px-4 py-2 text-black focus:outline-none w-full rounded-l-md"
className="w-full px-5 py-2 bg-[#2a2a2a]/75 text-white border border-white/10 rounded-lg focus:outline-none focus:border-white/30 transition-colors placeholder-white/50"
placeholder="Search anime..."
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
@@ -48,14 +49,16 @@ function MobileSearch() {
}
}}
/>
<button className="flex items-center justify-center p-2 bg-white rounded-r-md"
<button
className="absolute right-4 top-1/2 -translate-y-1/2 text-white/50 hover:text-white transition-colors"
onClick={handleSearchClick}
>
<FontAwesomeIcon
icon={faMagnifyingGlass}
className="text-black text-lg"
className="text-lg"
/>
</button>
</div>
{searchValue.trim() && isFocused && (
<div
ref={addSuggestionRef}

8
src/components/searchbar/WebSearch.jsx
View File

@@ -27,10 +27,10 @@ function WebSearch() {
};
return (
<div className="flex items-center relative w-[380px] max-[600px]:w-fit">
<div className="flex items-center relative w-[450px] max-[600px]:w-fit">
<input
type="text"
className="bg-white px-4 py-2 text-black focus:outline-none w-full max-[600px]:hidden"
className="w-full px-5 py-2 bg-[#2a2a2a]/75 text-white rounded-lg focus:outline-none transition-colors placeholder-white/50 max-[600px]:hidden"
placeholder="Search anime..."
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
@@ -54,12 +54,12 @@ function WebSearch() {
}}
/>
<button
className="bg-white p-2 max-[600px]:bg-transparent focus:outline-none max-[600px]:p-0"
className="absolute right-4 text-white/50 hover:text-white transition-colors max-[600px]:static max-[600px]:bg-transparent focus:outline-none max-[600px]:p-0"
onClick={handleSearchClick}
>
<FontAwesomeIcon
icon={faMagnifyingGlass}
className="text-lg text-black hover:text-[#ffbade] max-[600px]:text-white max-[600px]:text-2xl max-[575px]:text-xl max-[600px]:mt-[7px]"
className="text-lg max-[600px]:text-white max-[600px]:text-2xl max-[575px]:text-xl max-[600px]:mt-[7px]"
/>
</button>
{searchValue.trim() && isFocused && (

2
src/components/sidecard/Sidecard.jsx
View File

@@ -73,7 +73,7 @@ function Sidecard({ data, label, className, limit }) {
</div>
)}
<img
src={`https://wsrv.nl/?url=${item.poster}`}
src={`${item.poster}`}
alt={item.title}
className="flex-shrink-0 w-[60px] h-[75px] rounded-md object-cover cursor-pointer"
onClick={() => navigate(`/watch/${item.id}`)}

1
src/components/splashscreen/SplashScreen.css
View File

@@ -2,6 +2,7 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #0a0a0a;
color: white;
}

2
src/components/suggestion/Suggestion.jsx
View File

@@ -55,7 +55,7 @@ function Suggestion({ keyword, className }) {
}}
>
<img
src={`https://wsrv.nl/?url=${item.poster}`}
src={`${item.poster}`}
className="w-[50px] h-[75px] flex-shrink-0 object-cover"
alt=""
onError={(e) => {

2
src/components/topten/Topten.jsx
View File

@@ -99,7 +99,7 @@ function Topten({ data, className }) {
>
{/* Image with tooltip behavior */}
<img
src={`https://wsrv.nl/?url=${item.poster}`}
src={`${item.poster}`}
alt={item.title}
className="w-[60px] h-[75px] rounded-md object-cover flex-shrink-0 cursor-pointer"
onClick={() => navigate(`/watch/${item.id}`)}

2
src/components/trending/Trending.jsx
View File

@@ -51,7 +51,7 @@ const Trending = ({ trending }) => {
className="inline-block bg-[#2a2c31] absolute w-auto left-[40px] right-0 top-0 bottom-0 max-[575px]:left-0 max-[575px]:top-0 max-[575px]:bottom-0"
>
<img
src={`https://wsrv.nl/?url=${item.poster}`}
src={`${item.poster}`}
alt={item.title}
className="block w-full h-full object-cover hover:cursor-pointer"
title={item.title}

2
src/pages/Home/Home.jsx
View File

@@ -18,7 +18,7 @@ function Home() {
if (!homeInfo) return <Error error="404" />;
return (
<>
<div className="px-4 w-full max-[1200px]:px-0">
<div className="pt-16 px-4 w-full max-[1200px]:px-0">
<Spotlight spotlights={homeInfo.spotlights} />
<ContinueWatching />
<Trending trending={homeInfo.trending} />

4
src/pages/animeInfo/AnimeInfo.jsx
View File

@@ -157,14 +157,14 @@ function AnimeInfo({ random = false }) {
<>
<div className="relative grid grid-cols-[minmax(0,75%),minmax(0,25%)] h-fit w-full overflow-hidden text-white mt-[64px] max-[1200px]:flex max-[1200px]:flex-col max-md:mt-[50px]">
<img
src={`https://wsrv.nl/?url=${poster}`}
src={`${poster}`}
alt={`${title} Poster`}
className="absolute inset-0 object-cover w-full h-full filter grayscale blur-lg z-[-900]"
/>
<div className="flex items-start z-10 px-14 py-[70px] bg-[#252434] bg-opacity-70 gap-x-8 max-[1024px]:px-6 max-[1024px]:py-10 max-[1024px]:gap-x-4 max-[575px]:flex-col max-[575px]:items-center max-[575px]:justify-center">
<div className="relative w-[180px] h-[270px] max-[575px]:w-[140px] max-[575px]:h-[200px] flex-shrink-0">
<img
src={`https://wsrv.nl/?url=${poster}`}
src={`${poster}`}
alt={`${title} Poster`}
className="w-full h-full object-cover object-center flex-shrink-0"
/>

6
src/pages/watch/Watch.jsx
View File

@@ -186,7 +186,7 @@ export default function Watch() {
<img
src={
!animeInfoLoading
? `https://wsrv.nl/?url=${animeInfo?.poster}`
? `${animeInfo?.poster}`
: "https://i.postimg.cc/rFZnx5tQ/2-Kn-Kzog-md.webp"
}
alt={`${animeInfo?.title} Poster`}
@@ -336,7 +336,7 @@ export default function Watch() {
</p>
<div className="absolute inset-0 z-10 bg-[url('https://i.postimg.cc/pVGY6RXd/thumb.png')] bg-repeat"></div>
<img
src={`https://wsrv.nl/?url=${season.season_poster}`}
src={`${season.season_poster}`}
alt=""
className="w-full h-full object-cover blur-[3px] opacity-50"
/>
@@ -383,7 +383,7 @@ export default function Watch() {
<div className="flex flex-col gap-y-4 items-start ml-8 max-[1400px]:ml-0 max-[1400px]:mt-10 max-[1400px]:flex-row max-[1400px]:gap-x-6 max-[1024px]:px-[30px] max-[1024px]:mt-8 max-[500px]:mt-4 max-[500px]:px-4">
{animeInfo && animeInfo?.poster ? (
<img
src={`https://wsrv.nl/?url=${animeInfo?.poster}`}
src={`${animeInfo?.poster}`}
alt=""
className="w-[100px] h-[150px] object-cover max-[500px]:w-[70px] max-[500px]:h-[90px]"
/>