m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-18 15:23:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #513 from gabehab/dev

Browse Source 
Create mobile menu
This commit is contained in:
Mike Cao 2021-03-17 07:25:18 -07:00 committed by GitHub
commit b8b4e1b75b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 135 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
components/layout/Header.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
@ -13,40 +13,66 @@ import styles from './Header.module.css';
export default function Header() { export default function Header() {
const user = useSelector(state => state.user); const user = useSelector(state => state.user);
const [active, setActive] = useState(false);
function handleClick() {
setActive(state => !state);
}
return ( return (
<header className="container"> <nav className="container">
{user?.is_admin && <UpdateNotice />} {user?.is_admin && <UpdateNotice />}
<div className={classNames(styles.header, 'row align-items-center')}> <div className={classNames(styles.header, 'row align-items-center')}>
<div className="col-6 col-lg-3 order-1 order-lg-1"> <div className={styles.nav}>
<div className={styles.title}> <div className="">
<Icon icon={<Logo />} size="large" className={styles.logo} /> <div className={styles.title}>
<Link href={user ? '/' : 'https://umami.is'}>umami</Link> <Icon icon={<Logo />} size="large" className={styles.logo} />
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
</div>
</div> </div>
</div> <button
<div className="col-12 col-lg-6 order-3 order-lg-2"> onClick={handleClick}
role="button"
className={styles.burger}
aria-label="menu"
aria-expanded="false"
>
{active ? (
<div> X </div>
) : (
<>
<span></span>
<span></span>
<span></span>
</>
)}
</button>
{user && ( {user && (
<div className={styles.nav}> <div className={styles.items}>
<Link href="/dashboard"> <div className={active ? classNames(styles.active) : ''}>
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" /> <Link href="/dashboard">
</Link> <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
<Link href="/realtime"> </Link>
<FormattedMessage id="label.realtime" defaultMessage="Realtime" /> <Link href="/realtime">
</Link> <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
<Link href="/settings"> </Link>
<FormattedMessage id="label.settings" defaultMessage="Settings" /> <Link href="/settings">
</Link> <FormattedMessage id="label.settings" defaultMessage="Settings" />
</Link>
</div>
</div> </div>
)} )}
</div> <div className={styles.items}>
<div className="col-6 col-lg-3 order-2 order-lg-3"> <div className={active ? classNames(styles.active) : ''}>
<div className={styles.buttons}> <div className={styles.buttons}>
<ThemeButton /> <ThemeButton />
<LanguageButton menuAlign="right" /> <LanguageButton menuAlign="right" />
{user && <UserButton />} {user && <UserButton />}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</header> </nav>
); );
} }

87
components/layout/Header.module.css
View File

@ -1,6 +1,19 @@
.navbar {
align-items: stretch;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.burger {
display: none;
}
.header { .header {
display: flex; display: flex;
min-height: 100px; min-height: 100px;
width: 100%;
} }
.title { .title {
@ -15,6 +28,15 @@
} }
.nav { .nav {
display: flex;
align-items: center;
font-size: var(--font-size-normal);
font-weight: 600;
width: 100%;
justify-content: space-between;
}
.items {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -35,16 +57,75 @@
@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {
.nav { .nav {
font-size: var(--font-size-large); font-size: var(--font-size-large);
justify-content: center; justify-content: space-between;
padding: 20px 0; margin: 20px 0;
}
.items {
flex-wrap: wrap;
} }
} }
@media only screen and (max-width: 576px) { @media only screen and (max-width: 768px) {
.header { .header {
padding: 0 15px; padding: 0 15px;
} }
.nav { .nav {
font-size: var(--font-size-normal); font-size: var(--font-size-normal);
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
position: relative;
}
.items {
display: flex;
justify-content: unset;
align-items: left;
font-size: var(--font-size-normal);
font-weight: 600;
}
.items > div {
display: none;
}
.header .active {
display: inherit;
width: 100%;
}
.items a {
width: 100%;
}
.burger {
display: block;
/* color: #4a4a4a; */
cursor: pointer;
height: 3.25rem;
width: 3.25rem;
margin-left: auto;
position: absolute;
right: 0;
top: 0;
}
.burger span {
transform: translateX(-50%);
padding: 1px 0px;
margin: 6px 0;
width: 20px;
display: block;
background-color: white;
}
.burger div {
height: 100%;
color: white;
text-align: center;
margin: auto;
font-size: 1.5rem;
transform: translateX(-50%);
} }
} }