m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated mobile menu.

Browse Source
This commit is contained in:
Mike Cao 2021-06-07 21:25:45 -07:00
parent fdadaddab7
commit 6dd65803f9
4 changed files with 10 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/bars.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 6.0.0-alpha1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M424 392H24C11 392 0 403 0 416V416C0 429 11 440 24 440H424C437 440 448 429 448 416V416C448 403 437 392 424 392ZM424 72H24C11 72 0 83 0 96V96C0 109 11 120 24 120H424C437 120 448 109 448 96V96C448 83 437 72 424 72ZM424 232H24C11 232 0 243 0 256V256C0 269 11 280 24 280H424C437 280 448 269 448 256V256C448 243 437 232 424 232Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 546 B

1
assets/xmark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Pro 6.0.0-alpha1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M345 375C354 384 354 400 345 409S320 418 311 409L192 290L73 409C64 418 48 418 39 409S30 384 39 375L158 256L39 137C30 128 30 112 39 103S64 94 73 103L192 222L311 103C320 94 336 94 345 103S354 128 345 137L226 256L345 375Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 441 B

23
components/layout/Header.js
View File

@ -8,10 +8,13 @@ import LanguageButton from 'components/settings/LanguageButton';
import ThemeButton from 'components/settings/ThemeButton';
import UpdateNotice from 'components/common/UpdateNotice';
import UserButton from 'components/settings/UserButton';
import Button from 'components/common/Button';
import Logo from 'assets/logo.svg';
import styles from './Header.module.css';
import useLocale from 'hooks/useLocale';
import { rtlLocales } from 'lib/lang';
import XMark from 'assets/xmark.svg';
import Bars from 'assets/bars.svg';
export default function Header() {
const user = useSelector(state => state.user);
@ -33,23 +36,11 @@ export default function Header() {
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
</div>
</div>
<button
onClick={handleClick}
role="button"
<Button
className={styles.burger}
aria-label="menu"
aria-expanded="false"
>
{active ? (
<div> X </div>
) : (
<>
<span></span>
<span></span>
<span></span>
</>
)}
</button>
icon={active ? <XMark /> : <Bars />}
onClick={handleClick}
/>
{user && (
<div className={styles.items}>
<div className={active ? classNames(styles.active) : ''}>

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

@ -86,7 +86,6 @@
.items {
display: flex;
justify-content: unset;
align-items: left;
font-size: var(--font-size-normal);
font-weight: 600;
}
@ -106,34 +105,12 @@
.burger {
display: block;
/* color: #4a4a4a; */
background: none;
border: 1px solid var(--gray900);
border-radius: 4px;
cursor: pointer;
height: 3.25rem;
width: 3.25rem;
margin-left: auto;
position: absolute;
right: 0;
top: 0;
}
.burger span {
transform: translateX(25%);
padding: 1px 0px;
margin: 6px 0;
width: 65%;
display: block;
background-color: var(--gray900);
}
.burger div {
/* height: 100%; */
color: var(--gray900);
text-align: center;
margin: auto;
font-size: 1.5rem;
/* transform: translateX(-50%); */
right: 0;
}
}