New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add navbar #5
Add navbar #5
Changes from all commits
adfb4c4
07b93e1
5d02b86
9ef55a8
d3109ef
7d3cd4f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"presets": ["next/babel"], | ||
"plugins": [["styled-components", { "ssr": true }]] | ||
} | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import styled from 'styled-components'; | ||
import { Row, Col, Spacer, Select } from '@geist-ui/react'; | ||
import { Sun, Moon } from '@geist-ui/react-icons'; | ||
|
||
const darkLogo = '/images/opticDarkLogo.png'; | ||
const lightLogo = '/images/opticLightLogo.png'; | ||
|
||
const NavBar = styled(Row)` | ||
RobertoValle31 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
align-items: center !important; | ||
height: 50px; | ||
border-bottom: 0.5px solid; | ||
margin-bottom: 15px; | ||
padding: 0px 15px; | ||
`; | ||
|
||
const Logo = styled.img` | ||
height: 40px; | ||
`; | ||
|
||
const SelectContainer = styled(Col)` | ||
text-align: right; | ||
`; | ||
|
||
interface NavParams { | ||
setUseLight(useLight: boolean): any; | ||
useLight: boolean; | ||
} | ||
|
||
const Nav = ({ useLight, setUseLight }: NavParams): JSX.Element => { | ||
return ( | ||
<NavBar> | ||
<Col> | ||
<Logo src={useLight ? darkLogo : lightLogo} alt="OpticPower" /> | ||
</Col> | ||
<SelectContainer> | ||
<Select placeholder={useLight ? 'Light Mode' : 'Dark Mode'}> | ||
<Select.Option value="Dark Mode" onClick={(): void => setUseLight(false)}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: why I had used something like: <Select placeholder={useLight ? 'Light Mode' : 'Dark Mode'} onChange={(ev) => setLight(ev.target.value)}>
<Select.Option value="false">
<Moon size={16} /> <Spacer inline x={0.35} />
Dark Mode
</Select.Option>
{/* ... */}
</Select> Just curious. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hey, @lardissone I was trying your suggestion but I believe that you do that on MaterialUI, and works perfectly. If that is the case the prop <Select placeholder={useLight ? 'Light Mode' : 'Dark Mode'} onChange={value => setUseLight(value === 'true')}>
<Select.Option value="false">
<Moon size={16} /> <Spacer inline x={0.35} />
Dark Mode
</Select.Option>
<Select.Option value="true">
<Sun size={16} /> <Spacer inline x={0.35} />
Light Mode
</Select.Option>
</Select> Let me know what you think. |
||
<Moon size={16} /> <Spacer inline x={0.35} /> | ||
Dark Mode | ||
</Select.Option> | ||
<Select.Option value="Light Mode" onClick={(): void => setUseLight(true)}> | ||
<Sun size={16} /> <Spacer inline x={0.35} /> | ||
Light Mode | ||
</Select.Option> | ||
</Select> | ||
</SelectContainer> | ||
</NavBar> | ||
); | ||
}; | ||
|
||
export default Nav; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was having problems with the styled-components because every time I refreshed the page the component was losing all its CSS styles and I was having a warning on the browser console regarding the use of className although I was not using it. After research and testing different solutions this was the only one that worked vercel/next.js#4068 (comment) I had to create this file with this config.