Added Logout Option and prefetch for the dashboard

components/_App/LeftSidebar/SidebarData.js

@@ -6,6 +6,7 @@ import LayersIcon from "@mui/icons-material/Layers";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LockIcon from "@mui/icons-material/Lock";
+import LogoutIcon from "@mui/icons-material/Logout";
 import SettingsIcon from "@mui/icons-material/Settings";
 import PostAddIcon from "@mui/icons-material/PostAdd";
 import MailOutlineIcon from "@mui/icons-material/MailOutline";
@@ -513,4 +514,9 @@ export const SidebarData = [
       },
     ],
   },
+  {
+    title: "Logout",
+    path: "/auth/logout",
+    icon: <LogoutIcon />,
+  },
 ];

components/_App/LeftSidebar/index.js

@@ -1,69 +1,69 @@
-import React from 'react';
-import {
-  Box
-} from "@mui/material";
+import React from "react";
+import { Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { SidebarData } from './SidebarData';
-import SubMenu from './SubMenu';
-import Link from 'next/link';
-import ClearIcon from '@mui/icons-material/Clear';
-import IconButton from '@mui/material/IconButton';
+import { SidebarData } from "./SidebarData";
+import SubMenu from "./SubMenu";
+import Link from "next/link";
+import ClearIcon from "@mui/icons-material/Clear";
+import IconButton from "@mui/material/IconButton";
 
 const SidebarNav = styled("nav")(({ theme }) => ({
-  background: '#fff',
+  background: "#fff",
   boxShadow: "0px 4px 20px rgba(47, 143, 232, 0.07)",
-  width: '300px',
-  padding: '30px 10px',
-  height: '100vh',
-  display: 'flex',
-  justifyContent: 'center',
-  position: 'fixed',
+  width: "300px",
+  padding: "30px 10px",
+  height: "100vh",
+  display: "flex",
+  justifyContent: "center",
+  position: "fixed",
   top: 0,
   left: 0,
-  transition: '350ms',
-  zIndex: '10',
-  overflowY: 'auto'
+  transition: "350ms",
+  zIndex: "10",
+  overflowY: "auto",
 }));
- 
+
 const SidebarWrap = styled("div")(({ theme }) => ({
-  width: '100%'
+  width: "100%",
 }));
 
 const Sidebar = ({ toggleActive }) => {
   return (
     <>
-      <div className='leftSidebarDark'>
+      <div className="leftSidebarDark">
         <SidebarNav className="LeftSidebarNav">
           <SidebarWrap>
-            <Box 
-              sx={{ 
-                mb: '20px',
-                px: '20px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+            <Box
+              sx={{
+                mb: "20px",
+                px: "20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Link href='/'>
-                <img 
-                  src="/images/logos/wrenchboard-logo.png" alt="Logo" 
-                  className='black-logo' 
+              <Link href="/">
+                <img
+                  src="/images/logos/wrenchboard-logo.png"
+                  alt="Logo"
+                  className="black-logo"
                 />
 
                 {/* For Dark Variation */}
-                <img 
-                  src="/images/logos/wrenchboard-logo.png" alt="Logo" 
-                  className='white-logo' 
+                <img
+                  src="/images/logos/wrenchboard-logo.png"
+                  alt="Logo"
+                  className="white-logo"
                 />
               </Link>
 
-              <IconButton 
-                onClick={toggleActive} 
+              <IconButton
+                onClick={toggleActive}
                 size="small"
                 sx={{
-                  background: 'rgb(253, 237, 237)',
-                  display: { lg: 'none' },
-                  marginLeft: "1rem"
+                  background: "rgb(253, 237, 237)",
+                  display: { lg: "none" },
+                  marginLeft: "1rem",
                 }}
               >
                 <ClearIcon />