import React from 'react'
import injectSheet from 'react-jss'
import { Link } from 'react-router-dom'

import { Phone, Desktop } from '../components/breakpoints'
import Spacer from '../components/spacer'
import LogoBetaBlack from '../components/icons/icon-components/logo-beta-black'
import HamburgerMenu from '../components/icons/icon-components/hamburger-menu'

const LogoAndNavigation = ({ classes }) => (
	<div>
		<Phone>
			<div className={classes.headerPhone}>
				<div className={classes.logoPhone}>
					<Link to="/mini-app">
						<LogoBetaBlack height={25} width={160} />
					</Link>
					<Link to="/menu" className={classes.hamburgerMenuPhone}>
						<HamburgerMenu />
					</Link>
				</div>
			</div>
		</Phone>

		<Desktop>
			<div className={classes.headerDesktop}>
				<div className={classes.logoDesktop}>
					<Link to="/mini-app">
						<LogoBetaBlack height={33} width={208} />
					</Link>
					<div className={classes.linksDesktop}>
						<Link to="/about" className={classes.navigationLinkDesktop}>
							About
						</Link>
						<Spacer width="32px" />
						<Link to="/feedback" className={classes.navigationLinkDesktop}>
							Feedback
						</Link>
					</div>
				</div>
			</div>
		</Desktop>
	</div>
)

const styles = {
	logoPhone: {
		height: '55px',
		padding: '0 5% 0 5%',
		'background-color': '#FFFFFF',
		'min-width': '90vw',
		display: 'flex',
		'align-items': 'center',
		'justify-content': 'space-between',
		'border-bottom': '1px solid #3D65F9',
		position: 'fixed',
		top: '0vh',
	},
	logoDesktop: {
		height: '100px',
		padding: '0px 134px 0px 42px',
		'background-color': '#FFFFFF',
		'min-width': '90vw',
		display: 'flex',
		'align-items': 'center',
		'justify-content': 'space-between',
		position: 'fixed',
		top: '0vh',
		'border-bottom': '4px solid #3D65F9',
	},
	hamburgerMenuPhone: {
		cursor: 'pointer',
	},
	linksDesktop: {
		display: 'flex',
	},
	navigationLinkDesktop: {
		'font-family': 'hah-regular',
		'font-size': '18px',
		color: '#000000',
		'text-decoration': 'none',
		cursor: 'pointer',
	},
}

export default injectSheet(styles)(LogoAndNavigation)

@@ -1257,24 +1257,59 @@
 ogoPhone: %7B%0A
+%09%09position: 'fixed',%0A%09%09top: '0vh',%0A
 %09%09height: '5
@@ -1342,64 +1342,8 @@
 %25',%0A
-%09%09'background-color': '#FFFFFF',%0A%09%09'min-width': '90vw',%0A
 %09%09di
@@ -1422,16 +1422,72 @@
 tween',%0A
+%09%09'background-color': '#FFFFFF',%0A%09%09'min-width': '90vw',%0A
 %09%09'borde
@@ -1518,16 +1518,36 @@
 D65F9',%0A
+%09%7D,%0A%09logoDesktop: %7B%0A
 %09%09positi
@@ -1573,36 +1573,16 @@
  '0vh',%0A
-%09%7D,%0A%09logoDesktop: %7B%0A
 %09%09height
@@ -1629,64 +1629,8 @@
 x',%0A
-%09%09'background-color': '#FFFFFF',%0A%09%09'min-width': '90vw',%0A
 %09%09di
@@ -1715,38 +1715,59 @@
 ,%0A%09%09
-position: 'fixed',%0A%09%09top
+'background-color': '#FFFFFF',%0A%09%09'min-width'
 : '
+9
 0v
-h
+w
 ',%0A%09

Reorder properties