Layout updates.

src/app/(app)/settings/layout.tsx

@@ -2,7 +2,7 @@
 import { usePathname } from 'next/navigation';
 import useUser from 'components/hooks/useUser';
 import useMessages from 'components/hooks/useMessages';
-import SideNav from './SideNav';
+import SideNav from 'components/layout/SideNav';
 import styles from './layout.module.css';
 
 export default function SettingsLayout({ children }) {

src/app/(app)/websites/[id]/WebsiteChart.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import PageviewsChart from 'components/metrics/PageviewsChart';
-import { useApi, useDateRange, useTimezone, usePageQuery } from 'components/hooks';
+import { useApi, useDateRange, useTimezone, useNavigation } from 'components/hooks';
 import { getDateArray } from 'lib/date';
 
 export function WebsiteChart({ websiteId }) {
@@ -9,7 +9,7 @@ export function WebsiteChart({ websiteId }) {
   const [timezone] = useTimezone();
   const {
     query: { url, referrer, os, browser, device, country, region, city, title },
-  } = usePageQuery();
+  } = useNavigation();
   const { get, useQuery } = useApi();
 
   const { data, isLoading } = useQuery(

src/app/(app)/websites/[id]/WebsiteDetails.js

@@ -3,7 +3,7 @@ import { Loading } from 'react-basics';
 import { usePathname } from 'next/navigation';
 import Page from 'components/layout/Page';
 import FilterTags from 'components/metrics/FilterTags';
-import usePageQuery from 'components/hooks/usePageQuery';
+import useNavigation from 'components/hooks/useNavigation';
 import { useWebsite } from 'components/hooks';
 import WebsiteChart from './WebsiteChart';
 import WebsiteMenuView from './WebsiteMenuView';
@@ -18,7 +18,7 @@ export default function WebsiteDetails({ websiteId }) {
 
   const {
     query: { view, url, referrer, os, browser, device, country, region, city, title },
-  } = usePageQuery();
+  } = useNavigation();
 
   if (isLoading || error) {
     return <Page isLoading={isLoading} error={error} />;

src/app/(app)/websites/[id]/WebsiteMenuView.js

@@ -1,6 +1,4 @@
-import { Icon, Button, Flexbox, Text } from 'react-basics';
+import { Text } from 'react-basics';
-import Link from 'next/link';
-import { GridRow, GridColumn } from 'components/layout/Grid';
 import BrowsersTable from 'components/metrics/BrowsersTable';
 import CountriesTable from 'components/metrics/CountriesTable';
 import RegionsTable from 'components/metrics/RegionsTable';
@@ -13,12 +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 Icons from 'components/icons';
+import SideNav from 'components/layout/SideNav';
-import SideNav from '../../settings/SideNav';
+import useNavigation from 'components/hooks/useNavigation';
-import usePageQuery from 'components/hooks/usePageQuery';
 import useMessages from 'components/hooks/useMessages';
 import styles from './WebsiteMenuView.module.css';
-import useLocale from 'components/hooks/useLocale';
+import LinkButton from 'components/common/LinkButton';
 
 const views = {
   url: PagesTable,
@@ -38,93 +35,86 @@ const views = {
 
 export default function WebsiteMenuView({ websiteId, websiteDomain }) {
   const { formatMessage, labels } = useMessages();
-  const { dir } = useLocale();
   const {
-    resolveUrl,
+    makeUrl,
+    pathname,
     query: { view },
-  } = usePageQuery();
+  } = useNavigation();
 
   const items = [
     {
       key: 'url',
       label: formatMessage(labels.pages),
-      url: resolveUrl({ view: 'url' }),
+      url: makeUrl({ view: 'url' }),
     },
     {
       key: 'referrer',
       label: formatMessage(labels.referrers),
-      url: resolveUrl({ view: 'referrer' }),
+      url: makeUrl({ view: 'referrer' }),
     },
     {
       key: 'browser',
       label: formatMessage(labels.browsers),
-      url: resolveUrl({ view: 'browser' }),
+      url: makeUrl({ view: 'browser' }),
     },
     {
       key: 'os',
       label: formatMessage(labels.os),
-      url: resolveUrl({ view: 'os' }),
+      url: makeUrl({ view: 'os' }),
     },
     {
       key: 'device',
       label: formatMessage(labels.devices),
-      url: resolveUrl({ view: 'device' }),
+      url: makeUrl({ view: 'device' }),
     },
     {
       key: 'country',
       label: formatMessage(labels.countries),
-      url: resolveUrl({ view: 'country' }),
+      url: makeUrl({ view: 'country' }),
     },
     {
       key: 'region',
       label: formatMessage(labels.regions),
-      url: resolveUrl({ view: 'region' }),
+      url: makeUrl({ view: 'region' }),
     },
     {
       key: 'city',
       label: formatMessage(labels.cities),
-      url: resolveUrl({ view: 'city' }),
+      url: makeUrl({ view: 'city' }),
     },
     {
       key: 'language',
       label: formatMessage(labels.languages),
-      url: resolveUrl({ view: 'language' }),
+      url: makeUrl({ view: 'language' }),
     },
     {
       key: 'screen',
       label: formatMessage(labels.screens),
-      url: resolveUrl({ view: 'screen' }),
+      url: makeUrl({ view: 'screen' }),
     },
     {
       key: 'event',
       label: formatMessage(labels.events),
-      url: resolveUrl({ view: 'event' }),
+      url: makeUrl({ view: 'event' }),
     },
     {
       key: 'query',
       label: formatMessage(labels.queryParameters),
-      url: resolveUrl({ view: 'query' }),
+      url: makeUrl({ view: 'query' }),
     },
   ];
 
   const DetailsComponent = views[view] || (() => null);
 
   return (
-    <GridRow>
+    <div className={styles.layout}>
-      <GridColumn xs={12} sm={12} md={12} defaultSize={3} className={styles.menu}>
+      <div className={styles.menu}>
-        <Link href={resolveUrl({ view: undefined })}>
+        <LinkButton href={pathname} className={styles.back}>
-          <Flexbox justifyContent="center">
-            <Button variant="quiet">
-              <Icon rotate={dir === 'rtl' ? 0 : 180}>
-                <Icons.ArrowRight />
-              </Icon>
           <Text>{formatMessage(labels.back)}</Text>
-            </Button>
+        </LinkButton>
-          </Flexbox>
-        </Link>
         <SideNav items={items} selectedKey={view} shallow={true} />
-      </GridColumn>
+      </div>
-      <GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.content}>
+      <div className={styles.content}>
         <DetailsComponent
           websiteId={websiteId}
           websiteDomain={websiteDomain}
@@ -133,7 +123,7 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
           showFilters={true}
           virtualize={true}
         />
-      </GridColumn>
+      </div>
-    </GridRow>
+    </div>
   );
 }

src/app/(app)/websites/[id]/WebsiteMenuView.module.css

@@ -1,7 +1,25 @@
+.layout {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  border-top: 1px solid var(--base300);
+}
+
 .menu {
+  display: flex;
+  flex-direction: column;
   position: relative;
+  padding: 20px 20px 20px 0;
+}
+
+.back {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  margin-bottom: 20px;
 }
 
 .content {
   min-height: 800px;
+  padding: 20px 0 20px 20px;
+  border-left: 1px solid var(--base300);
 }

src/app/(app)/websites/[id]/WebsiteMetricsBar.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useApi, useDateRange, useMessages, usePageQuery, useSticky } from 'components/hooks';
+import { useApi, useDateRange, useMessages, useNavigation, useSticky } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
@@ -17,10 +17,10 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
   const { startDate, endDate, modified } = dateRange;
   const { ref, isSticky } = useSticky({ enabled: sticky });
   const {
-    resolveUrl,
+    makeUrl,
     router,
     query: { url, referrer, title, os, browser, device, country, region, city },
-  } = usePageQuery();
+  } = useNavigation();
 
   const { data, error, isLoading, isFetched } = useQuery(
     [
@@ -64,7 +64,7 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
   };
 
   const handleAddFilter = ({ name, value }) => {
-    router.push(resolveUrl({ [name]: value }));
+    router.push(makeUrl({ [name]: value }));
   };
 
   const WebsiteFilterButton = () => {

src/app/(app)/websites/[id]/event-data/EventDataTable.js

@@ -1,12 +1,12 @@
 import Link from 'next/link';
 import { GridTable, GridColumn } from 'react-basics';
-import { useMessages, usePageQuery } from 'components/hooks';
+import { useMessages, useNavigation } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import { DATA_TYPES } from 'lib/constants';
 
 export function EventDataTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
-  const { resolveUrl } = usePageQuery();
+  const { makeUrl } = useNavigation();
 
   if (data.length === 0) {
     return <Empty />;
@@ -16,7 +16,7 @@ export function EventDataTable({ data = [] }) {
     <GridTable data={data}>
       <GridColumn name="eventName" label={formatMessage(labels.event)}>
         {row => (
-          <Link href={resolveUrl({ event: row.eventName })} shallow={true}>
+          <Link href={makeUrl({ event: row.eventName })} shallow={true}>
             {row.eventName}
           </Link>
         )}

src/app/(app)/websites/[id]/event-data/EventDataValueTable.js

@@ -1,5 +1,5 @@
 import { GridTable, GridColumn, Button, Icon, Text } from 'react-basics';
-import { useMessages, usePageQuery } from 'components/hooks';
+import { useMessages, useNavigation } from 'components/hooks';
 import Link from 'next/link';
 import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
@@ -8,12 +8,12 @@ import { DATA_TYPES } from 'lib/constants';
 
 export function EventDataValueTable({ data = [], event }) {
   const { formatMessage, labels } = useMessages();
-  const { resolveUrl } = usePageQuery();
+  const { makeUrl } = useNavigation();
 
   const Title = () => {
     return (
       <>
-        <Link href={resolveUrl({ event: undefined })}>
+        <Link href={makeUrl({ event: undefined })}>
           <Button>
             <Icon rotate={180}>
               <Icons.ArrowRight />

src/app/(app)/websites/[id]/event-data/WebsiteEventData.js

@@ -3,7 +3,7 @@ import { Flexbox, Loading } from 'react-basics';
 import EventDataTable from './EventDataTable';
 import EventDataValueTable from './EventDataValueTable';
 import { EventDataMetricsBar } from './EventDataMetricsBar';
-import { useDateRange, useApi, usePageQuery } from 'components/hooks';
+import { useDateRange, useApi, useNavigation } from 'components/hooks';
 import styles from './WebsiteEventData.module.css';
 
 function useData(websiteId, event) {
@@ -28,7 +28,7 @@ function useData(websiteId, event) {
 export default function WebsiteEventData({ websiteId }) {
   const {
     query: { event },
-  } = usePageQuery();
+  } = useNavigation();
   const { data, isLoading } = useData(websiteId, event);
 
   return (

src/components/common/FilterLink.js

@@ -2,13 +2,13 @@ import { Icon, Icons } from 'react-basics';
 import classNames from 'classnames';
 import Link from 'next/link';
 import { safeDecodeURI } from 'next-basics';
-import usePageQuery from 'components/hooks/usePageQuery';
+import useNavigation from 'components/hooks/useNavigation';
 import useMessages from 'components/hooks/useMessages';
 import styles from './FilterLink.module.css';
 
 export function FilterLink({ id, value, label, externalUrl, children, className }) {
   const { formatMessage, labels } = useMessages();
-  const { resolveUrl, query } = usePageQuery();
+  const { makeUrl, query } = useNavigation();
   const active = query[id] !== undefined;
   const selected = query[id] === value;
 
@@ -22,7 +22,7 @@ export function FilterLink({ id, value, label, externalUrl, children, className
       {children}
       {!value && `(${label || formatMessage(labels.unknown)})`}
       {value && (
-        <Link href={resolveUrl({ [id]: value })} className={styles.label} replace>
+        <Link href={makeUrl({ [id]: value })} className={styles.label} replace>
           {safeDecodeURI(label || value)}
         </Link>
       )}

src/components/common/LinkButton.js

@@ -1,11 +1,15 @@
+import classNames from 'classnames';
 import Link from 'next/link';
 import { Icon, Icons, Text } from 'react-basics';
 import styles from './LinkButton.module.css';
+import { useLocale } from 'components/hooks';
+
+export function LinkButton({ href, icon, className, children }) {
+  const { dir } = useLocale();
 
-export function LinkButton({ href, icon, children }) {
   return (
-    <Link className={styles.button} href={href}>
+    <Link className={classNames(styles.button, className)} href={href}>
-      <Icon>{icon || <Icons.ArrowRight />}</Icon>
+      <Icon rotate={dir === 'rtl' ? 0 : 180}>{icon || <Icons.ArrowRight />}</Icon>
       <Text>{children}</Text>
     </Link>
   );

src/components/hooks/index.js

@@ -10,7 +10,7 @@ export * from './useFormat';
 export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';
-export * from './usePageQuery';
+export * from './useNavigation';
 export * from './useReport';
 export * from './useReports';
 export * from './useRequireLogin';

src/components/hooks/useNavigation.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildUrl } from 'next-basics';
 
-export function usePageQuery() {
+export function useNavigation() {
   const router = useRouter();
   const pathname = usePathname();
   const params = useSearchParams();
@@ -17,11 +17,11 @@ export function usePageQuery() {
     return obj;
   }, [params]);
 
-  function resolveUrl(params, reset) {
+  function makeUrl(params, reset) {
-    return buildUrl(pathname, { ...(reset ? {} : query) });
+    return reset ? pathname : buildUrl(pathname, { ...query, ...params });
   }
 
-  return { pathname, query, resolveUrl, router };
+  return { pathname, query, router, makeUrl };
 }
 
-export default usePageQuery;
+export default useNavigation;

src/components/layout/Grid.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import styles from './Grid.module.css';
 import { mapChildren } from 'react-basics';
+import styles from './Grid.module.css';
 
 export function Grid({ className, ...otherProps }) {
   return <div {...otherProps} className={classNames(styles.grid, className)} />;

src/components/layout/Page.module.css

@@ -5,6 +5,7 @@
   background: var(--base50);
   position: relative;
   max-width: 1320px;
+  min-height: calc(100vh - 60px);
   margin: 0 auto;
   padding: 0 20px;
 }

src/components/metrics/EventsChart.js

@@ -3,7 +3,7 @@ import { Loading } from 'react-basics';
 import { colord } from 'colord';
 import BarChart from './BarChart';
 import { getDateArray } from 'lib/date';
-import { useApi, useLocale, useDateRange, useTimezone, usePageQuery } from 'components/hooks';
+import { useApi, useLocale, useDateRange, useTimezone, useNavigation } from 'components/hooks';
 import { EVENT_COLORS } from 'lib/constants';
 import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
 
@@ -14,7 +14,7 @@ export function EventsChart({ websiteId, className, token }) {
   const [timezone] = useTimezone();
   const {
     query: { url, event },
-  } = usePageQuery();
+  } = useNavigation();
 
   const { data, isLoading } = useQuery(['events', websiteId, modified, event], () =>
     get(`/websites/${websiteId}/events`, {

src/components/metrics/FilterTags.js

@@ -1,6 +1,6 @@
 import { safeDecodeURI } from 'next-basics';
 import { Button, Icon, Icons, Text } from 'react-basics';
-import usePageQuery from 'components/hooks/usePageQuery';
+import useNavigation from 'components/hooks/useNavigation';
 import useMessages from 'components/hooks/useMessages';
 import styles from './FilterTags.module.css';
 
@@ -8,9 +8,9 @@ export function FilterTags({ params }) {
   const { formatMessage, labels } = useMessages();
   const {
     router,
-    resolveUrl,
+    makeUrl,
     query: { view },
-  } = usePageQuery();
+  } = useNavigation();
 
   if (Object.keys(params).filter(key => params[key]).length === 0) {
     return null;
@@ -18,9 +18,9 @@ export function FilterTags({ params }) {
 
   function handleCloseFilter(param) {
     if (!param) {
-      router.push(resolveUrl({ view }, true));
+      router.push(makeUrl({ view }, true));
     } else {
-      router.push(resolveUrl({ [param]: undefined }));
+      router.push(makeUrl({ [param]: undefined }));
     }
   }
 

src/components/metrics/MetricsTable.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import useApi from 'components/hooks/useApi';
 import { percentFilter } from 'lib/filters';
 import useDateRange from 'components/hooks/useDateRange';
-import usePageQuery from 'components/hooks/usePageQuery';
+import useNavigation from 'components/hooks/useNavigation';
 import ErrorMessage from 'components/common/ErrorMessage';
 import ListTable from './ListTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
@@ -28,9 +28,9 @@ export function MetricsTable({
 }) {
   const [{ startDate, endDate, modified }] = useDateRange(websiteId);
   const {
-    resolveUrl,
+    makeUrl,
     query: { url, referrer, title, os, browser, device, country, region, city },
-  } = usePageQuery();
+  } = useNavigation();
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const { dir } = useLocale();
@@ -103,7 +103,7 @@ export function MetricsTable({
       {data && !error && <ListTable {...props} data={filteredData} className={className} />}
       <div className={styles.footer}>
         {data && !error && limit && (
-          <Link href={resolveUrl({ view: type })}>
+          <Link href={makeUrl({ view: type })}>
             <Button variant="quiet">
               <Text>{formatMessage(labels.more)}</Text>
               <Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>

src/components/metrics/PagesTable.js

@@ -2,19 +2,19 @@ import FilterLink from 'components/common/FilterLink';
 import FilterButtons from 'components/common/FilterButtons';
 import MetricsTable from './MetricsTable';
 import useMessages from 'components/hooks/useMessages';
-import usePageQuery from 'components/hooks/usePageQuery';
+import useNavigation from 'components/hooks/useNavigation';
 import { emptyFilter } from 'lib/filters';
 
 export function PagesTable({ websiteId, showFilters, ...props }) {
   const {
     router,
-    resolveUrl,
+    makeUrl,
     query: { view = 'url' },
-  } = usePageQuery();
+  } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
   const handleSelect = key => {
-    router.push(resolveUrl({ view: key }), null, { shallow: true });
+    router.push(makeUrl({ view: key }), { scroll: true });
   };
 
   const buttons = [

src/index.ts

@@ -76,7 +76,7 @@ export * from 'components/hooks/useFormat';
 export * from 'components/hooks/useLanguageNames';
 export * from 'components/hooks/useLocale';
 export * from 'components/hooks/useMessages';
-export * from 'components/hooks/usePageQuery';
+export * from 'components/hooks/useNavigation';
 export * from 'components/hooks/useReport';
 export * from 'components/hooks/useReports';
 export * from 'components/hooks/useRequireLogin';

src/styles/index.css

@@ -52,8 +52,6 @@ main {
 
 svg {
   shape-rendering: geometricPrecision;
-  width: 10px;
-  height: 10px;
 }
 
 #__next {