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 ( return (
<section className="spotlight w-full h-full"> <section className="spotlight w-full h-full">
<img <img
src={`https://wsrv.nl/?url=${item.poster}`} src={`${item.poster}`}
alt={item.title} alt={item.title}
className="absolute right-0 object-cover h-full w-[80%] bg-auto max-[1200px]:w-full max-[1200px]:bottom-0" 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)} ref={(el) => (cardRefs.current[index] = el)}
> >
<img <img
src={`https://wsrv.nl/?url=${item.poster}`} src={`${item.poster}`}
alt={item.title} alt={item.title}
className="flex-shrink-0 w-[60px] h-[75px] rounded-md object-cover cursor-pointer" className="flex-shrink-0 w-[60px] h-[75px] rounded-md object-cover cursor-pointer"
onClick={() => navigate(`/watch/${item.id}`)} 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="overlay"></div>
<div className="overflow-hidden"> <div className="overflow-hidden">
<img <img
src={`https://wsrv.nl/?url=${item.poster}`} src={`${item.poster}`}
alt={item.title} 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}`} 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="overlay"></div>
<div className="overflow-hidden"> <div className="overflow-hidden">
<img <img
src={`https://wsrv.nl/?url=${item.poster}`} src={`${item.poster}`}
alt={item.title} 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 `} 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" className="inline-block bg-[#2a2c31] absolute left-0 top-0 w-full h-full group"
> >
<img <img
src={`https://wsrv.nl/?url=${item?.poster}`} src={`${item?.poster}`}
alt={item?.title} alt={item?.title}
className="block w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:blur-[4px]" className="block w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:blur-[4px]"
title={item?.title} title={item?.title}

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

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

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

@@ -24,10 +24,11 @@ function MobileSearch() {
return ( return (
<> <>
{isSearchVisible && ( {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 <input
type="text" 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..." placeholder="Search anime..."
value={searchValue} value={searchValue}
onChange={(e) => setSearchValue(e.target.value)} 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} onClick={handleSearchClick}
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faMagnifyingGlass} icon={faMagnifyingGlass}
className="text-black text-lg" className="text-lg"
/> />
</button> </button>
</div>
{searchValue.trim() && isFocused && ( {searchValue.trim() && isFocused && (
<div <div
ref={addSuggestionRef} ref={addSuggestionRef}

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

@@ -27,10 +27,10 @@ function WebSearch() {
}; };
return ( 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 <input
type="text" 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..." placeholder="Search anime..."
value={searchValue} value={searchValue}
onChange={(e) => setSearchValue(e.target.value)} onChange={(e) => setSearchValue(e.target.value)}
@@ -54,12 +54,12 @@ function WebSearch() {
}} }}
/> />
<button <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} onClick={handleSearchClick}
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faMagnifyingGlass} 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> </button>
{searchValue.trim() && isFocused && ( {searchValue.trim() && isFocused && (

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

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

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

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

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

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

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

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

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

@@ -18,7 +18,7 @@ function Home() {
if (!homeInfo) return <Error error="404" />; if (!homeInfo) return <Error error="404" />;
return ( 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} /> <Spotlight spotlights={homeInfo.spotlights} />
<ContinueWatching /> <ContinueWatching />
<Trending trending={homeInfo.trending} /> <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]"> <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 <img
src={`https://wsrv.nl/?url=${poster}`} src={`${poster}`}
alt={`${title} Poster`} alt={`${title} Poster`}
className="absolute inset-0 object-cover w-full h-full filter grayscale blur-lg z-[-900]" 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="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"> <div className="relative w-[180px] h-[270px] max-[575px]:w-[140px] max-[575px]:h-[200px] flex-shrink-0">
<img <img
src={`https://wsrv.nl/?url=${poster}`} src={`${poster}`}
alt={`${title} Poster`} alt={`${title} Poster`}
className="w-full h-full object-cover object-center flex-shrink-0" 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 <img
src={ src={
!animeInfoLoading !animeInfoLoading
? `https://wsrv.nl/?url=${animeInfo?.poster}` ? `${animeInfo?.poster}`
: "https://i.postimg.cc/rFZnx5tQ/2-Kn-Kzog-md.webp" : "https://i.postimg.cc/rFZnx5tQ/2-Kn-Kzog-md.webp"
} }
alt={`${animeInfo?.title} Poster`} alt={`${animeInfo?.title} Poster`}
@@ -336,7 +336,7 @@ export default function Watch() {
</p> </p>
<div className="absolute inset-0 z-10 bg-[url('https://i.postimg.cc/pVGY6RXd/thumb.png')] bg-repeat"></div> <div className="absolute inset-0 z-10 bg-[url('https://i.postimg.cc/pVGY6RXd/thumb.png')] bg-repeat"></div>
<img <img
src={`https://wsrv.nl/?url=${season.season_poster}`} src={`${season.season_poster}`}
alt="" alt=""
className="w-full h-full object-cover blur-[3px] opacity-50" 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"> <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 ? ( {animeInfo && animeInfo?.poster ? (
<img <img
src={`https://wsrv.nl/?url=${animeInfo?.poster}`} src={`${animeInfo?.poster}`}
alt="" alt=""
className="w-[100px] h-[150px] object-cover max-[500px]:w-[70px] max-[500px]:h-[90px]" className="w-[100px] h-[150px] object-cover max-[500px]:w-[70px] max-[500px]:h-[90px]"
/> />