New website nav menu.

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]}
       >
-        <img src={`/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
+        <img src={`${basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
       </FilterLink>
     );
   }