I am using react-bootstrap 1.0.0-beta.3, which is build for supporting bootstrap 4 update.
Before this I was using react-bootstrap 0.32.1 and created Accordion using Panels and Panel group.
But after bootstrap upgrade it was suggested to Card component. I tried to achieve the same behavior like this:
<CardGroup>
<Card eventKey={this.state.eventKey} className="border-0">
<Card.Header>
<div className="row">
<div className="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<Card.Title>
This is test
</Card.Title>
</div>
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3">
Test Text 123
</div>
</div>
</Card.Header>
<Card.Body>
Test Text 456
</Card.Body>
</Card>
</CardGroup>
I am facing couple of issues here:
How to make one card to take the full width.
How to make this structure behave like accordion.
Something like this:
You'll need to create custom components and css classNames.
Working example: https://codesandbox.io/s/8zkrw9jw50
components/Accordian.js
import React from "react";
import Card from "../../components/Card";
const panels = [
"Add Edit Menus",
"Resource Management",
"Asset Management",
"User Management",
"Account Management"
];
export default () => (
<div className="app-container">
<div className="accordion-container">
{panels.map(title => (
<Card key={title} title={title} />
))}
</div>
</div>
);
components/Card.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Row, Col, Card } from "react-bootstrap";
import Collapse from "../Collapse";
import Button from "../Button";
const { Body, Header, Title } = Card;
class CardComponent extends Component {
state = { isActive: false };
toggleVisibility = () =>
this.setState(prevState => ({ isActive: !this.state.isActive }));
render = () => (
<div className={`${this.state.isActive ? "active" : "inactive"}`}>
<Card>
<Header style={{ padding: 0 }}>
<Row>
<Col xs={9}>
<Button onClick={this.toggleVisibility}>
{!this.state.isActive ? "+" : "-"}
</Button>
<Title style={{ display: "inline-block" }}>
{this.props.title}
</Title>
</Col>
<Col style={{ paddingTop: 7 }} xs={3}>
Test Text 123
</Col>
</Row>
</Header>
<Collapse>
<Body style={{ padding: 10 }}>Test Text 456</Body>
</Collapse>
</Card>
</div>
);
}
export default CardComponent;
CardComponent.propTypes = {
title: PropTypes.string.isRequired
};
components/Button.js
import styled from "styled-components";
const StyledButton = styled.button`
color: #909090;
background-color: transparent;
font-weight: bold;
outline: none;
border: 0;
cursor: pointer;
font-size: 22px;
transition: all 0.3s ease-in-out;
margin: 0 15px;
width: 25px;
&:hover {
color: #333333;
}
&:focus {
outline: none;
}
`;
export default StyledButton;
components/Collapse.js
import React from "react";
import PropTypes from "prop-types";
const Collapse = ({ children }) => (
<span className="folding-pannel">{children}</span>
);
export default Collapse;
Collapse.propTypes = {
children: PropTypes.node.isRequired
};
styles.css
.accordion-container {
width: 100%;
}
.app-container {
margin: 20px;
}
.active,
.inactive {
margin-bottom: 5px;
}
.active .folding-pannel {
transition: all 0.3s ease-in-out;
height: 42px;
}
.inactive .folding-pannel {
transform: perspective(0px) rotateX(90deg);
transition: all 0.3s ease-in-out;
height: 0;
}
Related
I'm making a React navbar with a hamburger menu icon, but I cannot figure out why my icon cannot be positioned absolutely to the right. Chrome dev tools indicates that both Top and Right properties (as well as any other margin/padding properties) are invalid property values on my hamburger icon (a div element), though my nav menu itself is able to be positioned absolutely to the right.
Navbar.jsx:
import React, { useState } from 'react';
import NavIcon from './NavIcon';
import NavMenu from './NavMenu';
import './navbar.css';
const Navbar = () => {
const [isOpen, setIsOpen] = useState('false');
return (
<nav>
<NavIcon isOpen={isOpen} setIsOpen={setIsOpen} />
<NavMenu isOpen={isOpen} setIsOpen={setIsOpen} />
</nav>
);
};
export default Navbar;
NavMenu.jsx:
import React from 'react';
import NavItem from './NavItem';
import './navbar.css';
const NavMenu = ({ isOpen }) => {
const slideIn = {
transform: () => isOpen ? 'translateX(1)' : 'translateX(0)'
};
return (
<ul className='Navbar__menu' isOpen={isOpen} style={slideIn}>
<NavItem title='Home' />
<NavItem title='About' />
<NavItem title='Contact' />
</ul>
);
};
export default NavMenu;
NavIcon.jsx:
import React from 'react';
import './navbar.css';
const NavIcon = ({ isOpen, setIsOpen }) => {
const toXTop = {
transform: isOpen ? 'rotate(-45deg) translate(-5.25px, 6px)' : 'none'
};
const toXMid = {
opacity: isOpen ? '0' : '1'
};
const toXbottom = {
transform: isOpen ? 'rotate(45deg) translate(-5.25px, -6px)' : 'none'
};
return (
<div className='Navbar__icon' isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
<div className='Navbar__icon--bars' style={toXTop} />
<div className='Navbar__icon--bars' style={toXMid} />
<div className='Navbar__icon--bars' style={toXbottom} />
</div>
);
};
export default NavIcon;
NavItem.jsx:
import React from 'react';
import './navbar.css';
const NavItem = ({ title }) => {
return (
<div className='Navbar__menu--item'>
{ title }
</div>
);
};
export default NavItem;
navbar.css:
.Navbar__icon {
display: block;
position: absolute;
top: 5;
right: 5;
z-index: 1;
cursor: pointer;
}
.Navbar__icon--bars {
width: 25px;
height: 4px;
background-color: #666;
border-radius: 5px;
margin: 4px 0;
transition: 0.2s;
}
.Navbar__menu {
position: absolute;
width: 15em;
height: auto;
right: 0;
list-style: none;
background-color: #000;
}
.Navbar__menu--item {
font: 1rem Arial, sans-serif;
color: #999;
margin: 1em;
cursor: pointer;
}
App.js just renders the Navbar.jsx component.
Any advice is appreciated. Thanks.
It seems that Top/Left/Right/Bottom property values in React do not support unitless numerical values, as this issue was resolved by adding px units to my values.
I have a series of .mdx files that contain the same information but on different sites (ex: title="aswan"; title="rome" etc). These files are located in a folder called "metadata".
I need to insert mdx information into a component (OurSites.js) that goes to form the HomePage of the site (index.js).
This is the content of the OurSites.js component:
import React from "react";
import styled from "styled-components";
import Card from "react-bootstrap/Card";
import { Container, Row, Col } from "react-bootstrap";
import Button from "react-bootstrap/Button";
import TitleR from "../Title/TitleR";
import Card1 from "../../metadata/1-home-page/images/1-card.jpg";
import Card2 from "../../metadata/1-home-page/images/2-card.jpg";
const Sites = () => {
return (
<Wrapper>
<section className="section bottom-slant-gray">
<Container>
<TitleR title="our sites" />
<Row xs={1} md={2}>
<Col>
<Card>
<Card.Img variant="top" fluid={true} src={Card1} />
<Card.Body>
<Card.Title>First Step</Card.Title>
<Button variant="primary">
<a href="https://docs.paths-erc.eu/data/">
go to paths repository
</a>
</Button>
<Card.Text>
Collection and georeferencing on GIS platform of most of the
historical cartography of Egypt and plans of the main
temple/church/basilica complexes
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col>
<Card>
<Card.Img variant="top" src={Card2} />
<Card.Body>
<Card.Title>Second Step</Card.Title>
<Button variant="primary">
<a href="https://docs.paths-erc.eu/data/svp">
go to spv protocol
</a>
</Button>
<Card.Text>
Vectorization of geo-referenced plants on GIS platform using
a protocol (SPV) developed by PAThs team members
</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
<Row xs={1} md={2}>
<Col>
<Card>
<Card.Img variant="top" fluid={true} src={Card1} />
<Card.Body>
<Card.Title>First Step</Card.Title>
<Button variant="primary">
<a href="https://docs.paths-erc.eu/data/">
go to paths repository
</a>
</Button>
<Card.Text>
Collection and georeferencing on GIS platform of most of the
historical cartography of Egypt and plans of the main
temple/church/basilica complexes
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col>
<Card>
<Card.Img variant="top" src={Card2} />
<Card.Body>
<Card.Title>Second Step</Card.Title>
<Button variant="primary">
<a href="https://docs.paths-erc.eu/data/svp">
go to spv protocol
</a>
</Button>
<Card.Text>
Vectorization of geo-referenced plants on GIS platform using
a protocol (SPV) developed by PAThs team members
</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
<Row xs={1} md={2}>
<Col>
<Card>
<Card.Img variant="top" fluid={true} src={Card1} />
<Card.Body>
<Card.Title>First Step</Card.Title>
<Button variant="primary">
<a href="https://docs.paths-erc.eu/data/">
go to paths repository
</a>
</Button>
<Card.Text>
Collection and georeferencing on GIS platform of most of the
historical cartography of Egypt and plans of the main
temple/church/basilica complexes
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col>
<Card>
<Card.Img variant="top" src={Card2} />
<Card.Body>
<Card.Title>Second Step</Card.Title>
<Button variant="primary">
<a href="https://docs.paths-erc.eu/data/svp">
go to spv protocol
</a>
</Button>
<Card.Text>
Vectorization of geo-referenced plants on GIS platform using
a protocol (SPV) developed by PAThs team members
</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</section>
</Wrapper>
);
};
const Wrapper = styled.section`
a {
color: rgb(130, 36, 51);
font-family: "Raleway", sans-serif;
font-weight: bolder;
font-size: 0.8rem;
line-height: 1rem;
text-transform: uppercase;
display: swap;
text-decoration: none;
}
a:hover {
color: rgb(130, 36, 51);
font-family: "Raleway", sans-serif;
font-weight: bolder;
font-size: 0.8rem;
line-height: 1rem;
text-transform: uppercase;
display: swap;
text-decoration: none;
}
button {
text-align: right;
margin: 3% 0 3% 0;
background: rgb(130, 36, 51, 0.2);
border-color: rgb(130, 36, 51, 0.3);
}
button:hover {
background: none;
border-color: transparent;
}
section {
padding: 4em 5;
position: relative;
z-index: 2;
}
.card {
border: none;
}
.card-body {
text-align: right;
font-family: "Raleway", sans-serif;
font-size: 1rem;
line-height: 1.7rem;
display: swap;
}
.card-title {
font-weight: bolder;
text-transform: uppercase;
}
.container {
padding-bottom: 5%;
}
section {
padding: 0;
position: relative;
z-index: 2;
}
.bottom-slant-gray {
position: relative;
padding-bottom: 10%;
background-color: #f8f9fa;
}
.bottom-slant-gray:before {
content: "";
width: 100%;
height: 240px;
background: #f8f9fa;
z-index: -1;
top: 0px;
background-color: #f8f9fa;
left: 0;
position: absolute;
-webkit-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
transform: skewY(-6deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
.row {
padding-top: 3%;
}
.sites-img {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
height: 19rem;
z-index: 1;
}
.sites-img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, var(--clr-primary-5), #222);
opacity: 0.85;
transition: var(--transition);
}
`;
export default Sites;
Where there is text, such as in CardText, I would like to insert the contents of mdx files.
Querying the data on Graphql gave this result:
export const query = graphql`
{
allMdx(limit: 8, sort: { fields: frontmatter___title, order: ASC }) {
nodes {
id
frontmatter {
title
status
typology
image {
childImageSharp {
gatsbyImageData
}
}
}
excerpt
}
}
}
`;
This is the content of the index.js page inside which is present also the OurSite.js component:
import * as React from "react";
import Layout from "../components/Layout";
import Slider from "../components/Slider";
import About from "../components/Home/About";
import Methods from "../components/Home/Methods";
import OurSites from "../components/Home/OurSites";
import { graphql } from "gatsby";
// markup
const IndexPage = () => {
return (
<Layout>
<Slider />
<About />
<Methods />
<OurSites />
</Layout>
);
};
export const query = graphql`
{
allMdx(limit: 8, sort: { fields: frontmatter___title, order: ASC }) {
nodes {
id
frontmatter {
title
status
typology
image {
childImageSharp {
gatsbyImageData
}
}
}
excerpt
}
}
}
`;
export default IndexPage;
This is what the component looks like:
You have two options:
Using page queries
Using static queries (useStaticQuery hook)
With the first option, your queries must go on a page (hence the name) and you need to drill down the props containing your data to each desired component. Because of you already have the query set, you just need to:
import * as React from "react";
import Layout from "../components/Layout";
import Slider from "../components/Slider";
import About from "../components/Home/About";
import Methods from "../components/Home/Methods";
import OurSites from "../components/Home/OurSites";
import { graphql } from "gatsby";
// markup
const IndexPage = ({ data }) => {
console.log("your props.data is inside data: " data);
return (
<Layout>
<Slider />
<About />
<Methods />
<OurSites sites={data.allMdx.nodes}/>
</Layout>
);
};
export const query = graphql`
{
allMdx(limit: 8, sort: { fields: frontmatter___title, order: ASC }) {
nodes {
id
frontmatter {
title
status
typology
image {
childImageSharp {
gatsbyImageData
}
}
}
excerpt
}
}
}
`;
export default IndexPage;
Your queried data (via GraphQL) is inside props.data (destructured as data). You can drill down the site's information by data.allMdx.nodes (which is an array). So in your OurSites component, you only need to get the props (props.sites) and loop through them to display dynamically your data.
With the useStaticQuery the approach is exactly the same but the data can be stores somewhere else (in a custom hook or in the inner OurSites component).
I am following a tutorial where a person is teaching me how to write Bootstrap code. They created a top bar that goes across the entire browser width with the following code
CSS
.top-bar {
background: #7aaec4;
height: 2.8rem;
padding: .5rem 0;
}
.topbar a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
}
HTML Code
<div class="top-bar">
<div class="container">
<div class="col-12 text-right">
<p>
Call us at +1 (888) 555-5555
</p>
</div>
</div>
</div>
The code above created the top bar which runs across the browser width and has a specific height as well.
Now I am trying to get the same behavior but with react-bootstrap and styled-components. So I wrote this code
import React from 'react';
import {Container, Row, Col} from 'react-bootstrap';
import styled from 'styled-components';
const Styles = styled.div`
background: #7aaec4;
height: 2.8rem;
padding: .5rem 0;
text-align: right;
a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
};
`;
export const TopBar = () => {return (
<Container>
<Styles>
<Row>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
Call us at +1 (888) 555-5555
</Col>
</Row>
</Styles>
</Container>
)}
And then finally use my component as
<React.Fragment>
<GlobalStyles />
<TopBar />
<div>Hello World</div>
</React.Fragment>
I see that the topbar is not running across the browser screen. it looks like this
I have simple functional component in react
import React from 'react';
import styled from 'styled-components';
import IconButton from '#material-ui/core/IconButton';
import AddShoppingCartIcon from '#material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '#material-ui/icons/RemoveShoppingCart';
const Wrapper = styled.section`
padding: 1em;
margin: 0 auto;
width: 400px;
`;
const IngredientRow = styled.div`
display: flex;
margin: 5px 0;
width: 40%;
margin: 0 auto;
margin-bottom: 10px;
justify-content: space-between;
align-items: center;
`
const IngredientSelector = (props) => {
const Ingredient = (ingredient) => {
return (
<IngredientRow key={ingredient.id}>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<RemoveShoppingCartIcon />
</IconButton>
</span>
<h4>a</h4>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</span>
</IngredientRow>
)
}
return (
<Wrapper>
<h2>Select the Burger Ingredients</h2>
{
props.ingredients.map(ingredient => {
<Ingredient ingredient={ingredient} />
})
}
</Wrapper>
)
}
export default IngredientSelector;
Its not working and giving error in console. Not sure why not working. Please help.
try moving the ingredient function outside of the ingredientSelector and add object destructuring to the props of the ingredient
const Ingredient = ({ingredient}) => {
return (
<IngredientRow key={ingredient.id}>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<RemoveShoppingCartIcon />
</IconButton>
</span>
<h4>a</h4>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</span>
</IngredientRow>
)
}
const IngredientSelector = (props) => {
return (
<Wrapper>
<h2>Select the Burger Ingredients</h2>
{props.ingredients.map(ingredient => {
<Ingredient ingredient={ingredient} />
})
}
</Wrapper>
)
}
In the object "Ingredient" you should access the ingredientId using "props.ingredient.id" in your case "ingredient.indgredient.id". Because in the functional component "Ingredient". The variable passed is ingredient. Also, key should be passed in map function not in the return. So, your existing code would look like.
import React from 'react';
import styled from 'styled-components';
import IconButton from '#material-ui/core/IconButton';
import AddShoppingCartIcon from '#material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '#material-ui/icons/RemoveShoppingCart';
const Wrapper = styled.section`
padding: 1em;
margin: 0 auto;
width: 400px;
`;
const IngredientRow = styled.div`
display: flex;
margin: 5px 0;
width: 40%;
margin: 0 auto;
margin-bottom: 10px;
justify-content: space-between;
align-items: center;
`
const IngredientSelector = (props) => {
const Ingredient = (ingredient) => { {/* change it props. But, its your preference*/}
return (
<IngredientRow key={ingredient.ingredient.id}> {/* Because the function component receives variable name ingredient`enter code here` */}
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<RemoveShoppingCartIcon />
</IconButton>
</span>
<h4>a</h4>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</span>
</IngredientRow>
)
}
return (
<Wrapper>
<h2>Select the Burger Ingredients</h2>
{
props.ingredients.map(ingredient => {
<Ingredient ingredient={ingredient} key={ingredient.id}/> {/* Code change here */}
})
}
</Wrapper>
)
}
export default IngredientSelector;
Looks like you forgot to return the dom inside the map.
And you are passing ingredient to the Ingredient component as a prop not as an argument. Functional component receives props as an argument.
import React from 'react';
import styled from 'styled-components';
import IconButton from '#material-ui/core/IconButton';
import AddShoppingCartIcon from '#material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '#material-ui/icons/RemoveShoppingCart';
const Wrapper = styled.section`
padding: 1em;
margin: 0 auto;
width: 400px;
`;
const IngredientRow = styled.div`
display: flex;
margin: 5px 0;
width: 40%;
margin: 0 auto;
margin-bottom: 10px;
justify-content: space-between;
align-items: center;
`
const IngredientSelector = (props) => {
const Ingredient = ({ingredient}) => { // recieves props
return (
<IngredientRow key={ingredient.id}>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<RemoveShoppingCartIcon />
</IconButton>
</span>
<h4>a</h4>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</span>
</IngredientRow>
)
}
return (
<Wrapper>
<h2>Select the Burger Ingredients</h2>
{
props.ingredients.map(ingredient => {
return <Ingredient ingredient={ingredient} /> // return the dom
})
}
</Wrapper>
)
}
export default IngredientSelector;
I'm new to Material-ui and react. What I'm trying to do is have my drawer stay in a persistent open state when the user clicks the hamburger menu on the AppBar. I want my main content 'pushed' to the right when the drawer opens, not the drawer laying on top of it. I'm stuck and don't know how to get this to work. Here's my code thus far. Thanks in advance for any tips or tricks! :)
Application.js
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {ClassificationBanner} from './ClassificationBanner'
import TitleBar from './TitleBar'
import styles from './Application.css'
import injectTapEventPlugin from 'react-tap-event-plugin'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
injectTapEventPlugin();
class Application extends Component {
render() {
return (
<MuiThemeProvider>
<div className={styles.root}>
<ClassificationBanner />
<TitleBar />
{this.props.children}
</div>
</MuiThemeProvider>
)
}
}
Application.propTypes = {
children: PropTypes.object.isRequired,
bbox: React.PropTypes.arrayOf(React.PropTypes.number),
};
export default Application
TitleBar.js
import React, {Component} from 'react'
import logo from '../../images/logo.1.png'
import AppBar from 'material-ui/AppBar'
import Drawer from 'material-ui/Drawer'
import Subheader from 'material-ui/Subheader'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MenuItem from 'material-ui/MenuItem'
import { Link, IndexLink } from 'react-router';
import css from './TitleBar.css'
class TitleBar extends Component {
constructor(props){
super(props);
this.state = {drawerOpen:false};
}
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
}
handleToggle() {
this.setState({drawerOpen: !this.state.drawerOpen});
}
handleClose() { this.setState({drawerOpen: false}); }
render() {
const styles = {
appBar: {
backgroundColor: 'black',
height: '70px',
top: '25px'
},
img: {
position: 'absolute',
left: '50%',
marginLeft: '-127px',
marginTop: '10px',
height: '50px'
},
drawer: {
width: '200px',
marginTop: '95px',
backgroundColor: '#010101',
marginLeft: '0px',
padding: '0px'
},
mainMenu: {
color: '#3e3f3f',
display: 'inline-block',
marginRight: '40px',
fontSize: '20px',
align: 'left',
},
};
const img = <img style={styles.img} src={logo}/>
return (
<header className="header">
<AppBar style={styles.appBar} title={img} onLeftIconButtonTouchTap={this.handleToggle.bind(this)} />
<Drawer containerStyle={styles.drawer}
overlayStyle={styles.drawer}
docked={false}
open={this.state.drawerOpen}
onRequestChange={(open) => this.setState({open})}>
<Subheader inset={false}><span style={{width:'100%'}}><div style={styles.mainMenu}>MAIN MENU</div><div style={{display:'inline-block'}}><i className="fa fa-long-arrow-left fa-lg" style={{color: '#4498c0'}} onTouchTap={this.handleClose.bind(this)} aria-hidden="true"></i></div></span></Subheader>
<MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><IndexLink className={css.link} activeClassName={css.active} onlyActiveOnIndex={true} to="/exports"><i className="fa fa-book" aria-hidden="true"></i> DataPack Library</IndexLink></MenuItem>
<MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><Link className={css.link} activeClassName={css.active} to="/create" ><i className="fa fa-plus-square" aria-hidden="true"></i> Create Datapack</Link></MenuItem>
<MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><Link className={css.link} activeClassName={css.active} to="/about" ><i className="fa fa-info-circle" aria-hidden="true"></i> About EventKit</Link></MenuItem>
<MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><Link className={css.link} activeClassName={css.active} to="/account" ><i className="fa fa-user" aria-hidden="true"></i> Account Settings</Link></MenuItem>
<MenuItem className={css.menuItem} onTouchTap={this.handleClose.bind(this)}><Link className={css.link} activeClassName={css.active} to="/logout" ><i className="fa fa-sign-out" aria-hidden="true"></i> Log Out</Link></MenuItem>
</Drawer>
</header>
)
}
}
TitleBar.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};
export default TitleBar
TitleBar.css
.menuItem > div > div{
margin-left: 0px !important;
padding: 0px !important;
}
.img {
width: 205px;
height: 40px;
}
/* =========================================================================
Link
========================================================================= */
.link {
position: relative;
display: block;
padding: 5px;
text-align: left;
text-decoration: none;
color: #4498c0;
}
.link:visited {
text-decoration:none;
}
.atHome .link {
line-height: 150px;
}
.link:hover {
background-color: #161e2e;
text-decoration: none;
}
.link:active {
text-decoration: none;
}
a:link {
text-decoration: none;
}
/* Link: State
========================================================================= */
.active,
.active:hover {
box-shadow: 0 2px rgba(0,0,0,.1);
background-color: #161e2e;
text-decoration: none;
}
.active:visited {
text-decoration: none;
}
.active .icon {
fill: #1675aa;
filter: none;
-webkit-filter: none;
box-shadow: 0 2px rgba(0,0,0,.1);
text-decoration: none;
}
Application.css
.root {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.body {
font-family: 'Roboto', sans-serif;
}