From cbc01d81602c1a0b467751b08ce71f9a9a445cee Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Tue, 22 Mar 2022 18:26:06 -0500
Subject: [PATCH] Fix analytics tabs on mobile

---
 web/pages/analytics.tsx | 61 +++++++++++++++--------------------------
 1 file changed, 22 insertions(+), 39 deletions(-)

diff --git a/web/pages/analytics.tsx b/web/pages/analytics.tsx
index 6b2fd038..3201cd37 100644
--- a/web/pages/analytics.tsx
+++ b/web/pages/analytics.tsx
@@ -261,45 +261,28 @@ function Tabs(props: { tabs: Tab[]; defaultIndex: number }) {
 
   return (
     <div>
-      <div className="sm:hidden">
-        <label htmlFor="tabs" className="sr-only">
-          Select a tab
-        </label>
-        {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
-        <select
-          id="tabs"
-          name="tabs"
-          className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
-          defaultValue={activeTab.title}
-        >
-          {tabs.map((tab) => (
-            <option key={tab.title}>{tab.title}</option>
-          ))}
-        </select>
-      </div>
-      <div className="hidden sm:block">
-        <nav className="flex space-x-4" aria-label="Tabs">
-          {tabs.map((tab) => (
-            <a
-              key={tab.title}
-              href="#"
-              className={clsx(
-                tab.title === activeTab.title
-                  ? 'bg-gray-100 text-gray-700'
-                  : 'text-gray-500 hover:text-gray-700',
-                'rounded-md px-3 py-2 text-sm font-medium'
-              )}
-              aria-current={tab.title === activeTab.title ? 'page' : undefined}
-              onClick={(e) => {
-                e.preventDefault()
-                setActiveTab(tab)
-              }}
-            >
-              {tab.title}
-            </a>
-          ))}
-        </nav>
-      </div>
+      <nav className="flex space-x-4" aria-label="Tabs">
+        {tabs.map((tab) => (
+          <a
+            key={tab.title}
+            href="#"
+            className={clsx(
+              tab.title === activeTab.title
+                ? 'bg-gray-100 text-gray-700'
+                : 'text-gray-500 hover:text-gray-700',
+              'rounded-md px-3 py-2 text-sm font-medium'
+            )}
+            aria-current={tab.title === activeTab.title ? 'page' : undefined}
+            onClick={(e) => {
+              console.log('clicked')
+              e.preventDefault()
+              setActiveTab(tab)
+            }}
+          >
+            {tab.title}
+          </a>
+        ))}
+      </nav>
 
       <div className="mt-4">{activeTab.content}</div>
     </div>