Skip to content

Commit

Permalink
Add support for selected tab, see #26
Browse files Browse the repository at this point in the history
  • Loading branch information
chrisklus committed Jul 23, 2019
1 parent a7d08e8 commit 104b6b6
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 4 deletions.
Binary file added react-binder/public/img/phet.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions react-binder/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Expand Down
93 changes: 91 additions & 2 deletions react-binder/src/pages/index/index.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,94 @@
@import "../common.css";

:root {
--side-nav-width: 290px;

--light-eggplant: #f4f2f9;
--gray: #6c6c6c;
--gray-light: #e0e0e0;
--pink: #e01e5a;

--short-transition: 0.3s ease;
}

#index-page {
text-align: center;
}
width: 100%;
height: 100%;
}

#side-nav {
width: var(--side-nav-width);
height: 100%;
position: absolute;
left: 0;
top: 0;
background: var(--light-eggplant);
border-right: 1px solid var(--gray-light);
}

.title-container {
margin: 14px 10px;
padding-bottom: 4px;
overflow: auto;
border-bottom: 1px solid #dcdcdc;
}

img.title-image {
width: 120px;
display: inline-block;
float: left;
}

h1.title-text {
display: inline-block;
font-family: var(--default-font-family);
font-weight: 100;
font-size: 48px;
margin: 2px 0 0 8px;
float: left;
}

.nav-buttons {
margin-top: 20px;
}

button.nav-button {
width: 283px;
display: block;
background: transparent;
cursor: pointer;
text-align: left;
font-family: var(--default-font-family);
font-size: 17px;
font-weight: 300;
padding: 7px 7px 6px;
margin: 0 8px;
border: 1px solid transparent;
color: var(--gray);
transition: var(--short-transition);
}

button.nav-button:hover {
color: var(--pink);
transition: var(--short-transition);
}

button.nav-button:focus {
color: var(--pink);
transition: var(--short-transition);
outline: none;
}

button.nav-button.selected {
background: white;
border-color: var(--gray-light);
border-right: none;
}

#selected-page {
width: calc(100% - var(--side-nav-width));
height: 100%;
position: absolute;
left: var(--side-nav-width);
top: 0;
}
45 changes: 43 additions & 2 deletions react-binder/src/pages/index/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,55 @@ export default class IndexPage extends React.Component {
constructor( props ) {
super( props );

this.state = {};
this.state = {
selectedButtonId: 'simsByComponent',
selectedPage: <h1>sims page</h1>,
simsByComponent: <h1>sims page</h1>,
componentsBySim: <h1>components page</h1>
};
}

selectClass( buttonId ) {
return this.state.selectedButtonId === buttonId ? 'selected' : '';
}

selectPage( buttonId ) {
this.setState( {
selectedButtonId: buttonId,
selectedPage: this.state[ buttonId ]
} );
}

render() {

const NavButton = props => {
return <button className={`nav-button ${this.selectClass( props.id )}`}
onClick={() => this.selectPage( props.id )}>
{props.label}
</button>
};

return (
<div id='index-page'>
<h1>Hello World</h1>

<div id='side-nav'>

<div className='title-container'>
<img src='/img/phet.png' className='title-image' alt='PhET'/>
<h1 className='title-text'>Binder</h1>
</div>

<div className='nav-buttons'>
<NavButton id='simsByComponent' label='SIMS BY COMPONENT'/>
<NavButton id='componentsBySim' label='COMPONENTS BY SIM'/>
</div>

</div>

<div id='selected-page'>
{this.state.selectedPage}
</div>

</div>
);
}
Expand Down

0 comments on commit 104b6b6

Please sign in to comment.