Add new mobile hamburger menu for mobile

This commit is contained in:
gabehab 2021-02-15 20:14:09 -08:00
parent 7ed014440b
commit f741a60867
3 changed files with 14642 additions and 25 deletions

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux';
import classNames from 'classnames';
@ -10,23 +10,44 @@ import UpdateNotice from 'components/common/UpdateNotice';
import UserButton from 'components/settings/UserButton';
import Logo from 'assets/logo.svg';
import styles from './Header.module.css';
import Sun from 'assets/sun.svg';
import Moon from 'assets/moon.svg';
export default function Header() {
const user = useSelector(state => state.user);
const [active, setActive] = useState(false);
function handleClick() {
setActive(state => !state);
}
return (
<header className="container">
<nav className="container">
{user?.is_admin && <UpdateNotice />}
<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="">
<div className={styles.title}>
<Icon icon={<Logo />} size="large" className={styles.logo} />
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
</div>
</div>
<div className="col-12 col-lg-6 order-3 order-lg-2">
<button
onClick={handleClick}
role="button"
className={styles.burger}
aria-label="menu"
aria-expanded="false"
>
{active ? (
<Icon icon={<Sun />} size="large" className={styles.logo} />
) : (
<Icon icon={<Moon />} size="large" className={styles.logo} />
)}
</button>
{user && (
<div className={styles.nav}>
<div className={styles.items}>
<div className={active ? classNames(styles.active) : ''}>
<Link href="/dashboard">
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
</Link>
@ -37,9 +58,10 @@ export default function Header() {
<FormattedMessage id="label.settings" defaultMessage="Settings" />
</Link>
</div>
)}
</div>
<div className="col-6 col-lg-3 order-2 order-lg-3">
)}
<div className={styles.items}>
<div className={active ? classNames(styles.active) : ''}>
<div className={styles.buttons}>
<ThemeButton />
<LanguageButton menuAlign="right" />
@ -47,6 +69,8 @@ export default function Header() {
</div>
</div>
</div>
</header>
</div>
</div>
</nav>
);
}

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 {
display: flex;
min-height: 100px;
width: 100%;
}
.title {
@ -15,6 +28,15 @@
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-normal);
font-weight: 600;
width: 100%;
}
.items {
display: flex;
justify-content: center;
align-items: center;
@ -44,7 +66,40 @@
.header {
padding: 0 15px;
}
.nav {
font-size: var(--font-size-normal);
flex-wrap: wrap;
}
.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;
position: relative;
width: 3.25rem;
margin-left: auto;
}
}

14538
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff