feat: search focus.

fezcode · fezcode · commit 1b79929f133b · 2025-11-13T01:51:36.000+03:00
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Fez from './Fez';
-import { Sidebar, User, BookOpen, MagnifyingGlass } from '@phosphor-icons/react';
+import { SidebarIcon, UserIcon, BookOpenIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
 
 const Navbar = ({ toggleSidebar, isSidebarOpen, toggleSearch }) => {
   const [isScrolled, setIsScrolled] = useState(false);
@@ -24,15 +24,15 @@ const Navbar = ({ toggleSidebar, isSidebarOpen, toggleSearch }) => {
         onClick={toggleSidebar}
         className="absolute top-1/2 -translate-y-1/2 left-4 text-red-500 focus:outline-none hidden md:block"
       >
-        <Sidebar size={24} />
+        <SidebarIcon size={24} />
       </button>
       <div className="container mx-auto flex justify-between items-center p-4 text-white">
         <div className="md:hidden flex items-center space-x-2">
           <button
             onClick={toggleSidebar}
             className="text-white focus:outline-none"
           >
-            <Sidebar size={24} />
+            <SidebarIcon size={24} />
           </button>
           <Link to="/" className="flex items-center space-x-2">
             <Fez />
@@ -66,22 +66,22 @@ const Navbar = ({ toggleSidebar, isSidebarOpen, toggleSearch }) => {
             to="/about"
             className="flex items-center space-x-1 text-gray-300 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md transition-colors"
           >
-            <User size={24} />
+            <UserIcon size={24} />
             <span className="md:hidden lg:inline">About</span>
           </Link>
           <Link
             to="/blog"
             className="flex items-center space-x-1 text-gray-300 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md transition-colors"
           >
-            <BookOpen size={24} />
+            <BookOpenIcon size={24} />
             <span className="md:hidden lg:inline">Blog</span>
           </Link>
           <button
             onClick={toggleSearch}
             className="text-gray-300 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md transition-colors"
             aria-label="Toggle Search"
           >
-            <MagnifyingGlass size={24} />
+            <MagnifyingGlassIcon size={24} />
           </button>
         </div>
       </div>
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -6,8 +6,15 @@ const Search = ({ isVisible }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [searchResults, setSearchResults] = useState([]);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [data, setData] = useState({ posts: [], projects: [], logs: [], routes: [], apps: [] }); // Add routes to data
+  const [data, setData] = useState({ posts: [], projects: [], logs: [], routes: [], apps: [] });
   const searchRef = useRef(null);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (isVisible && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isVisible]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -142,6 +149,7 @@ const Search = ({ isVisible }) => {
     <div ref={searchRef} className="w-full bg-gray-900 py-3 px-4 border-b border-gray-700">
       <form onSubmit={(e) => e.preventDefault()} className="relative w-full max-w-md mx-auto">
         <input
+          ref={inputRef}
           type="text"
           placeholder="Search..."
           value={searchTerm}
