Updated SearchLayout to have Explore + others tabs on mobile

• Updated:
- SearchNavigationBarXS
- SearchLayout to have Explore + others tabs on mobile

app/javascript/gabsocial/components/navigation_bar/search_navigation_bar_xs.js

@@ -4,14 +4,28 @@ import Heading from '../heading'
 import Search from '../search'
 import Pills from '../pills'
 import Button from '../button'
+import Text from '../text'
 
 class SearchNavigationBar extends React.PureComponent {
 
+  onClickSearch = (e) => {
+    e.preventDefault()
+    const { isSearchFocused } = this.props
+    if (!isSearchFocused) {
+      this.props.onToggleSearchExplore(true)
+    }
+  }
+
+  onResetSearchFocus = () => {
+    this.props.onToggleSearchExplore(false)
+  }
+
   render() {
     const {
       children,
       tabs,
       value,
+      isSearchFocused,
     } = this.props
 
     const to = '/home'
@@ -20,21 +34,43 @@ class SearchNavigationBar extends React.PureComponent {
       <div className={[_s.d, _s.z4, _s.minH103PX, _s.w100PC].join(' ')}>
         <div className={[_s.d, _s.minH103PX, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
 
-          <div className={[_s.d, _s.h53PX, _s.flexRow, _s.bgNavigation, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.h53PX, _s.bgNavigation, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
 
-            <Button
-              noClasses
-              color='primary'
-              backgroundColor='none'
-              className={[_s.d, _s.noUnderline, _s.aiCenter, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.jcCenter, _s.pl10, _s.pr10, _s.minH53PX].join(' ')}
-              to={to}
-              icon='angle-left'
-              iconSize='18px'
-              iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
-            />
-        
-            <div className={[_s.d, _s.minH53PX, _s.jcCenter, _s.flexGrow1, _s.mr15].join(' ')}>
-              <Search isInNav />
+            <div className={[_s.d, _s.h53PX, _s.flexRow, _s.w100PC, _s.px10, _s.aiCenter, _s.jcCenter].join(' ')}>
+              {
+                !isSearchFocused &&
+                <Button
+                  noClasses
+                  color='primary'
+                  backgroundColor='none'
+                  className={[_s.d, _s.noUnderline, _s.aiCenter, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.jcCenter, _s.pr10, _s.minH53PX].join(' ')}
+                  to={to}
+                  icon='angle-left'
+                  iconSize='18px'
+                  iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
+                />
+              }
+          
+              <div
+                className={[_s.d, _s.minH53PX, _s.jcCenter, _s.flexGrow1].join(' ')}
+                onClick={this.onClickSearch}
+              >
+                <Search isInNav />
+              </div>
+              
+              {
+                isSearchFocused &&
+                <Button
+                  isText
+                  backgroundColor='none'
+                  onClick={this.onResetSearchFocus}
+                  className={[_s.mr5, _s.ml10, _s.fillNavigationBrand].join(' ')}
+                >
+                  <Text color='inherit' weight='medium' size='medium'>
+                    Cancel
+                  </Text>
+                </Button>
+              }
             </div>
 
           </div>
@@ -53,6 +89,8 @@ class SearchNavigationBar extends React.PureComponent {
 SearchNavigationBar.propTypes = {
   tabs: PropTypes.array,
   value: PropTypes.string,
+  onToggleSearchExplore: PropTypes.func,
+  isSearchFocused: PropTypes.bool.isRequired,
 }
 
 export default SearchNavigationBar

app/javascript/gabsocial/layouts/search_layout.js

@@ -11,8 +11,6 @@ import Layout from '../layouts/layout'
 import PageTitle from '../features/ui/util/page_title'
 import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
 import FooterBar from '../components/footer_bar'
-import ProfileHeader from '../components/profile_header'
-import FloatingActionButton from '../components/floating_action_button'
 import SearchNavigationBar from '../components/navigation_bar/search_navigation_bar_xs'
 import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar'
 import Responsive from '../features/ui/util/responsive_component'
@@ -24,13 +22,35 @@ import {
   TrendsPanel,
   SearchFilterPanel,
   SignUpPanel,
+  ExploreTimeline,
+  HashtagTimeline,
+  SidebarXS,
 } from '../features/ui/util/async_components'
 
 class SearchLayout extends React.PureComponent {
 
+  state = {
+    isSearchFocused: false,
+    currentExploreTabIndex: 0,
+  }
+
   componentWillMount() {
     const { intl } = this.props
 
+    this.exploreTabs = [
+      {
+        title: 'Explore',
+        onClick: () => this.setState({ currentExploreTabIndex: 0 }),
+        component: ExploreTimeline,
+      },
+      {
+        title: '#Election2020',
+        onClick: () => this.setState({ currentExploreTabIndex: 1 }),
+        component: HashtagTimeline,
+        componentParams: { params: { id: 'election2020' } },
+      },
+    ]
+    
     this.searchTabs = [
       {
         title: intl.formatMessage(messages.top),
@@ -60,17 +80,30 @@ class SearchLayout extends React.PureComponent {
     ]
   }
 
+  handleOnToggleSearchExplore = (isSearchFocused) => {
+    this.setState({ isSearchFocused })
+  }
+
   render() {
     const {
       intl,
       children,
       value,
     } = this.props
+    const {
+      isSearchFocused,
+      currentExploreTabIndex,
+     } = this.state
 
-    const mainContentClasses = CX({
-      d: 1,
-      w100PC: 1,
-      z1: 1,
+
+    const activeExploreTab = this.exploreTabs[currentExploreTabIndex];
+    const activeTabComponent = activeExploreTab.component
+    const activeTabComponentParams = activeExploreTab.componentParams || {}
+    const activeExploreTabs = this.exploreTabs.map((tab, i) => {
+      return {
+        ...tab,
+        active: i === currentExploreTabIndex,
+      }
     })
 
     const title = intl.formatMessage(messages.search)
@@ -79,16 +112,23 @@ class SearchLayout extends React.PureComponent {
     return (
       <React.Fragment>
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+
+          <WrappedBundle component={SidebarXS} />
+
           {
             !!me &&
-            <SearchNavigationBar tabs={this.searchTabs} value={value} />
+            <SearchNavigationBar
+              isSearchFocused={isSearchFocused}
+              tabs={isSearchFocused ? this.searchTabs : activeExploreTabs}
+              onToggleSearchExplore={this.handleOnToggleSearchExplore}
+            />
           }
           {
             !me &&
             <LoggedOutNavigationBar />
           }
 
-          <main role='main' className={mainContentClasses}>
+          <main role='main' className={[_s.d, _s.w100PC, _s.z1].join(' ')}>
 
             {
               !me &&
@@ -97,7 +137,20 @@ class SearchLayout extends React.PureComponent {
               </div>
             }
 
-            {children} 
+            {
+              !!isSearchFocused &&
+              children
+            }
+
+            {
+              !isSearchFocused &&
+              <div className={[_s.d, _s.pt10, _s.w100PC].join(' ')}>
+                <WrappedBundle
+                  component={activeTabComponent}
+                  componentParams={activeTabComponentParams}
+                />
+              </div>
+            }
           </main>
 
           <FooterBar />