mobile header

This commit is contained in:
Meir Roth 2021-01-03 13:32:25 +02:00
parent 1bb46f1d42
commit 7974d311c8
2 changed files with 7 additions and 9 deletions

View File

@ -18,13 +18,13 @@ export default function Header() {
<header className="container"> <header 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-12 col-md-12 col-lg-3"> <div className="col-6 col-lg-3 order-1 order-lg-1">
<div className={styles.title}> <div className={styles.title}>
<Icon icon={<Logo />} size="large" className={styles.logo} /> <Icon icon={<Logo />} size="large" className={styles.logo} />
<Link href={user ? '/' : 'https://umami.is'}>umami</Link> <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
</div> </div>
</div> </div>
<div className="col-12 col-md-12 col-lg-6"> <div className="col-12 col-lg-6 order-3 order-lg-2">
{user && ( {user && (
<div className={styles.nav}> <div className={styles.nav}>
<Link href="/dashboard"> <Link href="/dashboard">
@ -39,7 +39,7 @@ export default function Header() {
</div> </div>
)} )}
</div> </div>
<div className="col-12 col-md-12 col-lg-3"> <div className="col-6 col-lg-3 order-2 order-lg-3">
<div className={styles.buttons}> <div className={styles.buttons}>
<ThemeButton /> <ThemeButton />
<LanguageButton menuAlign="right" /> <LanguageButton menuAlign="right" />

View File

@ -33,17 +33,15 @@
} }
@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {
.title {
justify-content: center;
}
.nav { .nav {
font-size: var(--font-size-large); font-size: var(--font-size-large);
justify-content: center; justify-content: center;
padding: 20px 0; padding: 20px 0;
} }
}
.buttons { @media only screen and (max-width: 576px) {
justify-content: center; .header {
padding: 0 15px;
} }
} }