m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-30 13:41: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 { useRouter } from 'next/router';
import Favicon from 'components/common/Favicon'; import Favicon from 'components/common/Favicon';
import ActiveUsers from 'components/metrics/ActiveUsers'; import ActiveUsers from 'components/metrics/ActiveUsers';
import styles from './WebsiteHeader.module.css';
import Icons from 'components/icons'; import Icons from 'components/icons';
import { useMessages, useWebsite } from 'hooks'; import { useMessages, useWebsite } from 'hooks';
import styles from './WebsiteHeader.module.css';
export function WebsiteHeader({ websiteId, showLinks = true, children }) { export function WebsiteHeader({ websiteId, showLinks = true, children }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
@ -46,7 +46,7 @@ export function WebsiteHeader({ websiteId, showLinks = true, children }) {
</Column> </Column>
<Column className={styles.actions} variant="two"> <Column className={styles.actions} variant="two">
{showLinks && ( {showLinks && (
<Flexbox alignItems="center"> <div className={styles.links}>
{links.map(({ label, icon, path }) => { {links.map(({ label, icon, path }) => {
const selected = path ? pathname.endsWith(path) : pathname === '/websites/[id]'; const selected = path ? pathname.endsWith(path) : pathname === '/websites/[id]';
@ -58,13 +58,13 @@ export function WebsiteHeader({ websiteId, showLinks = true, children }) {
[styles.selected]: selected, [styles.selected]: selected,
})} })}
> >
<Icon>{icon}</Icon> <Icon className={styles.icon}>{icon}</Icon>
<Text>{label}</Text> <Text className={styles.label}>{label}</Text>
</Button> </Button>
</Link> </Link>
); );
})} })}
</Flexbox> </div>
)} )}
{children} {children}
</Column> </Column>

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

@ -27,3 +27,29 @@
.selected { .selected {
font-weight: bold; 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;
}
}