watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 12:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Update header components. Update theme button.

Browse source
This commit is contained in:
Mike Cao 2020-09-20 02:54:38 -07:00
parent aa265d1d42
commit 823fdcbeae
11 changed files with 112 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

39
components/layout/Header.js
View file

@ -16,32 +16,29 @@ export default function Header() {
return (
<header className="container">
<div className={classNames(styles.header, 'row align-items-center')}>
<div className="col-12 col-md-3">
<div className="col-12 col-md-12 col-lg-3">
<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-md-9">
<div className={styles.nav}>
{user ? (
<>
<Link href="/dashboard">
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
</Link>
<Link href="/settings">
<FormattedMessage id="label.settings" defaultMessage="Settings" />
</Link>
<LanguageButton menuAlign="right" />
<ThemeButton />
<UserButton />
</>
) : (
<>
<LanguageButton menuAlign="right" />
<ThemeButton />
</>
)}
<div className="col-12 col-md-12 col-lg-6">
{user && (
<div className={styles.nav}>
<Link href="/dashboard">
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
</Link>
<Link href="/settings">
<FormattedMessage id="label.settings" defaultMessage="Settings" />
</Link>
</div>
)}
</div>
<div className="col-12 col-md-12 col-lg-3">
<div className={styles.buttons}>
<LanguageButton menuAlign="right" />
<ThemeButton />
{user && <UserButton />}
</div>
</div>
</div>

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

@ -13,18 +13,37 @@
.nav {
display: flex;
justify-content: flex-end;
justify-content: center;
align-items: center;
font-size: var(--font-size-normal);
font-weight: 600;
}
.nav > * {
margin-left: 40px;
margin-left: 30px;
}
@media only screen and (max-width: 768px) {
.nav > *:first-child {
margin: 0;
}
.buttons {
display: flex;
justify-content: flex-end;
}
@media only screen and (max-width: 992px) {
.title {
text-align: center;
}
.nav {
font-size: var(--font-size-large);
justify-content: center;
padding: 20px 0;
}
.buttons {
justify-content: center;
}
}