Merge pull request #74 from Princekumarofficial/main

1. Logout function Added 2. Login page buttons structure

src/components/NavButtonGroup.tsx

@@ -8,6 +8,7 @@ import Link, { LinkProps } from "next/link";
 import { usePathname } from "next/navigation";
 import { ToggleContext } from "@/contextProviders/ToggleProvider";
 import { motion } from "framer-motion";
+import Cookies from "js-cookie";
 
 const NavLink = ({ href }: LinkProps) => {
   const path = usePathname();
@@ -88,49 +89,66 @@ const NavLink = ({ href }: LinkProps) => {
   );
 };
 
-const NavButtonGroup = () => {
+const LogoutButton = () => {
+  const context = useContext(ToggleContext);
+
+  const logOut = () => {
+    Cookies.remove("user");
+    Cookies.remove("accessToken");
+    window.location.reload();
+  };
+
+  return (
+    <div
+      className="hover:bg-gray-900 rounded-md mb-[1vh] py-[1vh] px-[1vw]"
+      onClick={logOut}
+    >
+      <div className="flex justify-start gap-[1rem]">
+        <div className="w-[2rem]">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="#fff"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+            <polyline points="16 17 21 12 16 7"></polyline>
+            <line x1="21" y1="12" x2="9" y2="12"></line>
+          </svg>
+        </div>
+        <motion.div
+          initial={{ opacity: 1 }}
+          animate={context.isOpen ? "open" : "closed"}
+          transition={{ duration: 0.1 }}
+          variants={{
+            closed: { opacity: 0 },
+            open: { opacity: 1 },
+          }}
+          className="w-[13vw]"
+        >
+          Logout
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+const NavButtonGroup = (params: { loggedIn: boolean }) => {
   const context = useContext(ToggleContext);
 
   return (
     <div className="">
       <div className="flex flex-col">
-        <NavLink href="/login" />
-        <div className="hover:bg-gray-900 rounded-md mb-[1vh] py-[1vh] px-[1vw]">
-          <div className="flex justify-start gap-[1rem]">
-            <div className="w-[2rem]">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="#fff"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
-                <polyline points="16 17 21 12 16 7"></polyline>
-                <line x1="21" y1="12" x2="9" y2="12"></line>
-              </svg>
-            </div>
-            <motion.div
-              initial={{ opacity: 1 }}
-              animate={context.isOpen ? "open" : "closed"}
-              transition={{ duration: 0.1 }}
-              variants={{
-                closed: { opacity: 0 },
-                open: { opacity: 1 },
-              }}
-              className="w-[13vw]"
-            >
-              Logout
-            </motion.div>
-          </div>
-        </div>
+        {!params.loggedIn && <NavLink href="/login" />}
+        {params.loggedIn && <LogoutButton />}
       </div>
     </div>
   );
 };
 
-export default NavButtonGroup;
+export default NavButtonGroup;

src/components/Sidebar.tsx

@@ -10,7 +10,6 @@ import AdminDashboard from "./SideBar/Roles/admin";
 import StudentDashboard from "./SideBar/Roles/student";
 import RecruiterDashboard from "./SideBar/Roles/recruiter";
 
-
 interface Framework {
   value: string;
   label: string;
@@ -31,21 +30,24 @@ interface Props {
 }
 
 const Sidebar = () => {
-
   const isSmallScreen = useMediaQuery({ query: "(max-width: 768px)" });
 
   const context = useContext(ToggleContext);
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const [isRecruiter, setIsRecruiter] = useState<boolean>(false);
   const [isStudent, setIsStudent] = useState<boolean>(false);
+  const [isLoggedIn, setLoggedIn] = useState<boolean>(false);
 
-useEffect(()=>{
+  useEffect(() => {
     const userString = Cookies.get("user");
     const user = userString ? JSON.parse(userString) : null;
-    setIsAdmin(user?.role === "ADMIN")
-    setIsRecruiter(user?.role === "RECRUITER")
-    setIsStudent(user?.role === "STUDENT")
-  }, [])
+    if (user) {
+      setLoggedIn(true);
+    }
+    setIsAdmin(user?.role === "ADMIN");
+    setIsRecruiter(user?.role === "RECRUITER");
+    setIsStudent(user?.role === "STUDENT");
+  }, []);
   return (
     <motion.div
       initial={{
@@ -152,20 +154,14 @@ useEffect(()=>{
             {/* <CompanyDropDown userRole={userRole} /> */}
           </div>
           <hr />
-          <NavButtonGroup />
+          <NavButtonGroup loggedIn={isLoggedIn} />
         </div>
-        {isAdmin && (
-          <AdminDashboard/>
-        )}
-        {isStudent && (
-          <StudentDashboard/>
-        )}
-        {isRecruiter&& (
-          <RecruiterDashboard/>
-        )}
+        {isAdmin && <AdminDashboard />}
+        {isStudent && <StudentDashboard />}
+        {isRecruiter && <RecruiterDashboard />}
       </div>
     </motion.div>
   );
 };
 
-export default Sidebar;
+export default Sidebar;

src/components/loginForms/loginForm.tsx

@@ -97,8 +97,10 @@ const LoginForm = () => {
                       >
                         Request Access
                       </button>
-                      <LoginWithEmail email={email} />
-                      <GoogleLogin />
+                      <div className="flex flex-row gap-4">
+                        <LoginWithEmail email={email} />
+                        <GoogleLogin />
+                      </div>
                     </div>
                   </div>
                 </div>