add search input

src/App.js

@@ -11,7 +11,7 @@ import Footer from './components/Footer/Footer';
 import Header from './components/Header';
 import Loader from './components/Loader';
 import theme from './theme/theme';
-import { ThemeProvider } from '@mui/material';
+import { ThemeProvider, Box } from '@mui/material';
 import { fetchCart, createCart } from './redux/slices/cartSlice';
 import { useSelector, useDispatch } from 'react-redux';
 import Collection from './pages/Collection';

src/components/Navbar/Navbar.jsx

@@ -13,6 +13,7 @@ import { styled } from '@mui/material/styles';
 import { MenuItem, Select, FormControl, Badge, Typography } from '@mui/material';
 import MobileNav from "./components/MobileNav";
 import MenuIcon from "@mui/icons-material/Menu";
+import SearchProduct from "../SearchProduct"
 import CategoryIcon from '@mui/icons-material/Category';
 import HomeIcon from '@mui/icons-material/Home';
 import BrushIcon from '@mui/icons-material/Brush';
@@ -108,6 +109,7 @@ const Navbar = () => {
 
   const swiperRef = useRef(null); // Create a ref for the Swiper instance
   const [showHeader, setShowHeader] = useState(true);
+  const [showSearch, setShowSearch] = useState(false);
   const [isAtTop, setIsAtTop] = useState(false);
   const [isProductPage, setIsProductPage] = useState(false);
   const [lastScrollPos, setLastScrollPos] = useState(0);
@@ -261,7 +263,7 @@ const Navbar = () => {
     <>
       <AppBar position="fixed"
         sx={{
-          zIndex:998,
+          zIndex: 998,
           backgroundColor: (isAtTop) ? "rgba(0, 0, 0, 0)" : "rgba(255, 255, 255, 0.3)",
           backdropFilter: (isAtTop) ? "none" : "blur(10px)",
           boxShadow: 0,
@@ -294,7 +296,7 @@ const Navbar = () => {
           py: 0.5
         }} disableGutters>
 
-          <Box sx={{ display: "flex", alignItems: "center", width:"100%", position:"relative", justifyContent:"space-between" }}>
+          <Box sx={{ display: "flex", alignItems: "center", width: "100%", position: "relative", justifyContent: "space-between" }}>
             {/* SIDEBAR BUTTON */}
             <Box sx={{
               display: {
@@ -323,12 +325,12 @@ const Navbar = () => {
             {/* Left Section: Logo */}
             <Box
               sx={{
-                mr:{
-                  xs:0,
-                  sm:0,
-                  md:10,
-                  lg:10,
-                  xl:10
+                mr: {
+                  xs: 0,
+                  sm: 0,
+                  md: 10,
+                  lg: 10,
+                  xl: 10
                 },
                 display: {
                   xs: (isProductPage) ? "flex" : "none",
@@ -420,7 +422,7 @@ const Navbar = () => {
                 </LanguageSelect>
               </FormControl> */}
 
-              <IconButton>
+              <IconButton onClick={()=>{setShowSearch(true)}}>
                 <SearchIcon className="navItem" style={{
                   transition: "all 0.3s ease-in-out",
                   color: (isAtTop) ? "white" : "black",
@@ -486,8 +488,10 @@ const Navbar = () => {
         </Box>
 
       </AppBar>
+      {showSearch && <SearchProduct onClose={()=>{setShowSearch(false)}}/>}
 
       <MobileNav open={open} menu={navItem} onClose={() => { setOpen(false) }} />
+      
     </>
   );
 };

src/components/SearchProduct/SearchProduct.jsx

@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react';
+import Grid from '@mui/material/Grid2';
+import { Box, Button, TextField, InputAdornment, Typography, Card, CardContent, CardMedia } from '@mui/material';
+import { useSelector } from 'react-redux';
+
+const SearchProduct = ({onClose}) => {
+
+    const products = useSelector((state) => state.products.products.data)
+    const [searchedProducts, setSearchedProducts] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const filterProduct = function () {
+
+        let filteredProducts = products.filter((product) => {
+
+            let title = product?.title?.toLowerCase();
+            let search = searchQuery.toLowerCase();
+            return title?.includes(search)
+        })
+
+        // MAX show result 
+        filteredProducts = filteredProducts?.slice(0, 6);
+
+        setSearchedProducts(filteredProducts)
+
+    }
+
+    return (
+        <Box
+            className="animate__animated animate__fadeIn"
+            sx={{
+                position: 'fixed',
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'rgba(255,255,255,0.8)',
+                top: 0,
+                left: 0,
+                py: 2,
+                zIndex: 999,
+                backdropFilter: 'blur(10px)',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+            }}
+        >
+            {/* Search Box */}
+            <Box
+                sx={{
+                    backgroundColor: 'rgba(0,0,0,0)',
+                    borderRadius: 2,
+                    padding: 2,
+                    width: '90%',
+                    marginBottom: 4,
+                }}
+            >
+                <Grid container spacing={2}>
+                    <Grid size={12}>
+                        <TextField
+                            fullWidth
+                            placeholder="Search for a product..."
+                            variant="outlined"
+                            value={searchQuery}
+                            onChange={(e) => {
+                                setSearchQuery(e.target.value)
+                                if ((!searchQuery || searchQuery.trim() === "")) {
+                                    setSearchedProducts([])
+                                } else {
+                                    filterProduct()
+                                }
+                            }}
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <Button
+                                            variant="contained"
+                                            color="primary"
+                                            sx={{ height: '100%' }}
+                                            onClick={onClose}
+                                        >
+                                            Cancel
+                                        </Button>
+                                    </InputAdornment>
+                                ),
+                            }}
+                        />
+                    </Grid>
+                </Grid>
+            </Box>
+
+            {/* Product List */}
+            <Grid
+                container
+                columns={12}
+            >
+                {searchedProducts.length > 0 ? (
+                    searchedProducts.map((product) => (
+                        <Grid className="animate__animated animate__fadeIn" item size={{ xs: 12, sm: 12, md: 6 }} sx={{p:1}}>
+                            <Card
+                                key={product.id}
+                                sx={{ display: 'flex', alignItems: 'center', p: 2, cursor:"pointer" }}
+                                onClick={() => {
+                                    window.location.href = `/product/${product?.handle}`
+                                }}
+                            >
+                                <CardMedia
+                                    component="img"
+                                    sx={{ width: 100, height: 100, borderRadius: 1, marginRight: 2 }}
+                                    image={product?.images[0]?.url}
+                                    alt={product?.title}
+                                />
+                                <CardContent sx={{ flex: '1 0 auto' }}>
+                                    <Typography variant="h5">{product?.title}</Typography>
+                                </CardContent>
+                            </Card>
+                        </Grid>
+                    ))
+                ) : (
+                    <Typography variant="body1" color="text.secondary">
+                        No products found. Please search
+                    </Typography>
+                )}
+            </Grid>
+        </Box>
+    );
+};
+
+export default SearchProduct;

src/components/SearchProduct/index.js

@@ -0,0 +1 @@
+export { default } from "./SearchProduct"