External/domain-watchdog
1
0
Fork 0
mirror of https://github.com/maelgangloff/domain-watchdog.git synced 2025-12-29 16:15:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update front

Browse Source
This commit is contained in:
Maël Gangloff
2024-07-23 18:37:59 +02:00
parent 4556dfe85e
commit 827ca478c6
14 changed files with 599 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
assets/components/AppAppBar.tsx
View File

@@ -1,47 +1,23 @@
import * as React from 'react';
import {PaletteMode} from '@mui/material';
import Box from '@mui/material/Box';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Container from '@mui/material/Container';
import Divider from '@mui/material/Divider';
import MenuItem from '@mui/material/MenuItem';
import Drawer from '@mui/material/Drawer';
import MenuIcon from '@mui/icons-material/Menu';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import ToggleColorMode from './ToggleColorMode';
import Sitemark from './SitemarkIcon';
import {NavLink} from "react-router-dom";
import ToggleColorMode from "./ToggleColorMode";
import {PaletteMode} from "@mui/material";
import Link from "@mui/material/Link";
interface AppAppBarProps {
mode: PaletteMode;
toggleColorMode: () => void;
isAuthenticated: boolean
}
export default function AppAppBar({mode, toggleColorMode}: AppAppBarProps) {
const [open, setOpen] = React.useState(false);
const toggleDrawer = (newOpen: boolean) => () => {
setOpen(newOpen);
};
const scrollToSection = (sectionId: string) => {
const sectionElement = document.getElementById(sectionId);
const offset = 128;
if (sectionElement) {
const targetScroll = sectionElement.offsetTop - offset;
sectionElement.scrollIntoView({behavior: 'smooth'});
window.scrollTo({
top: targetScroll,
behavior: 'smooth',
});
setOpen(false);
}
};
export default function AppAppBar({mode, toggleColorMode, isAuthenticated}: AppAppBarProps) {
return (
<AppBar
position="fixed"
@@ -73,23 +49,26 @@ export default function AppAppBar({mode, toggleColorMode}: AppAppBarProps) {
<Box sx={{flexGrow: 1, display: 'flex', alignItems: 'center', px: 0}}>
<Sitemark/>
<Box sx={{display: {xs: 'none', md: 'flex'}}}>
<Button
variant="text"
color="info"
size="small"
onClick={() => scrollToSection('highlights')}
>
Highlights
</Button>
<Button
variant="text"
color="info"
size="small"
onClick={() => scrollToSection('faq')}
sx={{minWidth: 0}}
>
FAQ
</Button>
<NavLink to='/'>
<Button
variant="text"
color="info"
size="small"
>
Presentation
</Button>
</NavLink>
</Box>
<Box sx={{display: {xs: 'none', md: 'flex'}}}>
<NavLink to="/dashboard">
<Button
variant="text"
color="info"
size="small"
>
Dashboard
</Button>
</NavLink>
</Box>
</Box>
<Box
@@ -104,42 +83,19 @@ export default function AppAppBar({mode, toggleColorMode}: AppAppBarProps) {
mode={mode}
toggleColorMode={toggleColorMode}
/>
<NavLink to="/login">
<Button color="primary" variant="text" size="small">
Sign in
</Button>
</NavLink>
</Box>
<Box sx={{display: {sm: 'flex', md: 'none'}}}>
<IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
<MenuIcon/>
</IconButton>
<Drawer anchor="top" open={open} onClose={toggleDrawer(false)}>
<Box sx={{p: 2, backgroundColor: 'background.default'}}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode}/>
<IconButton onClick={toggleDrawer(false)}>
<CloseRoundedIcon/>
</IconButton>
</Box>
<Divider sx={{my: 3}}/>
<MenuItem onClick={() => scrollToSection('highlights')}>
Highlights
</MenuItem>
<MenuItem onClick={() => scrollToSection('faq')}>FAQ</MenuItem>
<MenuItem>
<Button color="primary" variant="outlined" fullWidth>
{
!isAuthenticated ?
<NavLink to="/login">
<Button color="primary" variant="text" size="small">
Sign in
</Button>
</MenuItem>
</Box>
</Drawer>
</NavLink>
: <Link href="/logout">
<Button color="primary" variant="text" size="small">
Log out
</Button>
</Link>
}
</Box>
</Toolbar>
</Container>

20
assets/components/Footer.tsx
View File

@@ -5,8 +5,7 @@ import IconButton from '@mui/material/IconButton';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import FacebookIcon from '@mui/icons-material/GitHub';
import {NavLink} from "react-router-dom";
function Copyright() {
return (
@@ -41,15 +40,19 @@ export default function Footer() {
}}
>
<div>
<Link color="text.secondary" variant="body2" href="#">
Privacy Policy
</Link>
<NavLink to="/privacy">
<Link color="text.secondary" variant="body2">
Privacy Policy
</Link>
</NavLink>
<Typography sx={{display: 'inline', mx: 0.5, opacity: 0.5}}>
&nbsp;•&nbsp;
</Typography>
<Link color="text.secondary" variant="body2" href="#">
Terms of Service
</Link>
<NavLink to="/tos">
<Link color="text.secondary" variant="body2">
Terms of Service
</Link>
</NavLink>
<Copyright/>
</div>
<Stack
@@ -64,7 +67,6 @@ export default function Footer() {
aria-label="GitHub"
sx={{alignSelf: 'center'}}
>
<FacebookIcon/>
</IconButton>
</Stack>
</Box>