I am trying recently Ionic framework and I want to implement a material design. I wan to do something like this
https://github.com/wasabeef/awesome-android-ui/blob/master/art/LDrawer.gif
Is that possible?
Many thanks.
Itt's totally possible, you only need to know some basic scss and HTML.
This is a side menu i created by myself
import { Component, OnInit } from '#angular/core';
import { MenuController } from '#ionic/angular';
import { Router } from '#angular/router';
#Component({
selector: 'app-side-menu',
templateUrl: './side-menu.component.html',
styleUrls: ['./side-menu.component.scss'],
})
export class SideMenuComponent implements OnInit {
constructor(private menu: MenuController, public router: Router) { }
ngOnInit() {}
navigateToDashboard() {
this.router.navigate(['tabs/tab1'])
console.log("Directed to dashboard")
}
navigateToProjects() {
this.router.navigate(['projectspage'])
console.log("Directed to Projects")
}
openFirst() {
this.menu.enable(true, 'first');
this.menu.open('first');
}
openEnd() {
this.menu.open('end');
}
openCustom() {
this.menu.enable(true, 'custom');
this.menu.open('custom');
}
}
img {
border-radius: 50%;
border: 1px solid #ddd;
padding: 5px;
left: initial;
width: 150px;
margin-left: 60px;
}
ion-card{
margin-bottom:10px;
margin-top: 11px;
position: relative;
}
ion-menu{
--background: linear-gradient(to right, rgb(201, 75, 75), rgb(75, 19, 79));
//filter: blur(8px);
}
ion-button{
margin-bottom: 7px;
}
div{
margin-bottom: 31px;
}
.my-custom-menu {
--width: 500px;
}
<ion-menu side="start" content-id="main-content" swipe-gesture="true">
<ion-card color="transparent">
<img src="../../../assets/img/avatar.jpg" alt="Avatar">
<ion-card-header>
<ion-card-subtitle>Role</ion-card-subtitle>
<ion-card-title color="light">UserName</ion-card-title>
</ion-card-header>
</ion-card>
<div>
<ion-button expand="full" color="#7c46ce" (click)="navigateToDashboard()">
<ion-icon name="reader-outline"></ion-icon> Dashboard
</ion-button>
<ion-button expand="full" color="#7c46ce">
<ion-icon name="person-outline"></ion-icon> My profile
</ion-button>
<ion-button expand="full" color="#7c46ce" (click)="navigateToProjects()">
<ion-icon name="bar-chart-outline"></ion-icon> Projects
</ion-button>
<ion-button expand="full" color="#7c46ce">
<ion-icon name="pie-chart-outline"></ion-icon> Statistics
</ion-button>
</div>
<div>
<ion-button expand="full" color="#7c46ce">
<ion-icon name="construct-outline"></ion-icon> Settings
</ion-button>
<ion-button expand="full" color="#7c46ce">
<ion-icon name="log-out-outline"></ion-icon> Logout
</ion-button>
</div>
</ion-menu>
<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button>
<ion-icon name="menu"></ion-icon>
</ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
</div>
This is how it looks like
Related
If someone can let me know if I'm using an improper format in order to load an image on react that would be amazing! I'm not an expert and any advice is greatly appreciated -- thank you in advance. The image that populates when I run the code just shows a broken img icon and when I try to run through the terminal it says that the image is called but not loaded.
import React, { Component } from "react";
import PropTypes from "prop-types";
import Logo from "/Users/mauromartineziii/aqua-financial/src/logo.png";
import "./App.css";
import Photo from "/Users/mauromartineziii/aqua-financial/src/pexels-photo-3560168.jpeg";
class App extends Component {
render() {
return (
<div>
<section>
<header>
<img
src="/Users/mauromartineziii/aqua-financial/src/logo.png"
width="333"
alt="Aqua Financial"
/>
<div>
<ul>
<li>Financial Services</li>
<li>Liquid Capital Asset</li>
<li>Retirement</li>
</ul>
</div>
</header>
</section>
<section id="main">
<img src="Photo"></img>
<div className="main-text">
<span>Learn What An LCA™ Can </span> <br /> Do For You <br />
</div>
<div className="right-text">
<span>Innovation Driven Banking</span>
</div>
<div>
{" "}
<button>Learn More</button>
</div>
</section>
</div>
);
}
}
export default App;
body {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
section {
margin: 0 120px;
}
header {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 50px;
}
header div {
margin-left: auto;
font-size: 20px;
}
header ul li {
display: inline-block;
margin: 0 20px;
}
#main {
margin: 0 120px;
margin-top: 200px;
display: grid;
grid-template-columns: 1fr 1fr;
}
#main .main-text {
font-size: 45px;
font-weight: 700;
line-height: 1.5;
}
`
It's a good idea to place the images you use in your project in the project directory and import them with a relative path, e.g:
import Logo from "./logo.png";
You also want to use the the resulting variables for your img tags.
<img
src={Logo}
width="333"
alt="Aqua Financial"
/>
// ...
<img src={Photo} />
I am trying to get my footer to stick to the bottom and not cover any body elements toward the bottom of the screen and I cannot seem to figure it out. Here is my footer.js
import React from "react";
import './Stylesheets/Footer.css';
import NavbarBrand from 'react-bootstrap/NavbarBrand';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
class Footer extends React.Component {
state = { clicked: false }
handleClick = () => {
this.setState({ clicked: !this.state.clicked })
}
render() {
return (
<footer className="footerItems">
<div className="phantom"></div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<i class="fab fa-2x fa-github"></i>
<i class="fab fa-2x fa-facebook-square"></i>
<i class="fab fa-2x fa-twitter-square"></i>
<i class="fab fa-2x fa-instagram"></i>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
)
}
}
export default Footer
I am trying to use a phantom <div> to force some additional spacing but that is not working. Here is the corresponding css file.
footer {
height: 80px;
margin-top: -200px;
bottom: 0;
z-index: 999;
}
.phantom {
display: 'block';
padding: '20px';
height: '60px';
width: '100%';
}
.footerItems {
position: fixed;
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
height: 100vh;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
color: #080202;
}
.wrapper a:nth-child(2) {
color: white;
}
.wrapper a:nth-child(3) {
color: #1DA1F2;
}
.wrapper a:nth-child(4){
color: #f24f1d;
}
.wrapper i:hover {
margin-top: -3px;
text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}
Any thoughts or suggestions??
THANK YOU
Here's a solution using position: sticky. The main things to note here is that the main div needs to be at least the height of the page, that way the top property can force it to the bottom. The bottom property then forces it to stay at the bottom even if scrolled past.
This doesn't remove the footer from affecting the height of the page, so it'll all be scrollable without issue.
The other thing to note is that this solution (as written) is based on knowing the height of the footer in advance, so I put a custom css property --footer-height: 60px to set that.
I'm not really sure why the icons and things don't show on the footer as given, but that's a different question
const { NavbarBrand, Navbar, Container } = ReactBootstrap;
class Footer extends React.Component {
state = {
clicked: false,
};
handleClick = () => {
this.setState({
clicked: !this.state.clicked,
});
};
render() {
return (
<footer className="footerItems">
<div className="phantom"> </div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<a href="http://www.github.com" target="_blank">
<i class="fab fa-2x fa-github"> </i>
</a>
<a href="http://www.facebook.com" target="_blank">
<i class="fab fa-2x fa-facebook-square"> </i>
</a>
<a href="http://www.twitter.com" target="_blank">
<i class="fab fa-2x fa-twitter-square"> </i>
</a>
<a href="http://www.instagram.com" target="_blank">
<i class="fab fa-2x fa-instagram"> </i>
</a>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
);
}
}
ReactDOM.render(
<div className="main">
<div className="content">Content!</div> <Footer />
</div>,
document.getElementById('root')
);
.main {
min-height: 100vh;
--footer-height: 60px;
}
.content {
height: 100vh;
background: linear-gradient(0deg, green 0%, white 100%);
}
footer {
height: var(--footer-height);
position: sticky;
top: calc(100vh - var(--footer-height));
bottom: 0;
}
.phantom {
display: block;
padding: 20px;
height: var(--footer-height);
width: 100%;
}
.footerItems {
/*position: fixed;*/
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
/*height: 100vh*/
;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js" crossorigin></script>
<div id="root" />
Hoping to get some help on an issue I have been having in Next js. I am using Fontawesome-react package for icon imports which is working fine but when I attempt to load in a google font style sheet into the head of my main component, it changes the fonts but makes the font awesome icons disappear. I have tried a couple of different solutions such as loading the font locally and utilizing _document and _app components but none fix the issue I am having. Everything ends up changing the font but still gets rid of all the font awesome icons from every part of my app. I will copy in the Nav component I have and the Layout component that holds everything.
Thank you for any help!
import React from 'react'
import Nav from './nav/Nav'
import Head from 'next/head'
import Footer from './Footer'
type Props = {
title?: string
}
const Layout: React.FC<Props> = ({ children, title = 'Macros' }) => {
return (
<div>
<Head>
<title>{title}</title>
<link
href="https://fonts.googleapis.com/css?family=Darker+Grotesque&display=swap"
rel="stylesheet"
/>
</Head>
<Nav />
<div id="pageContent">{children}</div>
<Footer />
<style jsx global>{`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: lighter;
font-family: 'Darker Grotesque', sans-serif;
}
#pageContent {
padding: 8rem 1rem;
}
`}</style>
</div>
)
}
export default Layout
import React, { useState } from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faBars, faSearch, faPlus } from '#fortawesome/free-solid-svg-icons'
import Link from 'next/link'
const NavBar: React.FC = () => {
const [navBarStatus, isOpen] = useState<Boolean>(false)
const toggleMenu = () => {
isOpen(navBarStatus ? false : true)
}
return (
<nav id="navContainer">
<div id="mobileNav">
<ul id="navBarTop">
<li>
<button type="button" className="navIcon" onClick={toggleMenu}>
<FontAwesomeIcon icon={faBars} />
</button>
</li>
<li>
<Link href="/">
<a>
<h3>Macro</h3>
</a>
</Link>
</li>
<li>
<button type="button" className="navIcon">
<FontAwesomeIcon icon={faSearch} />
</button>
</li>
</ul>
<ul id="navbarBottom">
<li>Top</li>
<li>New</li>
<li>Protein</li>
<li>Carbs</li>
<li>Fats</li>
</ul>
</div>
<div id="appDrawer">
<ul id="topIcons">
<li>
<button type="button" className="navIcon" onClick={toggleMenu}>
<FontAwesomeIcon icon={faBars} />
</button>
</li>
<li>
<button type="button" className="navIcon">
<FontAwesomeIcon icon={faPlus} />
</button>
</li>
</ul>
<nav>
<ul id="menuList">
<Link href="/">
<a>
<p>Home</p>
</a>
</Link>
<Link href="/">
<a>Favorites</a>
</Link>
<Link href="/">
<a>Notifications</a>
</Link>
<Link href="/">
<a>Login/Sign up</a>
</Link>
</ul>
</nav>
</div>
<style jsx>{`
#navContainer {
background-color: #504761;
color: white;
position: fixed;
width: 100%;
}
#navContainer a {
text-decoration: none;
color: white;
}
#mobileNav {
display: ${navBarStatus ? 'none' : ''};
}
#navBarTop {
color: white;
display: flex;
justify-content: space-between;
list-style: none;
padding: 1rem 1rem 0.5rem 1rem;
font-size: 1.5rem;
}
.navIcon {
color: white;
border: none;
background-color: #504761;
font-size: 1.5rem;
}
#navbarBottom {
display: flex;
list-style: none;
justify-content: space-evenly;
padding: 1rem 0;
}
#appDrawer {
display: ${navBarStatus ? 'block' : 'none'};
background-color: #504761;
height: 100vh;
}
#topIcons {
display: flex;
justify-content: space-between;
list-style: none;
padding: 1rem;
font-size: 1.5rem;
}
#menuList {
padding: 2rem 0 2rem 1rem;
display: flex;
flex-direction: column;
}
#menuList a {
font-size: 2rem;
margin: 1rem 0;
}
`}</style>
</nav>
)
}
export default NavBar
I am making a Image viewer in ReactJs as I am newbie in this so I stuck at a point. actually I have to add a full screen option. when user click on any particular image the image is open and there is a option like next,prev,close,rotate and fullscreen(that is takes height and width of browser) so when user click on full screen that particular image will get the full window size and user still have option like rotate,next.close and prev. I searched for so many solution but nothing worked.
I tried so many things but it only does the fullscreen whole body but I want .center-image to be full screen with options as I said. This is the gallary modal component.
class GalleryModal extends React.Component {
constructor(props) {
super(props);
this.state = {
rotation: 0
};
this.rotate = this.rotate.bind(this);
}
render() {
const { rotation } = this.state;
if (this.props.isOpen === false) {
return null;
}
return (
<div className="modal-overlay" name={this.props.name}>
<div className="modal-body">
<a href="#" className="button" onClick={() => this.rotate()}>
<i className="fas fa-sync-alt" />
</a>
<a href="#" className="button" onClick={this.props.onPrev}>
<i className="fas fa-angle-left" />
</a>
<img
className="center_image"
id="image"
src={this.props.src}
style={{ transform: `rotate(${rotation}deg)` }}
/>
<a href="#" className="button" onClick={this.props.onNext}>
<i className="fas fa-angle-right" />
</a>
<a
className="modal-close"
href="#"
onClick={this.props.onClick}
>
<span className="fa fa-times" />
</a>
</div>
</div>
);
}
rotate() {
let newRotation = this.state.rotation + 90;
if (newRotation >= 360) {
newRotation = -360;
}
this.setState({
rotation: newRotation
});
}
}
Full code
This is my code and I am confused how to add the fullscreen option and where to add it .
I recommend using css viewport units, setting a component to height: 100vh and width: 100vw will make it fullscreen. You then conditionally render the component based on when you want it to be fullscreen.
Had to use some css tricks, but I believe this is what you're looking to achieve. The image is centered and takes up the maximum amount of width that is available within the window; however, if you stretch the window, it'll adjust its width up until it hits its max width (not advised to stretch it beyond its max value, otherwise, you'll get pixelation).
I did simplify your code a bit by elevating state and class methods to a single container, as well as, used setState() callbacks to manage state more efficiently and the ternary operator (cond ? true : false) in replace of simple if/else conditional statements.
Working example: https://codesandbox.io/s/zr5k7v0zp3
containers/Gallery/Gallery.js
import React from "react";
import GalleryImages from "../../components/GalleryImages/galleryImages";
import GalleryModal from "../../components/GalleryModal/galleryModal";
const imgUrls = [
"https://source.unsplash.com/3Z70SDuYs5g/800x600",
"https://source.unsplash.com/01vFmYAOqQ0/800x600",
"https://source.unsplash.com/2Bjq3A7rGn4/800x600",
"https://source.unsplash.com/t20pc32VbrU/800x600",
"https://source.unsplash.com/pHANr-CpbYM/800x600",
"https://source.unsplash.com/3PmwYw2uErY/800x600",
"https://source.unsplash.com/uOi3lg8fGl4/800x600",
"https://source.unsplash.com/CwkiN6_qpDI/800x600",
"https://source.unsplash.com/9O1oQ9SzQZQ/800x600",
"https://source.unsplash.com/E4944K_4SvI/800x600",
"https://source.unsplash.com/-hI5dX2ObAs/800x600",
"https://source.unsplash.com/vZlTg_McCDo/800x600"
];
export default class Gallery extends React.Component {
constructor(props) {
super(props);
this.state = {
imgIndex: 0,
imgUrlLength: imgUrls.length,
showModal: false,
rotation: 0
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
this.nextClick = this.nextClick.bind(this);
this.prevClick = this.prevClick.bind(this);
this.rotateImage = this.rotateImage.bind(this);
}
openModal(index) {
this.setState({
showModal: true,
imgIndex: index
});
}
closeModal() {
this.setState({
showModal: false,
imgIndex: 0,
rotation: 0
});
}
nextClick() {
this.setState(prevState => {
return {
imgIndex:
prevState.imgIndex === prevState.imgUrlLength - 1
? 0
: prevState.imgIndex + 1
};
});
}
prevClick() {
this.setState(prevState => {
return {
imgIndex:
prevState.imgIndex === 0
? prevState.imgUrlLength - 1
: prevState.imgIndex - 1
};
});
}
rotateImage() {
this.setState(prevState => {
return {
rotation: prevState.rotation + 90 <= 270 ? prevState.rotation + 90 : 0
};
});
}
render() {
return (
<div className="container-fluid gallery-container">
<GalleryImages imgUrls={imgUrls} openModal={this.openModal} />
<GalleryModal
isOpen={this.state.showModal}
onClick={this.closeModal}
onNext={this.nextClick}
onPrev={this.prevClick}
rotateImage={this.rotateImage}
rotation={this.state.rotation}
src={imgUrls[this.state.imgIndex]}
/>
</div>
);
}
}
components/GalleryImages/galleryImages.js
import React from "react";
import PropTypes from "prop-types";
const GalleryImages = ({ imgUrls, openModal }) => {
return (
<div className="row">
{imgUrls.map((url, index) => {
return (
<div key={index} className="col-sm-6 col-md-3 col-xl-2">
<div className="gallery-card">
<img
key={index}
className="gallery-thumbnail"
src={url}
alt={`Image number ${index + 1}`}
/>
<span
className="card-icon-open fa fa-expand"
onClick={() => openModal(index)}
/>
</div>
</div>
);
})}
</div>
);
};
GalleryImages.propTypes = {
imgUrls: PropTypes.arrayOf(PropTypes.string).isRequired,
openModal: PropTypes.func.isRequired
};
export default GalleryImages;
components/GalleryModal/galleryModal.js
import React from "react";
import PropTypes from "prop-types";
const GalleryModal = ({
isOpen,
onClick,
onNext,
onPrev,
rotateImage,
rotation,
src
}) => {
return isOpen ? (
<div className="modal-overlay">
<div className="modal-body">
<div className="close-modal">
<a className="modal-close" href="#" onClick={onClick}>
<span className="fa fa-times" />
</a>
</div>
<div className="rotate-container">
<a href="#" className="button" onClick={rotateImage}>
<i style={{ fontSize: 44 }} className="fas fa-sync-alt" />
</a>
</div>
<div className="image-container">
<div>
<a href="#" className="button" onClick={onPrev}>
<i className="fas fa-angle-left" />
</a>
</div>
<div>
<img
src={src}
style={{ transform: `rotate(${rotation}deg)`, width: "100%" }}
/>
</div>
<div>
<a href="#" className="button" onClick={onNext}>
<i className="fas fa-angle-right" />
</a>
</div>
</div>
</div>
</div>
) : null;
};
GalleryModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired,
onNext: PropTypes.func.isRequired,
onPrev: PropTypes.func.isRequired,
rotateImage: PropTypes.func.isRequired,
rotation: PropTypes.number.isRequired,
src: PropTypes.string
};
export default GalleryModal;
styles.css
html,
body {
min-height: 100%;
height: 100%;
}
html {
font-size: 16px;
}
body {
position: relative;
font-size: 100%;
}
.button {
font-size: 50px;
color: #eee;
margin: 5px;
}
.card-icon-open {
display: block;
position: relative;
left: 45%;
top: 35px;
font-size: 30px;
width: 30px;
color: #fff;
cursor: pointer;
opacity: 0;
transform: translate(0%, -400%);
transition: all 0.25s ease-in-out;
}
.card-icon-open:focus,
.card-icon-open:hover {
color: #111;
}
.close-modal {
position: fixed;
top: 0;
right: 5px;
}
.fullscreen {
position: relative;
text-decoration: none;
font-size: 25px;
color: #eee;
z-index: 999;
}
.fullscreen:hover,
.fullscreen:focus,
.fullscreen:blur {
text-decoration: none;
color: red;
}
.gallery-container {
padding-top: 10px;
}
.gallery-card {
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
.gallery-thumbnail {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.gallery-thumbnail:focus ~ .card-icon-open,
.gallery-thumbnail:hover ~ .card-icon-open,
.gallery-thumbnail ~ .card-icon-open:focus,
.gallery-thumbnail ~ .card-icon-open:hover {
opacity: 1;
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
.image-rotate {
font-size: 44px;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(21, 21, 21, 0.75);
}
.modal-body {
position: relative;
top: 15%;
z-index: 11;
padding: 0;
overflow: hidden;
max-width: 100%;
max-height: 100%;
}
.modal-close {
font-size: 44px;
z-index: 99;
color: #eee;
transition: all 0.25s ease-in-out;
}
.modal-close:focus,
.modal-close:hover {
color: red;
}
.rotate-container {
font-size: 44px;
position: fixed;
top: 0;
left: 5px;
}
Found this library which does exactly what you describe:
https://www.npmjs.com/package/react-fullscreen-image
You can use as is or look into the code for guidance
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;
}