Add tree selection dropdown and update path on selection

* Import `Select` component and add `selectedTree` state variable in `App.jsx` * Add `Select` component next to the info icon to display tree options * Update `useEffect` hook to update the path when a tree is selected and trigger a page refresh * Hide the menu on mobile in `Basic.jsx`
theosanderson · Nov 7, 2024 · 4739965 · 4739965
1 parent d259271
commit 4739965
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/taxonium_website/src/App.jsx b/taxonium_website/src/App.jsx
@@ -139,12 +139,10 @@ function App() {
 
   useEffect(() => {
     if (selectedTree) {
-      const newQuery = treeConfig[selectedTree];
-      if (newQuery) {
-        updateQuery(newQuery);
-      }
+      const newPath = `/${selectedTree}${window.location.search}`;
+      window.location.href = newPath; // Trigger a page refresh on selection change
     }
-  }, [selectedTree, updateQuery]);
+  }, [selectedTree]);
 
   return (
     <>
@@ -214,18 +212,20 @@ function App() {
             )}
           </h1>
           <div className="flex items-center">
-            <Select
-              value={selectedTree}
-              onChange={(e) => setSelectedTree(e.target.value)}
-              className="mr-4"
-            >
-              <option value="">Select a tree</option>
-              {Object.entries(treeConfig).map(([path, config]) => (
-                <option key={path} value={path}>
-                  {config.title}
-                </option>
-              ))}
-            </Select>
+            {window.screen.width >= 600 && ( // Hide the menu on mobile
+              <Select
+                value={selectedTree}
+                onChange={(e) => setSelectedTree(e.target.value)}
+                className="mr-4"
+              >
+                <option value="">Select a tree</option>
+                {Object.entries(treeConfig).map(([path, config]) => (
+                  <option key={path} value={path}>
+                    {config.title}
+                  </option>
+                ))}
+              </Select>
+            )}
             <button
               onClick={() => setAboutEnabled(true)}
               className="text-white font-bold hover:underline flex items-center"

diff --git a/taxonium_website/src/components/Basic.jsx b/taxonium_website/src/components/Basic.jsx
@@ -49,7 +49,8 @@ export const Select = ({ onChange, className, children, value, title }) => {
       className={classNames(
         "border bg-white text-gray-900 text-sm hover:text-gray-700 py-1 pl-2 pr-6",
         "focus:ring-gray-800 focus:border-gray-800",
-        className
+        className,
+        { "hidden md:block": window.screen.width < 600 } // Hide the menu on mobile
       )}
       onChange={onChange}
       value={value}