Added SideNav component.

components/layout/NavBar.js

@@ -9,8 +9,10 @@ import ProfileButton from 'components/input/ProfileButton';
 import styles from './NavBar.module.css';
 import useConfig from 'hooks/useConfig';
 import useMessages from 'hooks/useMessages';
+import { useRouter } from 'next/router';
 
 export default function NavBar() {
+  const { pathname } = useRouter();
   const { cloudMode } = useConfig();
   const { formatMessage, labels } = useMessages();
   const [minimized, setMinimized] = useState(false);
@@ -34,8 +36,11 @@ export default function NavBar() {
       <div className={styles.links}>
         {links.map(({ url, icon, label }) => {
           return (
-            <Link key={url} href={url}>
+            <Link
-              <Icon>{icon}</Icon>
+              key={url}
+              href={url}
+              className={classNames({ [styles.selected]: pathname.startsWith(url) })}
+            >
               <Text>{label}</Text>
             </Link>
           );

components/layout/NavBar.module.css

@@ -5,7 +5,7 @@
   align-items: center;
   height: 60px;
   background: var(--base75);
-  border-bottom: 1px solid var(--base200);
+  border-bottom: 2px solid var(--base300);
   padding: 0 20px;
 }
 
@@ -23,7 +23,7 @@
 .links {
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  gap: 30px;
   padding: 0 40px;
   flex: 1;
   font-weight: 700;
@@ -33,11 +33,19 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  color: var(--font-color100);
+  line-height: 60px;
+  color: var(--font-color200);
+  border-bottom: 2px solid transparent;
 }
 
 .links a:hover {
-  color: var(--primary400);
+  color: var(--font-color100);
+  border-bottom: 2px solid var(--primary400);
+}
+
+.links .selected {
+  color: var(--font-color100);
+  border-bottom: 2px solid var(--primary400);
 }
 
 .actions {

components/layout/SettingsLayout.js

@@ -0,0 +1,26 @@
+import AppLayout from './AppLayout';
+import styles from './SettingsLayout.module.css';
+import useMessages from 'hooks/useMessages';
+import SideNav from './SideNav';
+
+export default function SettingsLayout({ children }) {
+  const { formatMessage, labels } = useMessages();
+
+  const items = [
+    { label: formatMessage(labels.websites), url: '/settings/websites' },
+    { label: formatMessage(labels.teams), url: '/settings/teams' },
+    { label: formatMessage(labels.users), url: '/settings/users' },
+    { label: formatMessage(labels.profile), url: '/settings/profile' },
+  ];
+
+  return (
+    <AppLayout>
+      <div className={styles.container}>
+        <div className={styles.menu}>
+          <SideNav items={items} />
+        </div>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </AppLayout>
+  );
+}

components/layout/SettingsLayout.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  grid-template-rows: 1fr;
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  padding: 40px 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+}

components/layout/SideNav.js

@@ -0,0 +1,17 @@
+import { Menu, Item } from 'react-basics';
+import Link from 'next/link';
+import styles from './SideNav.module.css';
+
+export default function SideNav({ selectedKey, items, shallow }) {
+  return (
+    <Menu items={items} selectedKey={selectedKey} className={styles.menu}>
+      {({ key, label, url }) => (
+        <Item key={key} className={styles.item}>
+          <Link href={url} shallow={shallow}>
+            {label}
+          </Link>
+        </Item>
+      )}
+    </Menu>
+  );
+}

components/layout/SideNav.module.css

@@ -0,0 +1,14 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.item a {
+  color: var(--font-color100);
+  flex: 1;
+  padding: var(--size300) var(--size600);
+}
+
+.item {
+  padding: 0;
+}

components/metrics/PagesTable.js

@@ -38,7 +38,6 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
         type="url"
         metric={formatMessage(labels.views)}
         websiteId={websiteId}
-        dataFilter={filters[filter]}
         renderLabel={renderLink}
         {...props}
       />

components/pages/realtime/RealtimeHeader.module.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 20px;
 }
 
 .metrics {

components/pages/settings/websites/WebsiteAddForm.js

@@ -12,7 +12,7 @@ import { DOMAIN_REGEX } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
 export default function WebsiteAddForm({ onSave, onClose }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
 
@@ -37,7 +37,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
           name="domain"
           rules={{
             required: formatMessage(labels.required),
-            pattern: { value: DOMAIN_REGEX, message: formatMessage(labels.invalidDomain) },
+            pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
           }}
         >
           <TextField autoComplete="off" />

components/pages/websites/WebsiteMenuView.js

@@ -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}>
+        <SideNav items={items} selectedKey={view} shallow={true} />
-          {({ key, label }) => (
-            <Item key={key} className={styles.item}>
-              <Link href={resolveUrl({ view: key })} shallow={true}>
-                {label}
-              </Link>
-            </Item>
-          )}
-        </Menu>
       </GridColumn>
       <GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.data}>
         <DetailsComponent

components/pages/websites/WebsiteMenuView.module.css

@@ -1,17 +1,3 @@
-.menu {
-  gap: 20px;
-}
-
-.item a {
-  color: var(--font-color100);
-  flex: 1;
-  padding: var(--size300) var(--size600);
-}
-
-.item {
-  padding: 0;
-}
-
 .data {
   min-height: 600px;
 }

pages/settings/websites/index.js

@@ -1,4 +1,4 @@
-import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
 import WebsitesList from 'components/pages/settings/websites/WebsitesList';
 
 export default function WebsitesPage({ disabled }) {
@@ -7,9 +7,9 @@ export default function WebsitesPage({ disabled }) {
   }
 
   return (
-    <AppLayout>
+    <SettingsLayout>
       <WebsitesList />
-    </AppLayout>
+    </SettingsLayout>
   );
 }
 

queries/analytics/event/getEvents.ts

@@ -31,7 +31,7 @@ function clickhouseQuery(websiteId: string, startAt: Date) {
       session_id as sessionId,
       created_at as createdAt,
       toUnixTimestamp(created_at) as timestamp,
-      url,
+      url_path,
       event_name as eventName
     from event
     where event_type = ${EVENT_TYPE.customEvent}

queries/analytics/pageview/getPageviews.ts

@@ -30,7 +30,7 @@ async function clickhouseQuery(websiteId: string, startAt: Date) {
         session_id as sessionId,
         created_at as createdAt,
         toUnixTimestamp(created_at) as timestamp,
-        url
+        url_path
       from event
       where event_type = ${EVENT_TYPE.pageView}
         and website_id = {websiteId:UUID}