From a43422d81fbe916a62ed6113eebd71a1281722e3 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 16 Oct 2023 21:55:59 -0700
Subject: [PATCH] Updated menu view for mobile.

---
 .../(main)/websites/[id]/WebsiteMenuView.js   | 23 +++++++++--
 .../websites/[id]/WebsiteMenuView.module.css  | 38 +++++++++++++++++++
 src/components/layout/SideNav.js              |  8 +++-
 src/components/metrics/ListTable.js           |  2 +-
 src/components/metrics/ListTable.module.css   |  4 ++
 5 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/src/app/(main)/websites/[id]/WebsiteMenuView.js b/src/app/(main)/websites/[id]/WebsiteMenuView.js
index 370d2f77..00b218f4 100644
--- a/src/app/(main)/websites/[id]/WebsiteMenuView.js
+++ b/src/app/(main)/websites/[id]/WebsiteMenuView.js
@@ -1,4 +1,4 @@
-import { Icons, Icon, Text } from 'react-basics';
+import { Icons, Icon, Text, Dropdown, Item } from 'react-basics';
 import BrowsersTable from 'components/metrics/BrowsersTable';
 import CountriesTable from 'components/metrics/CountriesTable';
 import RegionsTable from 'components/metrics/RegionsTable';
@@ -14,8 +14,8 @@ import EventsTable from 'components/metrics/EventsTable';
 import SideNav from 'components/layout/SideNav';
 import useNavigation from 'components/hooks/useNavigation';
 import useMessages from 'components/hooks/useMessages';
-import styles from './WebsiteMenuView.module.css';
 import LinkButton from 'components/common/LinkButton';
+import styles from './WebsiteMenuView.module.css';
 
 const views = {
   url: PagesTable,
@@ -36,6 +36,7 @@ const views = {
 export default function WebsiteMenuView({ websiteId, websiteDomain }) {
   const { formatMessage, labels } = useMessages();
   const {
+    router,
     makeUrl,
     pathname,
     query: { view },
@@ -106,6 +107,12 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
 
   const DetailsComponent = views[view] || (() => null);
 
+  const handleChange = view => {
+    router.push(makeUrl({ view }));
+  };
+
+  const renderValue = value => items.find(({ key }) => key === value)?.label;
+
   return (
     <div className={styles.layout}>
       <div className={styles.menu}>
@@ -115,7 +122,17 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
           </Icon>
           <Text>{formatMessage(labels.back)}</Text>
         </LinkButton>
-        <SideNav items={items} selectedKey={view} shallow={true} />
+        <SideNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
+        <Dropdown
+          className={styles.dropdown}
+          items={items}
+          value={view}
+          renderValue={renderValue}
+          onChange={handleChange}
+          alignment="end"
+        >
+          {({ key, label }) => <Item key={key}>{label}</Item>}
+        </Dropdown>
       </div>
       <div className={styles.content}>
         <DetailsComponent
diff --git a/src/app/(main)/websites/[id]/WebsiteMenuView.module.css b/src/app/(main)/websites/[id]/WebsiteMenuView.module.css
index 5710ac73..b3dcb8d0 100644
--- a/src/app/(main)/websites/[id]/WebsiteMenuView.module.css
+++ b/src/app/(main)/websites/[id]/WebsiteMenuView.module.css
@@ -23,3 +23,41 @@
   padding: 20px 0 20px 20px;
   border-left: 1px solid var(--base300);
 }
+
+.dropdown {
+  display: none;
+}
+
+@media screen and (max-width: 992px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  .content {
+    border: 0;
+  }
+
+  .back {
+    align-self: start;
+    margin: 0;
+  }
+
+  .nav {
+    display: none;
+  }
+
+  .dropdown {
+    display: flex;
+    width: 200px;
+    align-self: end;
+  }
+
+  .menu {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 0;
+  }
+}
diff --git a/src/components/layout/SideNav.js b/src/components/layout/SideNav.js
index 1f1ab14f..c93881e4 100644
--- a/src/components/layout/SideNav.js
+++ b/src/components/layout/SideNav.js
@@ -9,11 +9,17 @@ export function SideNav({
   items,
   shallow = true,
   scroll = false,
+  className,
   onSelect = () => {},
 }) {
   const pathname = usePathname();
   return (
-    <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
+    <Menu
+      items={items}
+      selectedKey={selectedKey}
+      className={classNames(styles.menu, className)}
+      onSelect={onSelect}
+    >
       {({ key, label, url }) => (
         <Item
           key={key}
diff --git a/src/components/metrics/ListTable.js b/src/components/metrics/ListTable.js
index 1b988450..356c4bc4 100644
--- a/src/components/metrics/ListTable.js
+++ b/src/components/metrics/ListTable.js
@@ -47,7 +47,7 @@ export function ListTable({
         <div className={styles.metric}>{metric}</div>
       </div>
       <div className={styles.body}>
-        {data?.length === 0 && <Empty />}
+        {data?.length === 0 && <Empty className={styles.empty} />}
         {virtualize && data.length > 0 ? (
           <FixedSizeList
             height={itemCount * ITEM_SIZE}
diff --git a/src/components/metrics/ListTable.module.css b/src/components/metrics/ListTable.module.css
index 9d840235..8f263531 100644
--- a/src/components/metrics/ListTable.module.css
+++ b/src/components/metrics/ListTable.module.css
@@ -91,6 +91,10 @@
   z-index: -1;
 }
 
+.empty {
+  min-height: 200px;
+}
+
 @media only screen and (max-width: 992px) {
   .body {
     height: auto;