acklen-keystone/admin/client/App/isomorphic/components/Topbar/TopBar.js

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Layout } from 'antd';
import { toggleCollapsed } from '../../redux/app/reducer';
import {
	TopbarUser,
} from './components';

const { Header } = Layout;

class Topbar extends Component {
	render () {
		const { toggleCollapsed, customizedTheme } = this.props;
		const collapsed = this.props.collapsed && !this.props.openDrawer;

		const styling = {
			background: customizedTheme.backgroundColor,
			position: 'fixed',
			width: '100%',
			height: 70,
		};
		return (
			<Header
				style={styling}
				className={
					collapsed ? 'isomorphicTopbar collapsed' : 'isomorphicTopbar'
				}
			>
				<div className="isoLeft">
					<button
						className={
							collapsed ? 'triggerBtn menuCollapsed' : 'triggerBtn menuOpen'
						}
						style={{ color: customizedTheme.textColor }}
						onClick={toggleCollapsed}
					/>
				</div>

				<ul className="isoRight">
					<li
						onClick={() => this.setState({ selectedItem: 'user' })}
						className="isoUser"
					>
						<TopbarUser signoutUrl={this.props.signoutUrl} />
					</li>
				</ul>
			</Header>
		);
	}
}

export default connect(
	state => ({
		...state.App.toJS(),
		customizedTheme: state.ThemeSwitcher.toJS().topbarTheme,
	}),
	{ toggleCollapsed }
)(Topbar);