Merge pull request #37 from jeevan-aj/update

userProfile page made responsive
jeevan-aj · Apr 6, 2024 · 52e4104 · 52e4104
2 parents 1be910e + 0a40e4b
commit 52e4104
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 20 deletions.
diff --git a/client/src/components/UserProfileContent.jsx b/client/src/components/UserProfileContent.jsx
@@ -9,7 +9,6 @@ const UserProfileContent = () => {
   );
   const dispatch = useDispatch();
   const isUpdated = useSelector((state) => state.user.isUpdated);
-  console.log(isUpdated);
   if (isUpdated) {
     toast.success("successfully updated");
     dispatch(setUpdated(false));
@@ -18,7 +17,7 @@ const UserProfileContent = () => {
   return (
     <div className="px-4 mx-auto mt-12  bg-white w-full sm:px-6 lg:px-8">
       <Toaster />
-      <div className="bg-white md:mx-auto rounded shadow-xl w-full md:w-1/2 overflow-hidden">
+      <div className="bg-white md:mx-auto rounded shadow-xl w-full  overflow-hidden">
         <div className="h-[140px] bg-gradient-to-r from-cyan-500 to-blue-500"></div>
         <div className="px-5 py-2 flex flex-col gap-3 pb-6">
           <div className="h-[90px] relative shadow-md w-[90px] rounded-full border-4  -mt-14 border-white">

diff --git a/client/src/components/UserProfileSidebar.jsx b/client/src/components/UserProfileSidebar.jsx
@@ -73,10 +73,11 @@ const UserProfileSidebar = () => {
               <SiShopware />
               Rent a Ride
             </Link>
+            {/* hide sidebar button */}
             <TooltipComponent content={"menu"} position="BottomCenter">
               <button
-                className="text-xl rounded-full p-3 mt-4 block md:hidden hover:bg-gray-500"
-                onClick={() => {}}
+                className="text-xl rounded-full p-3 mt-4 block  hover:bg-gray-500"
+                onClick={() => {dispatch(showSidebarOrNot(false))}}
               >
                 <MdOutlineCancel />
               </button>

diff --git a/client/src/pages/user/Profile.jsx b/client/src/pages/user/Profile.jsx
@@ -1,4 +1,4 @@
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 
 import UserProfileSidebar from "../../components/UserProfileSidebar";
 import { TooltipComponent } from "@syncfusion/ej2-react-popups";
@@ -8,22 +8,30 @@ import Orders from "./Orders";
 import UserProfileContent from "../../components/UserProfileContent";
 import Favorites from "./Favorites";
 import { IoArrowBackCircleSharp } from "react-icons/io5";
+import { showSidebarOrNot } from "../../redux/adminSlices/adminDashboardSlice/DashboardSlice";
+import { IoMenu } from "react-icons/io5";
 
 function Profile() {
   const { isError } = useSelector((state) => state.user);
+  const { activeMenu } = useSelector((state) => state.adminDashboardSlice);
+  const dispatch = useDispatch();
 
   return (
     <div>
       <div className="text-red-500">{isError ? isError.message : " "}</div>
       <div className="fixed top-4 right-5 md:right-10 z-10">
-                 <TooltipComponent content={"back"} position="BottomCenter">
-                      <Link to={'/'} ><IoArrowBackCircleSharp style={{fontSize:'40', hover:"fill-red-700"}} className="hover:fill-blue-500"/></Link>
-                      </TooltipComponent>
-
-                </div>
+        <TooltipComponent content={"back"} position="BottomCenter">
+          <Link to={"/"}>
+            <IoArrowBackCircleSharp
+              style={{ fontSize: "40", hover: "fill-red-700" }}
+              className="hover:fill-blue-500"
+            />
+          </Link>
+        </TooltipComponent>
+      </div>
 
       <div>
-        <div className="flex relative dark:bg-main-dark-bg">
+        <div className="flex  relative dark:bg-main-dark-bg">
           <div className="fixed right-4 bottom-4" style={{ zIndex: "1000" }}>
             <TooltipComponent content="Settings" position="Top">
               <button
@@ -36,14 +44,42 @@ function Profile() {
             </TooltipComponent>
           </div>
 
-          <div className="w-72 fixed sidebar dark:bg-secondary-dark-bg">
-            <UserProfileSidebar />
-          </div>
+          {activeMenu ? (
+            <div className="w-72 bg-white  fixed sidebar dark:bg-secondary-dark-bg">
+              <UserProfileSidebar />
+            </div>
+          ) : (
+            <div className="w-0 dark:bg-secondary-dark-bg">
+              <UserProfileSidebar />
+            </div>
+          )}
+
+          {/* hamburger icon */}
+          {!activeMenu && (
+            <TooltipComponent
+              content={"menu"}
+              className="absolute md:relative"
+              position="BottomCenter"
+            >
+              <button
+                className="text-xl rounded-full p-3 mt-4 block  hover:bg-gray-500"
+                onClick={() => {
+                  dispatch(showSidebarOrNot(true));
+                }}
+              >
+                <IoMenu />
+              </button>
+            </TooltipComponent>
+          )}
 
-          <div className={`dark:bg-white bg-white min-h-screen w-full ml-72 `}>
+          <div
+            className={`bg-white  min-h-screen w-full  mt-[100px] max-w-[800px] mx-auto ${
+              activeMenu ? "sm:ml-72 " : " max-w-[900px]"
+            } `}
+          >
             <div className={`fixed md:static bg-white  w-full   `}></div>
 
-            <div className="main_section mx-8  ">
+            <div className="main_section mx-8 ">
               <Routes>
                 <Route path="/" element={<UserProfileContent />} />
                 <Route path="/profiles" element={<UserProfileContent />} />

diff --git a/client/src/pages/user/ProfileEdit.jsx b/client/src/pages/user/ProfileEdit.jsx
@@ -16,7 +16,7 @@ const ProfileEdit = () => {
   );
 
   const dispatch = useDispatch();
-  const { register, handleSubmit, reset } = useForm();
+  const { register, handleSubmit } = useForm();
 
   const editProfileData = async (data, id) => {
     try {
@@ -47,14 +47,14 @@ const ProfileEdit = () => {
       <Modal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
-        className="bg-white rounded-md max-w-[600px]"
+        className="bg-white mt-10 rounded-md max-w-[600px] min-w-[360px]"
       >
         <form onSubmit={handleSubmit((data) => editProfileData(data, _id))}>
           <div className="p-8">
             <h2 className="font-bold">Make changes to your profile</h2>
             {/* mui components */}
 
-            <div className="flex flex-col mx-auto md:min-w-[500px] gap-10 my-10">
+            <div className="flex flex-col mx-auto md:min-w-[500px]  gap-10 my-10">
               <TextField
                 id="username"
                 label="Name"
@@ -93,10 +93,10 @@ const ProfileEdit = () => {
 
             <div className="flex justify-end items-center gap-x-2">
               <button
+                type="button"
                 className="w-[100px] rounded-sm text-white bg-red-500 p-2"
                 onClick={() => {
                   setIsModalOpen(false);
-                  reset();
                 }}
               >
                 Close