Added a Logout button that redirects to the Login page.

This commit is contained in:
2024-05-24 10:22:46 +08:00
parent b9490a4472
commit dae97d21e1

View File

@@ -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>
);