You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.6 KiB
41 lines
1.6 KiB
import React from 'react';
|
|
import { AppBar, Button, Container, Stack, Toolbar, Typography, useTheme } from "@mui/material";
|
|
import { Link, Outlet, useNavigate } from "react-router-dom";
|
|
import { useInjection } from "inversify-react";
|
|
import { AuthStore } from "../stores/AuthStore";
|
|
import { observer } from "mobx-react";
|
|
import { UIStore } from "../stores/UIStore";
|
|
|
|
type AppBarProps = {}
|
|
|
|
const Layout = observer(({}: AppBarProps) => {
|
|
const navigate = useNavigate();
|
|
const authStore = useInjection(AuthStore);
|
|
const uiStore = useInjection(UIStore)
|
|
|
|
return (
|
|
<Container sx={{ pt: 7.8, height: '100vh' }}>
|
|
<AppBar>
|
|
<Container>
|
|
<Toolbar>
|
|
<Typography variant='h5' sx={{ flexGrow: 1 }}>{uiStore.title}</Typography>
|
|
{authStore.token ?
|
|
<Button variant='outlined' color='error' onClick={() => {
|
|
navigate('/signin');
|
|
authStore.setToken('');
|
|
}}>Sign Out</Button> :
|
|
<Stack spacing={1} direction='row'>
|
|
<Button component={Link} variant='outlined' to='/signin' >Sign In</Button>
|
|
<Button component={Link} variant='outlined' to='/signup' >Sign Up</Button>
|
|
</Stack>
|
|
}
|
|
</Toolbar>
|
|
</Container>
|
|
</AppBar>
|
|
<Outlet />
|
|
</Container>
|
|
)
|
|
});
|
|
|
|
export default Layout;
|