Added SideNav component.

This commit is contained in:
Mike Cao 2023-03-23 11:46:49 -07:00
parent 1666e5e3af
commit c2789d70bc
14 changed files with 115 additions and 39 deletions

View file

@ -11,10 +11,11 @@ import QueryParametersTable from 'components/metrics/QueryParametersTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
import ScreenTable from 'components/metrics/ScreenTable';
import EventsTable from 'components/metrics/EventsTable';
import usePageQuery from 'hooks/usePageQuery';
import Icons from 'components/icons';
import styles from './WebsiteMenuView.module.css';
import SideNav from 'components/layout/SideNav';
import usePageQuery from 'hooks/usePageQuery';
import useMessages from 'hooks/useMessages';
import styles from './WebsiteMenuView.module.css';
const views = {
url: PagesTable,
@ -40,42 +41,52 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
{
key: 'url',
label: formatMessage(labels.pages),
url: resolveUrl({ view: 'url' }),
},
{
key: 'referrer',
label: formatMessage(labels.referrers),
url: resolveUrl({ view: 'referrer' }),
},
{
key: 'browser',
label: formatMessage(labels.browsers),
url: resolveUrl({ view: 'browser' }),
},
{
key: 'os',
label: formatMessage(labels.os),
url: resolveUrl({ view: 'os' }),
},
{
key: 'device',
label: formatMessage(labels.devices),
url: resolveUrl({ view: 'device' }),
},
{
key: 'country',
label: formatMessage(labels.countries),
url: resolveUrl({ view: 'country' }),
},
{
key: 'language',
label: formatMessage(labels.languages),
url: resolveUrl({ view: 'language' }),
},
{
key: 'screen',
label: formatMessage(labels.screens),
url: resolveUrl({ view: 'screen' }),
},
{
key: 'event',
label: formatMessage(labels.events),
url: resolveUrl({ view: 'event' }),
},
{
key: 'query',
label: formatMessage(labels.query),
url: resolveUrl({ view: 'query' }),
},
];
@ -94,15 +105,7 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
</Button>
</Flexbox>
</Link>
<Menu items={items} selectedKey={view}>
{({ key, label }) => (
<Item key={key} className={styles.item}>
<Link href={resolveUrl({ view: key })} shallow={true}>
{label}
</Link>
</Item>
)}
</Menu>
<SideNav items={items} selectedKey={view} shallow={true} />
</GridColumn>
<GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.data}>
<DetailsComponent