Redesign the dashboard navbar

src/App.jsx

@@ -7,6 +7,7 @@ import Signup from "./sections/SignupPage";
 import LandingPage from "./sections/LandingPage";
 import DashboardCardList from "./components/Dashboard/DashboardCardList";
 import ProtectedRoutes from "./utils/ProtectedRoutes";
+// import GetMonth from "./components/calendar/GetMonth";
 
 const router = createBrowserRouter([
   {

src/app/store.jsx

@@ -1,8 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
 import authReducer from "../features/auth/authSlice";
+import userReducer from "../features/user/userSlice";
 
 export const store = configureStore({
   reducer: {
     auth: authReducer,
+    user: userReducer,
   },
 });

src/components/Dashboard/DashboardNavbar.jsx

@@ -1,44 +1,44 @@
 import React from "react";
 import { FiSearch } from "react-icons/fi";
 import { FaRegUserCircle } from "react-icons/fa";
-import { RiMenuFill } from "react-icons/ri";
+import { MdOutlineNotifications } from "react-icons/md";
 import { useStateContext } from "../../contexts/ContextProvider";
 
 export const DashboardNavbar = () => {
-  const { setActiveMenu, searchText, setSearchText } = useStateContext();
+  const { searchText, setSearchText } = useStateContext();
+
+  // const handleSearch = (e) => {
+  //   setSearchText(e.target.value);
+  // };
 
-  const handleSearch = (e) => {
-    setSearchText(e.target.value);
-  };
   return (
-    <div className="bg-primary w-full text-white">
-      <div className="flex items-start justify-between p-2">
-        <div className="my-3">
-          <h1 className="text-xl font-bold">Dashboard</h1>
-          <p>
-            Welcome back, <span className="font-bold">Micheal</span>
-          </p>
+    <div>
+      <div className="p-5 flex items-center justify-between gap-5 w-full">
+        <div className="flex items-center gap-3">
+          {/* <button
+          onClick={(prev) => {
+            setActiveMenu(true) 
+          }}
+          >
+            <RiMenuFill size={30} />
+          </button> */}
+          {/* <h1 className="text-xl font-bold text-primary">WishesUnbox</h1> */}
         </div>
-        <button
-          className="cursor-pointer p-2 md:hidden"
-          onClick={() => setActiveMenu((prevActiveMenu) => !prevActiveMenu)}
-        >
-          <RiMenuFill size={30} />
-        </button>
-      </div>
-      <div className="flex items-center justify-between gap-2 p-3">
-        <div className="flex items-center justify-start gap-3 border-2 rounded-md px-1">
-          <FiSearch size={20} />
+        <div className="flex items-center gap-1 justify-center bg-slate-100 p-3 rounded-full flex-grow">
+          <FiSearch />
           <input
             type="text"
-            className="bg-transparent focus:outline-none p-1 w-[60%] placeholder:text-white"
-            placeholder="Search cards"
-            value={searchText}
-            onChange={handleSearch}
+            placeholder="search"
+            className="bg-transparent outline-none w-full"
           />
         </div>
-        <div className="flex items-center justify-center gap-1">
-          <FaRegUserCircle /> <span>Micheal Keys</span>
+        <div className="flex items-center gap-2">
+          <button>
+            <FaRegUserCircle size={25} />
+          </button>
+          <button>
+            <MdOutlineNotifications size={25} />
+          </button>
         </div>
       </div>
     </div>

src/components/Dashboard/Sidebar.jsx

@@ -1,98 +1,82 @@
-import React, { useEffect } from "react";
-import { FiPlusCircle } from "react-icons/fi";
-import { sidebarLinks } from "../../constants/index";
+import React from "react";
+import { IoCloseCircleSharp } from "react-icons/io5";
+import { HiOutlineMenuAlt2 } from "react-icons/hi";
+import { dashboard, configurations } from "../../constants/index";
 import { NavLink } from "react-router-dom";
 import { useStateContext } from "../../contexts/ContextProvider";
 
 export const Sidebar = () => {
-  const { activeMenu, setActiveMenu, screenSize, setScreenSize } =
-    useStateContext();
-
-  useEffect(() => {
-    const handleResize = () => setScreenSize(window.innerWidth);
-
-    window.addEventListener("resize", handleResize);
-
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  useEffect(() => {
-    if (screenSize <= 768) {
-      setActiveMenu(false);
-    } else {
-      setActiveMenu(true);
-    }
-  }, [screenSize]);
-
-  const handleCloseSidebar = () => {
-    if (activeMenu && screenSize <= 768) {
-      setActiveMenu(false);
-    }
-  };
+  const { activeMenu, setActiveMenu } = useStateContext();
 
   const activeLink =
-    "flex items-center gap-5 pl-4 p-3 bg-[#FFECDE] rounded-lg text-primary text-md m-2";
+    "flex items-center gap-5 pl-4 p-3 bg-[#FFECDE] rounded-lg text-primary text-md m-2 static";
   const normalLink =
-    "flex items-center gap-5 pl-4 p-3 rounded-lg text-black text-md hover:bg-slate-100";
+    "flex items-center gap-5 pl-4 p-3 rounded-lg text-black text-md hover:bg-slate-100 static";
 
+    // WIll continue to work on the sidebar tomorrow
   return (
     <>
-      {/* Large screen sidebar */}
-      <div className="overflow-auto static z-50 w-[250px] bg-white shadow-lg min-h-screen rounded-md hidden md:block">
-        <div className="flex items-center justify-center m-5">
-          <h1 className="text-primary text-xl font-bold">WishesUnbox</h1>
-        </div>
-        <div className="flex items-center justify-center">
-          <h2 className=" flex items-center justify-center bg-primary text-white font-bold p-3 rounded-lg">
-            Create Card{" "}
-            <span className="m-1">
-              <FiPlusCircle />
-            </span>{" "}
-          </h2>
-        </div>
-        <div className="mt-5">
-          {sidebarLinks.map((item) => (
-            <div key={item.title}>
-              <p className="text-gray-400 uppercase m-2 mt-2">{item.title}</p>
-              {item.links.map((link) => (
+        <div className={`absolute left-0 overflow-hidden fixed z-50 w-[55px] bg-white shadow-lg min-h-screen rounded-md duration-1000`}>
+          <div className="flex items-center justify-between p-5">
+          <button className="mr-2">
+            <HiOutlineMenuAlt2 size={30}/>
+          </button>
+
+          <button onClick={(prev) => setActiveMenu(!prev)}>
+            <IoCloseCircleSharp size={30}/>
+          </button>
+          </div>
+          <div className="m-1">
+            <div>
+            {
+              dashboard.map((link) => (
                 <NavLink
-                  to={`/dashboard/${link.name}`}
-                  key={link.name}
-                  onClick={() => {}}
-                  className={({ isActive }) =>
-                    isActive ? activeLink : normalLink
-                  }
-                >
+                to={`/dashboard/${link.name}`}
+                key={link.name}
+                onClick={() => {
+                  handleCloseSidebar;
+                }}
+                className={({ isActive }) =>
+                  isActive ? activeLink : normalLink
+                }
+              >
+                <button>
                   {link.icon}
-                  <span className="capitalize text-[14px]">{link.name}</span>
-                </NavLink>
-              ))}
+                  </button>
+                <span className="capitalize text-[14px]">{link.name}</span>
+              </NavLink>
+              ))
+            }
             </div>
-          ))}
-        </div>
-      </div>
 
-      {/* mobile sidebar */}
-      {activeMenu && (
-        <div className="absolute left-0 overflow-auto static z-50 w-[250px] bg-white shadow-lg min-h-screen rounded-md md:hidden">
-          <div className="flex items-center justify-center m-5">
-            <h1 className="text-primary text-xl font-bold">WishesUnbox</h1>
-          </div>
-          <div className="flex items-center justify-center">
-            <h2 className=" flex items-center justify-center bg-primary text-white font-bold p-3 rounded-lg">
-              Create Card{" "}
-              <span className="m-1">
-                <FiPlusCircle />
-              </span>{" "}
-            </h2>
-          </div>
-          <div className="mt-5">
-            {sidebarLinks.map((item) => (
+            <div className="mt-64">
+            {
+              configurations.map((link) => (
+                <NavLink
+                to={`/dashboard/${link.name}`}
+                key={link.name}
+                onClick={() => {
+                  handleCloseSidebar;
+                }}
+                className={({ isActive }) =>
+                  isActive ? activeLink : normalLink
+                }
+              >
+                 <button>
+                  {link.icon}
+                  </button>
+                <span className="capitalize text-[14px]">{link.name}</span>
+              </NavLink>
+              ))
+            }
+            </div>
+
+            {/* {sidebarLinks.map((item) => (
               <div key={item.title}>
                 <p className="text-gray-400 uppercase m-2 mt-2">{item.title}</p>
                 {item.links.map((link) => (
                   <NavLink
-                    to={`/${link.name}`}
+                    to={`/dashboard/${link.name}`}
                     key={link.name}
                     onClick={() => {
                       handleCloseSidebar;
@@ -101,15 +85,14 @@ export const Sidebar = () => {
                       isActive ? activeLink : normalLink
                     }
                   >
-                    {/* {link.icon} */}
+                    {link.icon}
                     <span className="capitalize text-[14px]">{link.name}</span>
                   </NavLink>
                 ))}
               </div>
-            ))}
+            ))} */}
           </div>
         </div>
-      )}
     </>
   );
 };

