mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-28 00:37:51 +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 BrowsersTable from 'components/metrics/BrowsersTable';
|
||||||
import CountriesTable from 'components/metrics/CountriesTable';
|
import CountriesTable from 'components/metrics/CountriesTable';
|
||||||
import RegionsTable from 'components/metrics/RegionsTable';
|
import RegionsTable from 'components/metrics/RegionsTable';
|
||||||
|
@ -14,8 +14,8 @@ import EventsTable from 'components/metrics/EventsTable';
|
||||||
import SideNav from 'components/layout/SideNav';
|
import SideNav from 'components/layout/SideNav';
|
||||||
import useNavigation from 'components/hooks/useNavigation';
|
import useNavigation from 'components/hooks/useNavigation';
|
||||||
import useMessages from 'components/hooks/useMessages';
|
import useMessages from 'components/hooks/useMessages';
|
||||||
import styles from './WebsiteMenuView.module.css';
|
|
||||||
import LinkButton from 'components/common/LinkButton';
|
import LinkButton from 'components/common/LinkButton';
|
||||||
|
import styles from './WebsiteMenuView.module.css';
|
||||||
|
|
||||||
const views = {
|
const views = {
|
||||||
url: PagesTable,
|
url: PagesTable,
|
||||||
|
@ -36,6 +36,7 @@ const views = {
|
||||||
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const {
|
const {
|
||||||
|
router,
|
||||||
makeUrl,
|
makeUrl,
|
||||||
pathname,
|
pathname,
|
||||||
query: { view },
|
query: { view },
|
||||||
|
@ -106,6 +107,12 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
||||||
|
|
||||||
const DetailsComponent = views[view] || (() => null);
|
const DetailsComponent = views[view] || (() => null);
|
||||||
|
|
||||||
|
const handleChange = view => {
|
||||||
|
router.push(makeUrl({ view }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderValue = value => items.find(({ key }) => key === value)?.label;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.layout}>
|
<div className={styles.layout}>
|
||||||
<div className={styles.menu}>
|
<div className={styles.menu}>
|
||||||
|
@ -115,7 +122,17 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
||||||
</Icon>
|
</Icon>
|
||||||
<Text>{formatMessage(labels.back)}</Text>
|
<Text>{formatMessage(labels.back)}</Text>
|
||||||
</LinkButton>
|
</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>
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
<DetailsComponent
|
<DetailsComponent
|
||||||
|
|
|
@ -23,3 +23,41 @@
|
||||||
padding: 20px 0 20px 20px;
|
padding: 20px 0 20px 20px;
|
||||||
border-left: 1px solid var(--base300);
|
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,
|
items,
|
||||||
shallow = true,
|
shallow = true,
|
||||||
scroll = false,
|
scroll = false,
|
||||||
|
className,
|
||||||
onSelect = () => {},
|
onSelect = () => {},
|
||||||
}) {
|
}) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
return (
|
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 }) => (
|
{({ key, label, url }) => (
|
||||||
<Item
|
<Item
|
||||||
key={key}
|
key={key}
|
||||||
|
|
|
@ -47,7 +47,7 @@ export function ListTable({
|
||||||
<div className={styles.metric}>{metric}</div>
|
<div className={styles.metric}>{metric}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.body}>
|
<div className={styles.body}>
|
||||||
{data?.length === 0 && <Empty />}
|
{data?.length === 0 && <Empty className={styles.empty} />}
|
||||||
{virtualize && data.length > 0 ? (
|
{virtualize && data.length > 0 ? (
|
||||||
<FixedSizeList
|
<FixedSizeList
|
||||||
height={itemCount * ITEM_SIZE}
|
height={itemCount * ITEM_SIZE}
|
||||||
|
|
|
@ -91,6 +91,10 @@
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 992px) {
|
@media only screen and (max-width: 992px) {
|
||||||
.body {
|
.body {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user