From 7166ff2cb72f7bb88f69f58f3f17fc18e6d72aed Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Sun, 27 Jul 2025 14:42:05 +0530
Subject: [PATCH] fixed navbar

---
 src/components/navbar/Navbar.jsx          |  66 +++++++-----
 src/components/searchbar/MobileSearch.jsx | 117 +++++++++++++---------
 src/components/suggestion/Suggestion.jsx  |  49 +++++----
 3 files changed, 136 insertions(+), 96 deletions(-)

diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index 6cbe397..d8ee8d9 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faBars,
   faRandom,
+  faMagnifyingGlass,
 } from "@fortawesome/free-solid-svg-icons";
 import { useLanguage } from "@/src/context/LanguageContext";
 import { Link, useLocation } from "react-router-dom";
@@ -19,6 +20,7 @@ function Navbar() {
   );
   const [isScrolled, setIsScrolled] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -53,9 +55,8 @@ function Navbar() {
   return (
     <SearchProvider>
       <nav
-        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" : ""}`}
+        className={`fixed top-0 left-0 w-full z-[1000000] transition-all duration-300 ease-in-out bg-[#0a0a0a]
+          ${isScrolled ? "bg-opacity-80 backdrop-blur-md shadow-lg" : "bg-opacity-100"}`}
       >
         <div className="max-w-[1920px] mx-auto px-4 h-16 flex items-center justify-between">
           {/* Left Section */}
@@ -66,7 +67,7 @@ function Navbar() {
                 className="text-xl text-gray-200 cursor-pointer hover:text-white transition-colors"
                 onClick={handleHamburgerClick}
               />
-              <Link to="/" className="flex items-center">
+              <Link to="/home" className="flex items-center">
                 <img src="/logo.png" alt="JustAnime Logo" className="h-9 w-auto" />
               </Link>
             </div>
@@ -87,32 +88,45 @@ function Navbar() {
             </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-3 py-1 text-sm font-medium rounded ${
-                    language === lang
-                      ? "bg-[#3F3F46] text-white"
-                      : "text-gray-400 hover:text-white"
-                  }`}
-                >
-                  {lang}
-                </button>
-              ))}
-            </div>
+          {/* Language Toggle - Desktop */}
+          <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-3 py-1 text-sm font-medium rounded ${
+                  language === lang
+                    ? "bg-[#3F3F46] text-white"
+                    : "text-gray-400 hover:text-white"
+                }`}
+              >
+                {lang}
+              </button>
+            ))}
+          </div>
+
+          {/* Mobile Search Icon */}
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={() => setIsMobileSearchOpen(!isMobileSearchOpen)}
+              className="p-[10px] aspect-square bg-[#2a2a2a]/75 text-white/50 hover:text-white rounded-lg transition-colors flex items-center justify-center"
+              title="Search Anime"
+            >
+              <FontAwesomeIcon icon={faMagnifyingGlass} className="text-lg" />
+            </button>
           </div>
         </div>
 
-        {/* Mobile Search */}
-        <div className="md:hidden">
-          <MobileSearch />
-        </div>
+        {/* Mobile Search Dropdown */}
+        {isMobileSearchOpen && (
+          <div className="md:hidden bg-[#18181B] shadow-lg">
+            <MobileSearch onClose={() => setIsMobileSearchOpen(false)} />
+          </div>
+        )}
+
+        {/* Sidebar */}
+        <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />
       </nav>
-      <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />
     </SearchProvider>
   );
 }
diff --git a/src/components/searchbar/MobileSearch.jsx b/src/components/searchbar/MobileSearch.jsx
index fc2acbd..4843b49 100644
--- a/src/components/searchbar/MobileSearch.jsx
+++ b/src/components/searchbar/MobileSearch.jsx
@@ -1,11 +1,12 @@
 import Suggestion from '../suggestion/Suggestion';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import { faMagnifyingGlass, faRandom } from '@fortawesome/free-solid-svg-icons';
 import useSearch from '@/src/hooks/useSearch';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 
