mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-30 13:41:50 +02:00
Fix website nav menu for mobile. Fixes #2141.
This commit is contained in:
parent
f35d0f65dc
commit
69c0fa0db9
|
@ -4,9 +4,9 @@ import Link from 'next/link';
|
|||
import { useRouter } from 'next/router';
|
||||
import Favicon from 'components/common/Favicon';
|
||||
import ActiveUsers from 'components/metrics/ActiveUsers';
|
||||
import styles from './WebsiteHeader.module.css';
|
||||
import Icons from 'components/icons';
|
||||
import { useMessages, useWebsite } from 'hooks';
|
||||
import styles from './WebsiteHeader.module.css';
|
||||
|
||||
export function WebsiteHeader({ websiteId, showLinks = true, children }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
@ -46,7 +46,7 @@ export function WebsiteHeader({ websiteId, showLinks = true, children }) {
|
|||
</Column>
|
||||
<Column className={styles.actions} variant="two">
|
||||
{showLinks && (
|
||||
<Flexbox alignItems="center">
|
||||
<div className={styles.links}>
|
||||
{links.map(({ label, icon, path }) => {
|
||||
const selected = path ? pathname.endsWith(path) : pathname === '/websites/[id]';
|
||||
|
||||
|
@ -58,13 +58,13 @@ export function WebsiteHeader({ websiteId, showLinks = true, children }) {
|
|||
[styles.selected]: selected,
|
||||
})}
|
||||
>
|
||||
<Icon>{icon}</Icon>
|
||||
<Text>{label}</Text>
|
||||
<Icon className={styles.icon}>{icon}</Icon>
|
||||
<Text className={styles.label}>{label}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Flexbox>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</Column>
|
||||
|
|
|
@ -27,3 +27,29 @@
|
|||
.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.links {
|
||||
justify-content: space-evenly;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid var(--base300);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.icon svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user