src/components/calendar/GetMonth.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+const GetMonth = (month) => {
+  // List of month with their values
+  const monthList = {
+    january: 31,
+    feburary: 28,
+    march: 31,
+    april: 30,
+    may: 31,
+    june: 30,
+    july: 31,
+    august: 31,
+    september: 30,
+    october: 31,
+    november: 30,
+    december: 31,
+  };
+  const calendar = new Date();
+  const monthCalendar = [];
+  // const dayCalendar = {
+  //   date: "",
+  //   day: "",
+  //   events: [],
+  // };
+
+  // const day = new Date().getDay();
+  // console.log(day);
+
+  // console.log(monthList.january);
+  for (let i = 1; i < monthList.january + 1; i++) {
+    // const date = i;
+    // const day = new Date(2024, 2, 1);
+    monthCalendar.push(i);
+    console.log(monthCalendar);
+  }
+
+  // const monthArray = Object.entries(monthList);
+  // console.log(monthArray);
+  // for (let i = 1; i <= monthArray[0][2]; i++) {
+  //   console.log(i);
+  // }
+
+  // const currentMonth = () => {
+  // Replace this with the current month
+  // return calendar.getMonth(11);
+  // console.log(Object.keys(monthList));
+
+  // return monthList;
+  // };
+
+  // const getMonthlist = () => {};
+  // const dayofweek = () => {
+  //   return calendar.setMonth(11);
+  // };
+
+  // console.log(currentMonth());
+
+  return <div>GetMonth</div>;
+};
+
+export default GetMonth;