logout button in side menu

src/App.js

@@ -13,7 +13,7 @@ function App() {
     <>
       {loggedIn ? (
         <Layout style={{ minHeight: "100vh" }}>
-          <SideMenu></SideMenu>
+          <SideMenu setLoggedIn={setLoggedIn}></SideMenu>
           <PageContent></PageContent>
         </Layout>
       ) : (

src/Components/PageContent/index.js

@@ -1,4 +1,4 @@
-import { Content } from "antd/es/layout/layout";
+import { Content, Footer } from "antd/es/layout/layout";
 import AppRoutes from "../AppRoutes";
 
 function PageContent() {

src/Components/SideMenu/index.js

@@ -1,10 +1,16 @@
-import { AppstoreOutlined, SnippetsOutlined } from "@ant-design/icons";
+import {
-import { Menu } from "antd";
+  AppstoreOutlined,
+  LogoutOutlined,
+  SnippetsOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { Divider, Menu } from "antd";
 import Sider from "antd/es/layout/Sider";
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import PropTypes from "prop-types";
 
-function SideMenu() {
+export default function SideMenu({ setLoggedIn }) {
   const location = useLocation();
   const [selectedKeys, setSelectedKeys] = useState("/");
 
@@ -19,29 +25,57 @@ function SideMenu() {
       theme="light"
       style={{ overflow: "auto", position: "fixed", height: "100vh" }}
     >
-      <div className="CompanyName">JANEX</div>
+      <div
-      <div className="Subtitle">Admin Dashboard</div>
+        style={{
-      <Menu
+          display: "flex",
-        mode="vertical"
+          justifyContent: "space-between",
-        onClick={(item) => {
+          flexDirection: "column",
-          navigate(item.key);
+          height: "100%",
         }}
-        theme="light"
+      >
-        selectedKeys={[selectedKeys]}
+        <div>
-        items={[
+          <div className="CompanyName">JANEX</div>
-          {
+          <div className="Subtitle">Admin Dashboard</div>
-            label: "Dashboard",
+          <Menu
-            icon: <AppstoreOutlined />,
+            mode="vertical"
-            key: "/",
+            onClick={(item) => {
-          },
+              navigate(item.key);
-          {
+            }}
-            label: "Group Tasks",
+            theme="light"
-            icon: <SnippetsOutlined />,
+            selectedKeys={[selectedKeys]}
-            key: "/group-tasks",
+            items={[
-          },
+              {
-        ]}
+                label: "Dashboard",
-      ></Menu>
+                icon: <AppstoreOutlined />,
+                key: "/",
+              },
+              {
+                label: "Group Tasks",
+                icon: <SnippetsOutlined />,
+                key: "/group-tasks",
+              },
+            ]}
+          />
+        </div>
+        <div>
+          <Divider />
+          <Menu
+            selectable={false}
+            mode="vertical"
+            items={[
+              {
+                label: "Logout",
+                icon: <LogoutOutlined />,
+                onClick: () => setLoggedIn(false),
+              },
+            ]}
+          />
+        </div>
+      </div>
     </Sider>
   );
 }
-export default SideMenu;
+
+SideMenu.propTypes = {
+  setLoggedIn: PropTypes.func.isRequired,
+};

src/Pages/Login/index.js

@@ -1,4 +1,4 @@
-import { LockOutlined, UserOutlined } from "@ant-design/icons";
+import { LockOutlined, LoginOutlined, UserOutlined } from "@ant-design/icons";
 import { Button, Form, Input } from "antd";
 import PropTypes from "prop-types";
 
@@ -32,6 +32,7 @@ export default function Login({ setLoggedIn }) {
             <Button
               type="primary"
               htmlType="submit"
+              icon={<LoginOutlined />}
               className="login-form-button"
               onClick={() => setLoggedIn(true)}
             >