From dae97d21e1f3060d0334416847cedd61168c93d8 Mon Sep 17 00:00:00 2001
From: Toni <mbenjamin@suhay.com.ph>
Date: Fri, 24 May 2024 10:22:46 +0800
Subject: [PATCH] Added a Logout button that redirects to the Login page.

---
 src/components/Header.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 97dc2cb..fd26add 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,12 +1,18 @@
 import { Flex, AppShell, Burger, Button, Paper, useMantineColorScheme, useComputedColorScheme} from '@mantine/core';
 import {FaSun, FaMoon} from 'react-icons/fa';
 import { Text } from '@mantine/core';
-import List from './Lists';
+import { useNavigate } from 'react-router-dom';
 
 const Header = ({toggle, opened}) => {
     const {setColorScheme} = useMantineColorScheme();
     const computedColorScheme = useComputedColorScheme('light');
 
+    const navigate= useNavigate();
+
+    const clickToBackHandler=()=>{
+        navigate("/*");
+    }
+
     const toggleColorScheme = () => {
         setColorScheme(computedColorScheme === "dark" ? "light" : "dark")}
 
@@ -22,7 +28,15 @@ const Header = ({toggle, opened}) => {
                 >
                  ADMIN MANAGEMENT
                 </Text></div>
-            <Button size="sm" variant="link" onClick={toggleColorScheme}>{computedColorScheme === "dark" ? <FaSun/> : <FaMoon/>}</Button>
+                <div>
+                    <Button size="xs" variant="link" onClick={toggleColorScheme}>{computedColorScheme === "dark" ? <FaSun/> : <FaMoon/>}</Button>
+                    <Button 
+                    style={{ marginLeft: '10px' }} 
+                    variant="gradient"
+                    gradient={{ from: 'blue', to: 'green', deg: 229 }} 
+                    size="xs" 
+                    onClick={clickToBackHandler}>Log Out</Button>
+                </div>
         </Flex>
     </AppShell.Header>
     );