feat: mobile support for navbar

decentraland · Jun 26, 2018 · 477d422 · 477d422
1 parent ae8f1be
commit 477d422
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -67,3 +67,16 @@
   color: var(--text-on-primary);
   background: var(--primary);
 }
+
+.dcl.hamburger {
+  cursor: pointer;
+}
+
+.dcl.active-page {
+  color: var(--text);
+  display: inline-block;
+  text-transform: uppercase;
+  padding-left: 0.5em;
+  transform: translateY(4px);
+  cursor: pointer;
+}
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Icon, Menu, Responsive, Sidebar } from 'semantic-ui-react'
+import { Header, Icon, Menu, Responsive, Sidebar } from 'semantic-ui-react'
 import { Blockie, Logo, Mana } from '../..'
 import './Navbar.css'
 
@@ -119,7 +119,7 @@ export class Navbar extends React.PureComponent<Props, State> {
             onClick={this.handleToggle}
           >
             <Icon name="content" size="large" className="dcl hamburger" />
-            {activePage}
+            <Header className="dcl active-page">{activePage}</Header>
           </Responsive>
           <Responsive {...Responsive.onlyMobile}>
             <Sidebar