diff --git a/src/components/common/ProfileHeader.jsx b/src/components/common/ProfileHeader.jsx new file mode 100644 index 0000000..c682ec4 --- /dev/null +++ b/src/components/common/ProfileHeader.jsx @@ -0,0 +1,292 @@ +import AppBar from "@mui/material/AppBar"; +import Box from "@mui/material/Box"; +import Toolbar from "@mui/material/Toolbar"; +import IconButton from "@mui/material/IconButton"; +import Typography from "@mui/material/Typography"; +import SwipeableDrawer from "@mui/material/SwipeableDrawer"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; +import ListItemButton from "@mui/material/ListItemButton"; +import ListItemText from "@mui/material/ListItemText"; +import Avatar from "@mui/material/Avatar"; +import Container from "@mui/material/Container"; +import Tooltip from "@mui/material/Tooltip"; +import MenuIcon from "@mui/icons-material/Menu"; +import CloseIcon from "@mui/icons-material/Close"; +import Divider from "@mui/material/Divider"; +import { InboxIcon, MailIcon } from "lucide-react"; +import LazyImage from "./LazyImage"; +import Logo from "../../assets/images/logo.png"; +import { useNavigate } from "react-router-dom"; +import Drawer from "@mui/material/Drawer"; +import { useState, useRef, useEffect } from "react"; +import { useTheme, useMediaQuery, ListItemIcon } from "@mui/material"; +import {Badge, } from "@mui/material"; +import { Home, Users, Heart, MessageCircle, Search, Bell } from "lucide-react"; + +/* ---------------------------------------------------- + SPARKLE NAVBAR (same as your original code) +---------------------------------------------------- */ +// Sparkle Navbar Component +const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick }) => { + const [activeIndex, setActiveIndex] = useState(0); + const [indicatorStyle, setIndicatorStyle] = useState({}); + const [isAnimating, setIsAnimating] = useState(false); + const navRef = useRef(null); + const buttonRefs = useRef([]); + + useEffect(() => { + updateIndicator(activeIndex); + }, []); + + const updateIndicator = (index) => { + const button = buttonRefs.current[index]; + if (button && navRef.current) { + const navRect = navRef.current.getBoundingClientRect(); + const btnRect = button.getBoundingClientRect(); + setIndicatorStyle({ + left: btnRect.left - navRect.left + btnRect.width / 2 - 18, + opacity: 1 + }); + } + }; + + const handleClick = (index) => { + if (index === activeIndex || isAnimating) return; + setIsAnimating(true); + const newButton = buttonRefs.current[index]; + + if (newButton && navRef.current) { + const navRect = navRef.current.getBoundingClientRect(); + const newRect = newButton.getBoundingClientRect(); + + setIndicatorStyle(prev => ({ + ...prev, + left: newRect.left - navRect.left + newRect.width / 2 - 18, + })); + + setTimeout(() => { + setActiveIndex(index); + setIsAnimating(false); + if (onItemClick) onItemClick(items[index], index); + }, 300); + } + }; + + return ( + + ); +}; + +/* ---------------------------------------------------- + MAIN COMPONENT — UPDATED WITH PROFILE DRAWER +---------------------------------------------------- */ +const ProfileHeader = () => { + const navigate = useNavigate(); + const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false); + const [profileDrawerOpen, setProfileDrawerOpen] = useState(false); + + const theme = useTheme(); + const isDesktop = useMediaQuery(theme.breakpoints.up("md")); + + const toggleMobileDrawer = (open) => () => setMobileDrawerOpen(open); + const toggleProfileDrawer = (open) => () => setProfileDrawerOpen(open); + + /* ----------------------------------------- + PROFILE DRAWER CONTENT (RIGHT SIDE) + ------------------------------------------ */ + const ProfileDrawerContent = ( + + + Account + {!isDesktop && ( + + + + )} + + + + + + {[ + "Profile", + "Subscription", + "Subscription History", + "Change Password", + "View Reports", + "Blocked Users", + ].map((text) => ( + + + + + + ))} + + + + Account Settings + + + + {[ + "Privacy Policy", + "Terms & Conditions", + "Contact Us", + "Be Safe Online", + "Delete Account", + "Logout", + ].map((text) => ( + + + + + + ))} + + + ); + + /* ----------------------------------------- + MOBILE LEFT DRAWER + ------------------------------------------ */ + const MobileDrawerMenu = ( + + + Menu + + + + + + + + + {["Matches", "Search", "Chat", "Mail"].map((text, index) => ( + + + + {index % 2 === 0 ? : } + + + + + ))} + + + ); + + return ( + <> + {/* --------------------------- NAVBAR ----------------------------- */} + + + + {/* Desktop Logo */} + + + + + {/* MOBILE: Menu Button */} + + + + + + + {/* Mobile Logo */} + navigate("/")} + > + + + + {/* Desktop Menu */} + + setSelectedItem(item)} + /> + + + {/* AVATAR CLICK → RIGHT DRAWER */} + + + + + + + + + + + + {/* MOBILE LEFT DRAWER */} + + {MobileDrawerMenu} + + + {/* PROFILE RIGHT DRAWER */} + + {ProfileDrawerContent} + + + ); +}; + +export default ProfileHeader; diff --git a/src/layout/ProfileLayout.jsx b/src/layout/ProfileLayout.jsx new file mode 100644 index 0000000..9753bb0 --- /dev/null +++ b/src/layout/ProfileLayout.jsx @@ -0,0 +1,14 @@ +import { Outlet } from "react-router-dom"; +import ProfileHeader from "../components/common/ProfileHeader"; +const ProfileLayout = () => { + return ( + <> + +
+ +
+ + ) +} + +export default ProfileLayout diff --git a/src/pages/UserDashboardHome.jsx b/src/pages/UserDashboardHome.jsx new file mode 100644 index 0000000..eb3f12a --- /dev/null +++ b/src/pages/UserDashboardHome.jsx @@ -0,0 +1,162 @@ +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Navigation, Autoplay } from 'swiper/modules'; +import { ChevronLeft, ChevronRight } from 'lucide-react'; +import 'swiper/css'; +import 'swiper/css/navigation'; + +const images = [ + "https://images.unsplash.com/photo-1612423284934-5b6e7f9e8b5e", + "https://images.unsplash.com/photo-1520975911596-5f7f2c1a1c6b", + "https://images.unsplash.com/photo-1544005313-94ddf0286df2", + "https://images.unsplash.com/photo-1494790108377-be9c29b29330", + "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e", + ]; +const UserDashboardHome = () => { + return ( + <> +
+
+ {/* Left Arrow */} + + + {/* Right Arrow */} + + + + {images.map((img, idx) => ( + +
+ {`Slide +
+ Slide {idx + 1} +
+
+ + ))} + +
+ + +
+ + + ) +} + +export default UserDashboardHome diff --git a/src/routes/UserRoutes.jsx b/src/routes/UserRoutes.jsx index 60a3566..fe9ecd0 100644 --- a/src/routes/UserRoutes.jsx +++ b/src/routes/UserRoutes.jsx @@ -1,10 +1,15 @@ import { Route, useNavigate } from "react-router-dom"; +import ProfileLayout from "../layout/ProfileLayout"; +import UserDashboardHome from "../pages/UserDashboardHome"; const UserRoutes = () => { return ( <> - {/* }> - } /> + }> + } /> + + {/* }> + } /> */} )