ampache_react/app/components/layouts/Sidebar.jsx

144 lines
9.3 KiB
React
Raw Normal View History

import React, { Component, PropTypes } from "react";
2016-07-07 23:23:18 +02:00
import { IndexLink, Link} from "react-router";
import CSSModules from "react-css-modules";
import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl";
2016-07-07 23:23:18 +02:00
import { messagesMap } from "../../utils";
import commonMessages from "../../locales/messagesDescriptors/common";
import messages from "../../locales/messagesDescriptors/layouts/Sidebar";
import css from "../../styles/layouts/Sidebar.scss";
const sidebarLayoutMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages)));
class SidebarLayoutIntl extends Component {
2016-07-07 23:23:18 +02:00
render () {
const { formatMessage } = this.props.intl;
2016-07-26 21:01:27 +02:00
const isActive = {
discover: (this.props.location.pathname == "/discover") ? "active" : "link",
browse: (this.props.location.pathname == "/browse") ? "active" : "link",
artists: (this.props.location.pathname == "/artists") ? "active" : "link",
albums: (this.props.location.pathname == "/albums") ? "active" : "link",
songs: (this.props.location.pathname == "/songs") ? "active" : "link",
search: (this.props.location.pathname == "/search") ? "active" : "link"
2016-07-26 21:01:27 +02:00
};
2016-07-07 23:23:18 +02:00
return (
<div>
2016-07-30 16:01:42 +02:00
<div className="col-xs-12 col-md-1 col-lg-2" styleName="sidebar">
<h1 className="text-center" styleName="title">
<IndexLink to="/" styleName="link">
<img alt="A" src="./app/assets/img/ampache-blue.png" styleName="imgTitle" />
2016-07-30 16:01:42 +02:00
<span className="hidden-md">mpache</span>
2016-07-26 21:01:27 +02:00
</IndexLink>
</h1>
<nav aria-label={formatMessage(sidebarLayoutMessages["app.sidebarLayout.mainNavigationMenu"])}>
<div className="navbar text-center" styleName="icon-navbar">
2016-07-30 16:01:42 +02:00
<div className="container-fluid" styleName="container-fluid">
<ul className="nav navbar-nav" styleName="nav">
2016-07-26 13:21:37 +02:00
<li>
<Link to="/" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.home"])} styleName="link">
2016-07-26 21:01:27 +02:00
<span className="glyphicon glyphicon-home" aria-hidden="true"></span>
<span className="sr-only">
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.home"]} />
</span>
2016-07-26 21:01:27 +02:00
</Link>
2016-07-07 23:23:18 +02:00
</li>
2016-07-26 13:21:37 +02:00
<li>
<Link to="/settings" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.settings"])} styleName="link">
2016-07-26 21:01:27 +02:00
<span className="glyphicon glyphicon-wrench" aria-hidden="true"></span>
<span className="sr-only">
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.settings"]} />
</span>
2016-07-26 21:01:27 +02:00
</Link>
2016-07-07 23:23:18 +02:00
</li>
2016-07-26 13:21:37 +02:00
<li>
<Link to="/logout" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.logout"])} styleName="link">
2016-07-26 21:01:27 +02:00
<span className="glyphicon glyphicon-off" aria-hidden="true"></span>
<span className="sr-only">
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.logout"]} />
</span>
2016-07-26 21:01:27 +02:00
</Link>
2016-07-07 23:23:18 +02:00
</li>
</ul>
</div>
</div>
<ul className="nav" styleName="nav">
2016-07-07 23:23:18 +02:00
<li>
<Link to="/discover" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.discover"])} styleName={isActive.discover}>
2016-07-07 23:23:18 +02:00
<span className="glyphicon glyphicon-globe" aria-hidden="true"></span>
2016-07-30 16:01:42 +02:00
<span className="hidden-md">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.discover"]} />
</span>
2016-07-07 23:23:18 +02:00
</Link>
</li>
<li>
<Link to="/browse" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browse"])} styleName={isActive.browse}>
2016-07-07 23:23:18 +02:00
<span className="glyphicon glyphicon-headphones" aria-hidden="true"></span>
2016-07-30 16:01:42 +02:00
<span className="hidden-md">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.browse"]} />
</span>
2016-07-07 23:23:18 +02:00
</Link>
2016-07-30 16:01:42 +02:00
<ul className="nav text-center" styleName="nav-list">
2016-07-26 21:01:27 +02:00
<li>
<Link to="/artists" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseArtists"])} styleName={isActive.artists}>
2016-07-26 21:01:27 +02:00
<span className="glyphicon glyphicon-user" aria-hidden="true"></span>
<span className="sr-only text-capitalize">
2016-07-29 00:50:08 +02:00
<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
</span>
<span className="hidden-md text-capitalize">
2016-07-29 00:50:08 +02:00
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
</span>
2016-07-26 21:01:27 +02:00
</Link>
</li>
<li>
<Link to="/albums" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseAlbums"])} styleName={isActive.albums}>
2016-07-26 21:01:27 +02:00
<span className="glyphicon glyphicon-cd" aria-hidden="true"></span>
<span className="sr-only text-capitalize">
<FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} />
</span>
<span className="hidden-md text-capitalize">
2016-07-29 00:50:08 +02:00
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} />
</span>
2016-07-26 21:01:27 +02:00
</Link>
</li>
<li>
<Link to="/songs" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseSongs"])} styleName={isActive.songs}>
2016-07-26 21:01:27 +02:00
<span className="glyphicon glyphicon-music" aria-hidden="true"></span>
<span className="sr-only text-capitalize">
<FormattedMessage {...sidebarLayoutMessages["app.common.track"]} values={{itemCount: 42}} />
2016-07-29 00:50:08 +02:00
</span>
<span className="hidden-md text-capitalize">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.track"]} values={{itemCount: 42}} />
2016-07-29 00:50:08 +02:00
</span>
2016-07-26 21:01:27 +02:00
</Link>
</li>
2016-07-07 23:23:18 +02:00
</ul>
</li>
<li>
<Link to="/search" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.search"])} styleName={isActive.search}>
2016-07-07 23:23:18 +02:00
<span className="glyphicon glyphicon-search" aria-hidden="true"></span>
2016-07-30 16:01:42 +02:00
<span className="hidden-md">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.search"]} />
</span>
2016-07-07 23:23:18 +02:00
</Link>
</li>
</ul>
</nav>
</div>
<div className="col-sm-11 col-sm-offset-1 col-md-10 col-md-offset-2" styleName="main-panel">
2016-07-07 23:23:18 +02:00
{this.props.children}
</div>
</div>
);
}
}
SidebarLayoutIntl.propTypes = {
children: PropTypes.node,
intl: intlShape.isRequired
};
export default injectIntl(CSSModules(SidebarLayoutIntl, css));