mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-23 17:56:24 +02:00
Updated menu view for mobile.
This commit is contained in:
parent
a8f429c9ee
commit
a43422d81f
|
@ -1,4 +1,4 @@
|
|||
import { Icons, Icon, Text } from 'react-basics';
|
||||
import { Icons, Icon, Text, Dropdown, Item } from 'react-basics';
|
||||
import BrowsersTable from 'components/metrics/BrowsersTable';
|
||||
import CountriesTable from 'components/metrics/CountriesTable';
|
||||
import RegionsTable from 'components/metrics/RegionsTable';
|
||||
|
@ -14,8 +14,8 @@ import EventsTable from 'components/metrics/EventsTable';
|
|||
import SideNav from 'components/layout/SideNav';
|
||||
import useNavigation from 'components/hooks/useNavigation';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import styles from './WebsiteMenuView.module.css';
|
||||
import LinkButton from 'components/common/LinkButton';
|
||||
import styles from './WebsiteMenuView.module.css';
|
||||
|
||||
const views = {
|
||||
url: PagesTable,
|
||||
|
@ -36,6 +36,7 @@ const views = {
|
|||
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const {
|
||||
router,
|
||||
makeUrl,
|
||||
pathname,
|
||||
query: { view },
|
||||
|
@ -106,6 +107,12 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
|||
|
||||
const DetailsComponent = views[view] || (() => null);
|
||||
|
||||
const handleChange = view => {
|
||||
router.push(makeUrl({ view }));
|
||||
};
|
||||
|
||||
const renderValue = value => items.find(({ key }) => key === value)?.label;
|
||||
|
||||
return (
|
||||
<div className={styles.layout}>
|
||||
<div className={styles.menu}>
|
||||
|
@ -115,7 +122,17 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
|||
</Icon>
|
||||
<Text>{formatMessage(labels.back)}</Text>
|
||||
</LinkButton>
|
||||
<SideNav items={items} selectedKey={view} shallow={true} />
|
||||
<SideNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
|
||||
<Dropdown
|
||||
className={styles.dropdown}
|
||||
items={items}
|
||||
value={view}
|
||||
renderValue={renderValue}
|
||||
onChange={handleChange}
|
||||
alignment="end"
|
||||
>
|
||||
{({ key, label }) => <Item key={key}>{label}</Item>}
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<DetailsComponent
|
||||
|
|
|
@ -23,3 +23,41 @@
|
|||
padding: 20px 0 20px 20px;
|
||||
border-left: 1px solid var(--base300);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.back {
|
||||
align-self: start;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: flex;
|
||||
width: 200px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,11 +9,17 @@ export function SideNav({
|
|||
items,
|
||||
shallow = true,
|
||||
scroll = false,
|
||||
className,
|
||||
onSelect = () => {},
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
|
||||
<Menu
|
||||
items={items}
|
||||
selectedKey={selectedKey}
|
||||
className={classNames(styles.menu, className)}
|
||||
onSelect={onSelect}
|
||||
>
|
||||
{({ key, label, url }) => (
|
||||
<Item
|
||||
key={key}
|
||||
|
|
|
@ -47,7 +47,7 @@ export function ListTable({
|
|||
<div className={styles.metric}>{metric}</div>
|
||||
</div>
|
||||
<div className={styles.body}>
|
||||
{data?.length === 0 && <Empty />}
|
||||
{data?.length === 0 && <Empty className={styles.empty} />}
|
||||
{virtualize && data.length > 0 ? (
|
||||
<FixedSizeList
|
||||
height={itemCount * ITEM_SIZE}
|
||||
|
|
|
@ -91,6 +91,10 @@
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
.empty {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.body {
|
||||
height: auto;
|
||||
|
|
Loading…
Reference in New Issue
Block a user