From f834ff3db456cc4a9390058fb10e59027e56d6a1 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sat, 8 Jul 2023 12:07:37 -0700 Subject: [PATCH] New website nav menu. --- assets/expand.svg | 1 + assets/lightbulb.svg | 2 +- assets/overview.svg | 1 + assets/reports.svg | 1 + components/icons.ts | 6 +++++ components/messages.js | 1 + components/metrics/CountriesTable.js | 6 +++-- components/metrics/RegionsTable.js | 11 ++++++--- components/metrics/WebsiteHeader.js | 25 +++++++++++++++++++-- components/metrics/WebsiteHeader.module.css | 2 +- 10 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 assets/expand.svg create mode 100644 assets/overview.svg create mode 100644 assets/reports.svg diff --git a/assets/expand.svg b/assets/expand.svg new file mode 100644 index 00000000..43b9036f --- /dev/null +++ b/assets/expand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/lightbulb.svg b/assets/lightbulb.svg index c7895a7d..4ff96dcc 100644 --- a/assets/lightbulb.svg +++ b/assets/lightbulb.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/overview.svg b/assets/overview.svg new file mode 100644 index 00000000..4c96e23d --- /dev/null +++ b/assets/overview.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/reports.svg b/assets/reports.svg new file mode 100644 index 00000000..66dfc325 --- /dev/null +++ b/assets/reports.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/icons.ts b/components/icons.ts index f3040bbd..efd6914b 100644 --- a/components/icons.ts +++ b/components/icons.ts @@ -10,7 +10,10 @@ import Globe from 'assets/globe.svg'; import Lock from 'assets/lock.svg'; import Logo from 'assets/logo.svg'; import Moon from 'assets/moon.svg'; +import Nodes from 'assets/nodes.svg'; +import Overview from 'assets/overview.svg'; import Profile from 'assets/profile.svg'; +import Reports from 'assets/reports.svg'; import Sun from 'assets/sun.svg'; import User from 'assets/user.svg'; import Users from 'assets/users.svg'; @@ -29,7 +32,10 @@ const icons = { Lock, Logo, Moon, + Nodes, + Overview, Profile, + Reports, Sun, User, Users, diff --git a/components/messages.js b/components/messages.js index 7ddbdd2d..5d85d682 100644 --- a/components/messages.js +++ b/components/messages.js @@ -158,6 +158,7 @@ export const labels = defineMessages({ max: { id: 'labels.max', defaultMessage: 'Max' }, unique: { id: 'labels.unique', defaultMessage: 'Unique' }, value: { id: 'labels.value', defaultMessage: 'Value' }, + overview: { id: 'labels.overview', defaultMessage: 'Overview' }, }); export const messages = defineMessages({ diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js index 2d7b5ceb..c72d96ed 100644 --- a/components/metrics/CountriesTable.js +++ b/components/metrics/CountriesTable.js @@ -1,13 +1,15 @@ -import MetricsTable from './MetricsTable'; +import { useRouter } from 'next/router'; import FilterLink from 'components/common/FilterLink'; import useCountryNames from 'hooks/useCountryNames'; import useLocale from 'hooks/useLocale'; import useMessages from 'hooks/useMessages'; +import MetricsTable from './MetricsTable'; export function CountriesTable({ websiteId, ...props }) { const { locale } = useLocale(); const countryNames = useCountryNames(locale); const { formatMessage, labels } = useMessages(); + const { basePath } = useRouter(); function renderLink({ x: code }) { return ( @@ -17,7 +19,7 @@ export function CountriesTable({ websiteId, ...props }) { value={countryNames[code] && code} label={countryNames[code]} > - {code} + {code} ); } diff --git a/components/metrics/RegionsTable.js b/components/metrics/RegionsTable.js index c8e0b768..d7b614f7 100644 --- a/components/metrics/RegionsTable.js +++ b/components/metrics/RegionsTable.js @@ -1,15 +1,17 @@ -import MetricsTable from './MetricsTable'; -import { emptyFilter } from 'lib/filters'; +import { useRouter } from 'next/router'; import FilterLink from 'components/common/FilterLink'; +import { emptyFilter } from 'lib/filters'; import useLocale from 'hooks/useLocale'; import useMessages from 'hooks/useMessages'; import useCountryNames from 'hooks/useCountryNames'; +import MetricsTable from './MetricsTable'; import regions from 'public/iso-3166-2.json'; export function RegionsTable({ websiteId, ...props }) { const { locale } = useLocale(); const { formatMessage, labels } = useMessages(); const countryNames = useCountryNames(locale); + const { basePath } = useRouter(); const renderLabel = x => { return regions[x] ? `${regions[x]}, ${countryNames[x.split('-')[0]]}` : x; @@ -18,7 +20,10 @@ export function RegionsTable({ websiteId, ...props }) { const renderLink = ({ x: code }) => { return ( - {code} + {code} ); }; diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js index de21c0c7..9159a315 100644 --- a/components/metrics/WebsiteHeader.js +++ b/components/metrics/WebsiteHeader.js @@ -1,17 +1,38 @@ -import { Row, Column, Text } from 'react-basics'; +import { Flexbox, Row, Column, Text, Button, Icon } from 'react-basics'; import Favicon from 'components/common/Favicon'; import ActiveUsers from './ActiveUsers'; import styles from './WebsiteHeader.module.css'; +import { useMessages } from 'hooks'; +import Icons from 'components/icons'; export function WebsiteHeader({ websiteId, name, domain, children }) { + const { formatMessage, labels } = useMessages(); + + const links = [ + { label: formatMessage(labels.overview), icon: }, + { label: formatMessage(labels.realtime), icon: }, + { label: formatMessage(labels.reports), icon: }, + { label: formatMessage(labels.eventData), icon: }, + ]; + return ( {name} - + + + {links.map(({ label, icon }) => { + return ( + + ); + })} + {children} diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css index 68fd22f8..408da0ec 100644 --- a/components/metrics/WebsiteHeader.module.css +++ b/components/metrics/WebsiteHeader.module.css @@ -15,7 +15,7 @@ height: 100px; } -.info { +.actions { display: flex; flex-direction: row; align-items: center;