Added a Logout button that redirects to the Login page.
This commit is contained in:
@@ -1,12 +1,18 @@
|
|||||||
import { Flex, AppShell, Burger, Button, Paper, useMantineColorScheme, useComputedColorScheme} from '@mantine/core';
|
import { Flex, AppShell, Burger, Button, Paper, useMantineColorScheme, useComputedColorScheme} from '@mantine/core';
|
||||||
import {FaSun, FaMoon} from 'react-icons/fa';
|
import {FaSun, FaMoon} from 'react-icons/fa';
|
||||||
import { Text } from '@mantine/core';
|
import { Text } from '@mantine/core';
|
||||||
import List from './Lists';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
const Header = ({toggle, opened}) => {
|
const Header = ({toggle, opened}) => {
|
||||||
const {setColorScheme} = useMantineColorScheme();
|
const {setColorScheme} = useMantineColorScheme();
|
||||||
const computedColorScheme = useComputedColorScheme('light');
|
const computedColorScheme = useComputedColorScheme('light');
|
||||||
|
|
||||||
|
const navigate= useNavigate();
|
||||||
|
|
||||||
|
const clickToBackHandler=()=>{
|
||||||
|
navigate("/*");
|
||||||
|
}
|
||||||
|
|
||||||
const toggleColorScheme = () => {
|
const toggleColorScheme = () => {
|
||||||
setColorScheme(computedColorScheme === "dark" ? "light" : "dark")}
|
setColorScheme(computedColorScheme === "dark" ? "light" : "dark")}
|
||||||
|
|
||||||
@@ -22,7 +28,15 @@ const Header = ({toggle, opened}) => {
|
|||||||
>
|
>
|
||||||
ADMIN MANAGEMENT
|
ADMIN MANAGEMENT
|
||||||
</Text></div>
|
</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>
|
</Flex>
|
||||||
</AppShell.Header>
|
</AppShell.Header>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user