Hide comparison / charting buttons in sidebar if the other feature is…

… currently active
nasa-gibs · Jul 25, 2023 · 67bf854 · 67bf854
1 parent e0b1e1e
commit 67bf854
Showing 1 changed file with 19 additions and 15 deletions.
diff --git a/web/js/containers/sidebar/footer-content.js b/web/js/containers/sidebar/footer-content.js
@@ -61,9 +61,20 @@ const FooterContent = React.forwardRef((props, ref) => {
   };
 
   const renderLayersFooter = () => (
-    <>
-      <div className="product-buttons">
-        <div className="compare-chart-container">
+    <div className="product-buttons">
+      <CompareModeOptions
+        isActive={isCompareActive}
+        isMobile={isMobile}
+        selected={compareMode}
+        onclick={changeCompareMode}
+      />
+      <ChartingModeOptions
+        isChartingActive={isChartingActive}
+        isMobile={isMobile}
+      />
+      <div className="compare-chart-container">
+        {!isCompareActive
+          && (
           <Button
             id="chart-toggle-button"
             aria-label={chartBtnText}
@@ -72,6 +83,9 @@ const FooterContent = React.forwardRef((props, ref) => {
             onClick={!isCompareActive && chartingModeAccessible ? onClickToggleCharting : null}
             text={chartBtnText}
           />
+          )}
+        {!isChartingActive
+          && (
           <Button
             id="compare-toggle-button"
             aria-label={compareBtnText}
@@ -80,19 +94,9 @@ const FooterContent = React.forwardRef((props, ref) => {
             onClick={!isChartingActive ? onClickToggleCompare : null}
             text={compareBtnText}
           />
-        </div>
+          )}
       </div>
-      <CompareModeOptions
-        isActive={isCompareActive}
-        isMobile={isMobile}
-        selected={compareMode}
-        onclick={changeCompareMode}
-      />
-      <ChartingModeOptions
-        isChartingActive={isChartingActive}
-        isMobile={isMobile}
-      />
-    </>
+    </div>
   );
 
   const renderEventsFooter = () => {