m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-28 08:47:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix website nav menu for mobile. Fixes #2141.

Browse Source
This commit is contained in:
Mike Cao 2023-07-27 15:08:33 -07:00
parent f35d0f65dc
commit 69c0fa0db9
2 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/pages/websites/WebsiteHeader.js
View File

@ -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>

26
components/pages/websites/WebsiteHeader.module.css
View File

@ -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;
}
}