Skip to content

Commit

Permalink
feat: fix burger menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@bjarneo
bjarneo committed Apr 11, 2023
1 parent 0dc2b43 commit 5acdf1e
Show file tree
Hide file tree
Showing 6 changed files with 141 additions and 93 deletions.
88 changes: 46 additions & 42 deletions src/client/app.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Group,
} from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import { useMediaQuery } from '@mantine/hooks';
import { useTranslation } from 'react-i18next';

const HeaderContent = lazy(() => import('./components/header'));
Expand All @@ -25,6 +26,7 @@ const Terms = lazy(() => import('./routes/terms'));

const App = () => {
const { t } = useTranslation();
const isMobile = useMediaQuery('(max-width: 768px)');

const theme = useMantineTheme();
return (
Expand Down Expand Up @@ -78,48 +80,50 @@ const App = () => {
footer={
<Footer height={45} p="xs">
<Group position="center" spacing="xs">
<>
<Anchor
component={Link}
to="/account"
color="dimmed"
size="xs"
transform="uppercase"
>
{t('account')}
</Anchor>
|
</>
<Anchor
component={Link}
to="/privacy"
color="dimmed"
size="xs"
transform="uppercase"
>
Privacy
</Anchor>
|
<Anchor
component={Link}
to="/terms"
color="dimmed"
size="xs"
transform="uppercase"
>
Terms & Condition
</Anchor>
|
<Anchor
component={Link}
to="/"
color="dimmed"
size="xs"
transform="uppercase"
>
About
</Anchor>
|
{!isMobile && (
<>
<Anchor
component={Link}
to="/account"
color="dimmed"
size="xs"
transform="uppercase"
>
{t('account')}
</Anchor>
|
<Anchor
component={Link}
to="/privacy"
color="dimmed"
size="xs"
transform="uppercase"
>
Privacy
</Anchor>
|
<Anchor
component={Link}
to="/terms"
color="dimmed"
size="xs"
transform="uppercase"
>
Terms & Condition
</Anchor>
|
<Anchor
component={Link}
to="/"
color="dimmed"
size="xs"
transform="uppercase"
>
About
</Anchor>
|
</>
)}
<Anchor
href="https://github.com/HemmeligOrg/Hemmelig.app"
color="dimmed"
Expand Down
125 changes: 77 additions & 48 deletions src/client/components/header/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Link, Redirect } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Anchor, Button, Container, Group, Grid } from '@mantine/core';
import { IconLockOff, IconLogin } from '@tabler/icons';
import { Anchor, Burger, NavLink, Container, Group, Grid } from '@mantine/core';
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
import { IconUser, IconLockOff, IconLogin } from '@tabler/icons';
import { useTranslation } from 'react-i18next';
import { userLoginChanged, userLogin } from '../../actions/';
import Logo from './logo.jsx';
Expand All @@ -14,10 +15,15 @@ import style from './style.module.css';
const Header = () => {
const { t } = useTranslation();
const dispatch = useDispatch();

const isLoggedIn = useSelector((state) => state.isLoggedIn);
const username = useSelector((state) => state.username);

const [opened, { toggle }] = useDisclosure(false);
const [onSignOutRedirect, setOnSignOutRedirect] = useState(false);
const isMobile = useMediaQuery('(max-width: 768px)');

const label = opened ? 'Close navigation' : 'Open navigation';

useEffect(() => {
if (!isLoggedIn && username) {
Expand All @@ -32,8 +38,8 @@ const Header = () => {
}
}, []);

const onSignOut = (event) => {
event.preventDefault();
const onSignOut = () => {
toggle();

removeCookie();

Expand All @@ -45,59 +51,82 @@ const Header = () => {
setOnSignOutRedirect(true);
};

const getNavigation = () => {
if (!opened) {
return <></>;
}

return (
<Group spacing="xs" className={style.nav}>
{!isLoggedIn && (
<>
<NavLink
label={t('sign_up')}
icon={<IconUser size="1rem" stroke={1.5} />}
component={Link}
onClick={toggle}
to="/signup"
/>
<NavLink
label={t('sign_in')}
icon={<IconLogin size="1rem" stroke={1.5} />}
component={Link}
onClick={toggle}
to="/signin"
/>
</>
)}

<NavLink
label={t('account')}
icon={<IconUser size="1rem" stroke={1.5} />}
component={Link}
onClick={toggle}
to="/account"
/>

{isMobile && (
<>
<NavLink label="Privacy" component={Link} onClick={toggle} to="/privacy" />

<NavLink
label="Terms & Condition"
component={Link}
onClick={toggle}
to="/terms"
/>
</>
)}

{isLoggedIn && (
<NavLink
label={t('sign_out')}
icon={<IconLockOff size="1rem" stroke={1.5} />}
onClick={onSignOut}
/>
)}
</Group>
);
};

return (
<Container>
<Grid columns={24} align="center">
<Grid.Col span={16}>
<Grid.Col span={20}>
<Anchor component={Link} to="/">
<Logo className={style.logo} />
</Anchor>
</Grid.Col>

{isLoggedIn && (
<Grid.Col span={8}>
<Group position="right">
<Button
color="hemmelig"
leftIcon={<IconLockOff size={14} />}
onClick={onSignOut}
>
{t('sign_out')}
</Button>
</Group>
</Grid.Col>
)}
<Grid.Col span={4}>
<Group position="right">
<Burger opened={opened} onClick={toggle} aria-label={label} />
</Group>
</Grid.Col>

{!isLoggedIn && (
<>
<Grid.Col span={4}>
<Group position="right">
<Button
variant="subtle"
color="hemmelig"
component={Link}
to="/signin"
>
{t('sign_in')}
</Button>
</Group>
</Grid.Col>

<Grid.Col span={4}>
<Group position="right">
<Button
color="hemmelig"
leftIcon={<IconLogin size={14} />}
component={Link}
to="/signup"
>
{t('sign_up')}
</Button>
</Group>
</Grid.Col>
</>
)}
{onSignOutRedirect && <Redirect to="/signin" />}
{getNavigation()}

{onSignOutRedirect && <Redirect push to="/signin" />}
</Grid>
</Container>
);
Expand Down
15 changes: 15 additions & 0 deletions src/client/components/header/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,18 @@
width: 50px;
max-height: 50px;
}

.nav {
width: 40%;
background-color: #17181a; /*#17181a;*/
margin-left: auto;
order: 2;
margin-right: 14px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

@media only screen and (max-width: 768px) {
.nav {
width: 100%;
}
}
2 changes: 1 addition & 1 deletion src/client/routes/account/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const HomeAccount = () => {
}, []);

if (!username) {
return <Redirect to="/signin" />;
return <Redirect push to="/signin" />;
}

if (!user?.username) {
Expand Down
2 changes: 1 addition & 1 deletion src/client/routes/signin/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ const SignIn = () => {
title={t('settings.success')}
withCloseButton={false}
>
Redirecting to your account page. <Redirect to="/account" />
Redirecting to your account page. <Redirect push to="/account" />
</Notification>
)}
</Container>
Expand Down
2 changes: 1 addition & 1 deletion src/client/routes/signup/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ const SignUp = () => {
withCloseButton={false}
>
Redirecting to your account page.
<Redirect to="/account" />
<Redirect push to="/account" />
</Notification>
)}
</Container>
Expand Down

0 comments on commit 5acdf1e

Please sign in to comment.