-function MobileSearch() {
+function MobileSearch({ onClose }) {
     const navigate = useNavigate();
+    const location = useLocation();
     const {
         isSearchVisible,
         searchValue,
@@ -16,60 +17,80 @@ function MobileSearch() {
         suggestionRefs,
         addSuggestionRef,
     } = useSearch();
+
     const handleSearchClick = () => {
-        if (searchValue.trim() && window.innerWidth <= 600) {
+        if (searchValue.trim()) {
             navigate(`/search?keyword=${encodeURIComponent(searchValue)}`);
+            onClose?.();
         }
     };
+
+    const handleRandomClick = () => {
+        if (location.pathname === "/random") {
+            window.location.reload();
+        }
+        onClose?.();
+    };
+
     return (
-        <>
-            {isSearchVisible && (
-                <div className="flex w-full mt-2 relative custom-md:hidden px-4">
-                    <div className="relative w-full">
-                        <input
-                            type="text"
-                            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)}
-                            onFocus={() => setIsFocused(true)}
-                            onBlur={() => {
-                                setTimeout(() => {
-                                    const isInsideSuggestionBox = suggestionRefs.current.some(
-                                        (ref) => ref && ref.contains(document.activeElement),
-                                    );
-                                    if (!isInsideSuggestionBox) {
-                                        setIsFocused(false);
-                                    }
-                                }, 100);
-                            }}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter') {
-                                    handleSearchClick();
+        <div className="w-full p-4 flex flex-col gap-4">
+            <div className="flex items-center gap-2">
+                <div className="relative flex-1">
+                    <input
+                        type="text"
+                        className="w-full px-5 py-2 bg-[#2a2a2a]/75 text-white rounded-lg focus:outline-none transition-colors placeholder-white/50"
+                        placeholder="Search anime..."
+                        value={searchValue}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        onFocus={() => setIsFocused(true)}
+                        onBlur={() => {
+                            setTimeout(() => {
+                                const isInsideSuggestionBox = suggestionRefs.current.some(
+                                    (ref) => ref && ref.contains(document.activeElement),
+                                );
+                                if (!isInsideSuggestionBox) {
+                                    setIsFocused(false);
                                 }
-                            }}
+                            }, 100);
+                        }}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                handleSearchClick();
+                            }
+                        }}
+                    />
+                    <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-lg"
                         />
-                        <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-lg"
-                            />
-                        </button>
-                    </div>
-                    {searchValue.trim() && isFocused && (
-                        <div
-                            ref={addSuggestionRef}
-                            className="absolute z-[100000] top-full w-full"
-                        >
-                            <Suggestion keyword={debouncedValue} className="w-full" />
-                        </div>
-                    )}
+                    </button>
+                </div>
+                <Link
+                    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 shrink-0"
+                    title="Random Anime"
+                >
+                    <FontAwesomeIcon icon={faRandom} className="text-lg" />
+                </Link>
+            </div>
+            {searchValue.trim() && isFocused && (
+                <div
+                    ref={addSuggestionRef}
+                    className="absolute z-[100000] left-0 right-0 px-4 mt-[60px]"
+                >
+                    <Suggestion 
+                        keyword={debouncedValue} 
+                        className="w-full" 
+                        onSuggestionClick={onClose}
+                    />
                 </div>
             )}
-        </>
+        </div>
     );
 }
 
diff --git a/src/components/suggestion/Suggestion.jsx b/src/components/suggestion/Suggestion.jsx
index 5a1267b..c1f93d0 100644
--- a/src/components/suggestion/Suggestion.jsx
+++ b/src/components/suggestion/Suggestion.jsx
@@ -4,7 +4,7 @@ import BouncingLoader from "../ui/bouncingloader/Bouncingloader";
 import { FaChevronRight } from "react-icons/fa";
 import { Link } from "react-router-dom";
 
