Update mobile navigation

src/components/MobileNav.component.jsx

@@ -5,6 +5,20 @@ import { NavLink as Link, withRouter } from 'react-router-dom'
 import '../css/MobileNav.styles.css'
 
 class MobileNav extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isToggleOn: false
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.setState(state => ({
+      isToggleOn: !state.isToggleOn
+    }));
+  }
+
   render() {
     const location = {
       '/': 'Home',
@@ -14,12 +28,14 @@ class MobileNav extends Component {
       '/settings': 'Settings'
     }
 
-    const { podcast = 'Loading...', theme } = this.props
-    const { pathname } = this.props.location
+    const { podcast = 'Loading...', theme } = this.props;
+    const { pathname } = this.props.location;
 
     const formattedPodcastName =
       podcast.length > 15 ? podcast.substring(0, 15) + '...' : podcast
 
+    const { isToggleOn } = this.state;
+
     return (
       <Fragment>
         <nav className={`MobileNav-top ${theme}`}>
@@ -47,9 +63,36 @@ class MobileNav extends Component {
           <Link to='/nowplaying' activeClassName='active-nav-item'>
             <i className='fas fa-headphones-alt MobileNav-icon' />
           </Link>
-          <Link to='/townhall' activeClassName='active-nav-item'>
-            <i className='fas fa-users MobileNav-icon' />
-          </Link>
+          <div onClick={this.handleClick}>
+            {isToggleOn ? 
+            (
+              <div>
+                <i className='fas fa-users MobileNav-icon' />
+                <div style={{ position: 'fixed', right: '20px', bottom: '60px', background: '#d6d6d6', zIndex: '10', width: '200px', height: '90px', 
+                  borderRadius: '10px', fontSize: '15px', textAlign: 'center',
+                }}>
+                  <Link to='/townhall' activeClassName='active-nav-item'>
+                    <div style={{ margin: '10px', background: 'white', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    borderRadius: '5px' }}>
+                      Townhall Meetings
+                    </div>
+                  </Link>
+                  <Link to='/core-dev' activeClassName='active-nav-item'>
+                    <div style={{ margin: '10px', background: 'white', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    borderRadius: '5px' }}>
+                      Core Dev Meetings
+                    </div>
+                  </Link>
+                </div>
+              </div>
+            )
+            :
+            (
+              <i className='fas fa-users MobileNav-icon' />
+            )
+            }
+          </div>
+
           <Link to='/settings' activeClassName='active-nav-item'>
             <i className='fas fa-cog MobileNav-icon' />
           </Link>

src/components/Sidebar.component.jsx

@@ -52,7 +52,7 @@ class Sidebar extends Component {
             <li className='sidebar-link'>
               <Link to='/core-dev' activeClassName='sidebar-active' exact>
                 <i className='fas fa-phone' style={{ marginRight: '30px' }}/>
-                <h4>Core Meetings</h4>
+                <h4>Core Dev Meetings</h4>
               </Link>
             </li>
             <li className='sidebar-link'>