Make recommendation tabs fit in XS screen

adsabs · Mar 17, 2021 · 76b76b1 · 76b76b1
1 parent 3310946
commit 76b76b1
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/src/js/react/Recommender/components/App.jsx.js b/src/js/react/Recommender/components/App.jsx.js
@@ -37,6 +37,7 @@ define([
     return (
       <div>
         <Nav
+          className="hidden-xs"
           bsStyle="tabs"
           justified
           activeKey={tab}
@@ -49,6 +50,19 @@ define([
             Search examples
           </NavItem>
         </Nav>
+        <Nav
+          className="hidden-sm hidden-md hidden-lg"
+          bsStyle="tabs"
+          activeKey={tab}
+          onSelect={(key) => onSelected(key)}
+        >
+          <NavItem eventKey={1} href="javascript:void(0);">
+            Recommendations
+          </NavItem>
+          <NavItem eventKey={2} href="javascript:void(0);">
+            Search examples
+          </NavItem>
+        </Nav>
         <div style={{ minHeight: 200, padding: '1rem 0' }}>
           {tab === 1 ? <RecommendedList /> : <SearchExamples />}
         </div>