-function Suggestion({ keyword, className }) {
+function Suggestion({ keyword, className, onSuggestionClick }) {
   const [suggestion, setSuggestion] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -31,32 +31,36 @@ function Suggestion({ keyword, className }) {
 
   return (
     <div
-      className={`bg-[#2d2b44] ${className} flex ${
-        loading ? "justify-center py-7" : "justify-start"
-      } ${!suggestion ? "p-3" : "justify-start"} items-center`}
-      style={{ boxShadow: "0 20px 20px rgba(0, 0, 0, .3)" }}
+      className={`bg-zinc-900 ${className} flex ${
+        loading ? "justify-center py-4" : "justify-start"
+      } ${!suggestion ? "p-2" : "justify-start"} items-center rounded-lg`}
+      style={{ 
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+        border: "1px solid rgba(255, 255, 255, 0.05)"
+      }}
     >
       {loading ? (
         <BouncingLoader />
       ) : error && !suggestion ? (
-        <div>Error loading suggestions</div>
+        <div className="text-gray-400 p-3">Error loading suggestions</div>
       ) : suggestion && hasFetched ? (
-        <div className="w-full flex flex-col pt-2 overflow-y-auto">
+        <div className="w-full flex flex-col pt-1 overflow-y-auto">
           {suggestion.map((item, index) => (
             <Link
               to={`/${item.id}`}
               key={index}
-              className="group py-2 flex items-start gap-x-3 hover:bg-[#3c3a5e] cursor-pointer px-[10px]"
+              onClick={onSuggestionClick}
+              className="group py-2 flex items-start gap-x-3 hover:bg-zinc-800 transition-all duration-200 cursor-pointer px-3"
               style={{
                 borderBottom:
                   index === suggestion.length - 1
                     ? "none"
-                    : "1px dashed rgba(255, 255, 255, .075)",
+                    : "1px solid rgba(255, 255, 255, 0.05)",
               }}
             >
               <img
                 src={`${item.poster}`}
-                className="w-[50px] h-[75px] flex-shrink-0 object-cover"
+                className="w-[45px] h-[65px] flex-shrink-0 object-cover rounded-md shadow-lg"
                 alt=""
                 onError={(e) => {
                   e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg";
@@ -64,26 +68,26 @@ function Suggestion({ keyword, className }) {
               />
               <div className="flex flex-col gap-y-[2px]">
                 {item?.title && (
-                  <h1 className="line-clamp-1 leading-5 font-bold text-[15px] group-hover:text-[#ffbade]">
+                  <h1 className="line-clamp-1 leading-5 font-semibold text-[14px] text-gray-100 group-hover:text-white">
                     {item.title || "N/A"}
                   </h1>
                 )}
                 {item?.japanese_title && (
-                  <h1 className="line-clamp-1 leading-5 text-[13px] font-light text-[#aaaaaa]">
+                  <h1 className="line-clamp-1 leading-4 text-[12px] font-normal text-gray-400">
                     {item.japanese_title || "N/A"}
                   </h1>
                 )}
                 {(item?.releaseDate || item?.showType || item?.duration) && (
-                  <div className="flex gap-x-[5px] items-center w-full justify-start mt-[4px]">
-                    <p className="leading-5 text-[13px] font-light text-[#aaaaaa]">
+                  <div className="flex gap-x-2 items-center w-full justify-start mt-[2px]">
+                    <p className="leading-4 text-[12px] font-normal text-gray-400">
                       {item.releaseDate || "N/A"}
                     </p>
-                    <span className="dot"></span>
-                    <p className="leading-5 text-[13px] font-medium group-hover:text-[#ffbade]">
+                    <span className="w-1 h-1 rounded-full bg-gray-600"></span>
+                    <p className="leading-4 text-[12px] font-medium text-gray-300 group-hover:text-white">
                       {item.showType || "N/A"}
                     </p>
-                    <span className="dot"></span>
-                    <p className="leading-5 text-[13px] font-light text-[#aaaaaa]">
+                    <span className="w-1 h-1 rounded-full bg-gray-600"></span>
+                    <p className="leading-4 text-[12px] font-normal text-gray-400">
                       {item.duration || "N/A"}
                     </p>
                   </div>
@@ -93,20 +97,21 @@ function Suggestion({ keyword, className }) {
           ))}
           {!loading && hasFetched && (
             <Link
-              className="w-full flex py-4 justify-center items-center bg-[#ffbade]"
+              className="w-full flex py-2.5 justify-center items-center bg-zinc-800 hover:bg-zinc-700 transition-all duration-200 rounded-b-lg"
               to={`/search?keyword=${encodeURIComponent(keyword)}`}
+              onClick={onSuggestionClick}
             >
               <div className="flex w-fit items-center gap-x-2">
-                <p className="text-[17px] font-light text-black">
+                <p className="text-[14px] font-medium text-gray-200">
                   View all results
                 </p>
-                <FaChevronRight className="text-black text-[12px] font-black mt-[2px]" />
+                <FaChevronRight className="text-gray-200 text-[11px] mt-[1px]" />
               </div>
             </Link>
           )}
         </div>
       ) : hasFetched ? (
-        <p className="text-[17px]">No results found!</p>
+        <p className="text-gray-300 p-3">No results found!</p>
       ) : null}
     </div>
   );