use scss in navbar instead of react-responsive

src/components/navigation/www/navigation.jsx

@@ -19,9 +19,6 @@ var Modal = require('../../modal/modal.jsx');
 var NavigationBox = require('../container/navigation.jsx');
 var Registration = require('../../registration/registration.jsx');
 
-var MediaQuery = require('react-responsive');
-var frameless = require('../../../lib/frameless');
-
 require('./navigation.scss');
 
 Modal.setAppElement(document.getElementById('view'));
@@ -196,33 +193,33 @@ var Navigation = React.createClass({
                 <ul>
                     <li className="logo"><a href="/" aria-label="Scratch"></a></li>
 
-                    <MediaQuery minWidth={frameless.mobile} component="li" className="link create">
+                    <li className="link create">
                         <a href={createLink}>
                             <FormattedMessage id="general.create" />
                         </a>
-                    </MediaQuery>
-                    <MediaQuery minWidth={frameless.desktop} component="li" className="link explore">
+                    </li>
+                    <li className="link explore">
                         <a href="/explore/projects/all">
                             <FormattedMessage id="general.explore" />
                         </a>
-                    </MediaQuery>
-                    <MediaQuery minWidth={frameless.tablet} component="li" className="link discuss">
+                    </li>
+                    <li className="link discuss">
                         <a href="/discuss">
                             <FormattedMessage id="general.discuss" />
                         </a>
-                    </MediaQuery>
+                    </li>
                     <li className="link about">
                         <a href="/about">
                             <FormattedMessage id="general.about" />
                         </a>
                     </li>
-                    <MediaQuery minWidth={frameless.mobile} component="li" className="link help">
+                    <li className="link help">
                         <a href="/help">
                             <FormattedMessage id="general.help" />
                         </a>
-                    </MediaQuery>
+                    </li>
 
-                    <MediaQuery minWidth={frameless.desktop} component="li" className="search">
+                    <li className="search">
                         <Form onSubmit={this.onSearchSubmit}>
                             <Button type="submit" className="btn-search" />
                             <Input type="text"
@@ -230,7 +227,7 @@ var Navigation = React.createClass({
                                    placeholder={formatMessage({id: 'general.search'})}
                                    name="q" />
                         </Form>
-                    </MediaQuery>
+                    </li>
                     {this.props.session.status === sessionActions.Status.FETCHED ? (
                         this.props.session.session.user ? [
                             <li className="link right messages" key="messages">
@@ -242,22 +239,21 @@ var Navigation = React.createClass({
                                     <FormattedMessage id="general.messages" />
                                 </a>
                             </li>,
-                            <MediaQuery minWidth={frameless.desktop}
-                                        component="li" className="link right mystuff" key="mystuff">
+                            <li className="link right mystuff" key="mystuff">
                                 <a
                                     href="/mystuff/"
                                     title={formatMessage({id: 'general.myStuff'})}>
 
                                     <FormattedMessage id="general.myStuff" />
                                 </a>
-                            </MediaQuery>,
+                            </li>,
                             <li className="link right account-nav" key="account-nav">
                                 <a className={dropdownClasses}
                                     href="#" onClick={this.handleAccountNavClick}>
                                     <Avatar src={this.props.session.session.user.thumbnailUrl} alt="" />
-                                    <MediaQuery minWidth={frameless.tablet} component='span'>
+                                    <span className='profile-name'>
                                         {this.props.session.session.user.username}
-                                    </MediaQuery>
+                                    </span>
                                 </a>
                                 <Dropdown
                                         as="ul"

src/components/navigation/www/navigation.scss

@@ -251,6 +251,16 @@
                 }
             }
         }
+
+        .create,
+        .discuss,
+        .explore,
+        .search,
+        .help,
+        .mystuff,
+        .profile-name {
+            display: none;
+        }
     }
 }
 
@@ -279,6 +289,15 @@
                 }
             }
         }
+
+        .discuss,
+        .explore,
+        .search,
+        .mystuff,
+        .profile-name {
+            display: none;
+        }
+
     }
 }
 
@@ -293,5 +312,11 @@
                 margin-left: 0;
             }
         }
+
+        .explore,
+        .search,
+        .mystuff {
+            display: none;
+        }
     }
 }