update 8 files

src/redux/actions/dashboard.js

@@ -1,5 +1,8 @@
 const dashboard = {
-  
+  setPage:
+    (data = {}) =>
+    async (dispatch) =>
+      dispatch({ type: "dashboard/setPage", data }),
 };
 
 export default dashboard;

src/redux/reducers/dashboard.js

@@ -3,6 +3,7 @@ import { toast } from "react-toastify";
 const initialState = {
   loading: false,
   error: null,
+  page: localStorage.getItem("dashboardPage"),
   sidebar: {
     userInfo: true,
     menu: [
@@ -70,6 +71,9 @@ const initialState = {
 export default function dashboard(state = initialState, action) {
   let { type, data } = action;
   switch (type) {
+    case "dashboard/setPage":
+      localStorage.setItem("dashboardPage", data);
+      return { ...state, page: data };
     default:
       return state;
   }

src/router.js

@@ -604,7 +604,7 @@ function Router({
               }
             />
           </Routes>
-          {!isMobile ? <FooterDesign1 hasHeader /> : null}
+          {/* {!isMobile ? <FooterDesign1 hasHeader /> : null} */}
         </BrowserRouter>
       </div>
     </div>

src/views/Auth/Profile/Upload/index.js

@@ -15,7 +15,7 @@ function Upload({ name, value: initValue, onChange }) {
   return (
     <div
       className="flex justify-center bg-green-400 rounded-full items-center overflow-hidden relative"
-      style={{ width: 100, height: 100 }}
+      style={{ minWidth: 100, minHeight: 100, maxWidth: 100, maxHeight: 100 }}
     >
       <div
         className={`h-full  w-full rounded-full flex justify-center items-center ${

src/views/Auth/Profile/index.js

@@ -399,7 +399,7 @@ function Profile({
     </div>
   ) : (
     <div
-      className="hidden lg:flex flex-col items-center gap-5 w-full pt-5 select-none"
+      className="hidden lg:flex flex-col items-center gap-5 w-10/12 pt-6 select-none"
       onSubmit={(e) => onSubmit()}
     >
       <Upload

src/views/Dashboard/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
-import { publicApi } from "../../redux/actions";
+import { publicApi, dashboard } from "../../redux/actions";
 
 //components
 import Sidebar from "./layouts/SidebarMenu";
@@ -9,19 +9,11 @@ import User from "./layouts/Mobile/User";
 import Trophy from "./layouts/Mobile/Trophy";
 import List from "./layouts/Mobile/List";
 
-export const Dashboard = ({ isMobile, headerOptions, setHeaderOptions }) => {
+export const Dashboard = ({ isMobile, headerOptions, setHeaderOptions, setPage, page }) => {
-  const [page, setPage] = useState(
-    localStorage?.getItem("dashboard") || "userItems"
-  );
-
   useEffect(() => {
     setHeaderOptions(headerOptions);
   }, []);
 
-  useEffect(() => {
-    localStorage.setItem("dashboard", page);
-  }, [page]);
-
   return isMobile ? (
     <div className="flex-1 flex flex-col px-4">
       <User />
@@ -42,11 +34,13 @@ export const Dashboard = ({ isMobile, headerOptions, setHeaderOptions }) => {
 };
 
 const mapStateToProps = (state) => ({
-  isMobile: state.publicApi.isMobile,
+  isMobile: state.config.device === 'mobile',
+  page: state.dashboard.page
 });
 
 const mapDispatchToProps = {
   setHeaderOptions: publicApi.setHeaderOptions,
+  setPage: dashboard.setPage
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

src/views/Dashboard/layouts/Main/index.js

@@ -13,7 +13,7 @@ import Profile from "../../../Auth/Profile";
 
 const views = {
   orders: <Orders />,
-  mybooks: <MyBooks />,
+  myBooks: <MyBooks />,
   userItems: <UserItems />,
   ticket: (
     <div className="flex-1 flex flex-col justify-center items-center">
@@ -31,7 +31,7 @@ const views = {
 export const Main = ({ page }) => {
   return (
     <div
-      className="overflow-y-scroll overflow-x-hidden border-t-2 border-b-2 border-solid border-gray-300 flex flex-1 flex-shrink-0 no-scrollbar"
+      className="overflow-y-scroll overflow-x-hidden border-t-2 pb-10 border-b-2 border-solid border-gray-300 flex justify-center flex-1 flex-shrink-0 no-scrollbar"
     >
       {views[page]}
     </div>

src/views/Dashboard/layouts/SidebarMenu/index.js

@@ -118,7 +118,7 @@ const SidebarMenu = ({
       className="bg-gray-50 py-5 border-l-2 border-t-2 border-b-2 pl-4 pr-2 shadow-sm border-gray-300 border-solid overflow-y-scroll no-scrollbar divide-y divide-solid divide-gray-200"
       style={{
         height: "calc(100vh - 71px)",
-        minWidth: 300,
+        minWidth: 250,
       }}
     >
       {sidebar?.userInfo ? (