2016-08-10 21:36:11 +02:00
|
|
|
// NPM imports
|
2016-07-28 23:14:52 +02:00
|
|
|
import React, { Component, PropTypes } from "react";
|
2016-07-07 23:23:18 +02:00
|
|
|
import { IndexLink, Link} from "react-router";
|
2016-07-29 23:57:21 +02:00
|
|
|
import CSSModules from "react-css-modules";
|
2016-07-28 23:14:52 +02:00
|
|
|
import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl";
|
2016-07-07 23:23:18 +02:00
|
|
|
|
2016-08-10 21:36:11 +02:00
|
|
|
// Local imports
|
2016-07-28 23:14:52 +02:00
|
|
|
import { messagesMap } from "../../utils";
|
2016-08-10 21:36:11 +02:00
|
|
|
|
|
|
|
// Other components
|
2016-08-10 23:50:23 +02:00
|
|
|
import WebPlayer from "../../views/WebPlayer";
|
2016-08-10 21:36:11 +02:00
|
|
|
|
|
|
|
// Translations
|
2016-07-28 23:14:52 +02:00
|
|
|
import commonMessages from "../../locales/messagesDescriptors/common";
|
|
|
|
import messages from "../../locales/messagesDescriptors/layouts/Sidebar";
|
|
|
|
|
2016-08-10 21:36:11 +02:00
|
|
|
// Styles
|
2016-07-29 23:57:21 +02:00
|
|
|
import css from "../../styles/layouts/Sidebar.scss";
|
|
|
|
|
2016-08-10 21:36:11 +02:00
|
|
|
// Define translations
|
2016-07-28 23:14:52 +02:00
|
|
|
const sidebarLayoutMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages)));
|
|
|
|
|
2016-08-10 21:36:11 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Sidebar layout component, putting children next to the sidebar menu.
|
|
|
|
*/
|
2016-07-29 23:57:21 +02:00
|
|
|
class SidebarLayoutIntl extends Component {
|
2016-08-10 23:50:23 +02:00
|
|
|
render() {
|
2016-07-28 23:14:52 +02:00
|
|
|
const { formatMessage } = this.props.intl;
|
2016-08-10 21:36:11 +02:00
|
|
|
|
|
|
|
// Check active links
|
2016-07-26 21:01:27 +02:00
|
|
|
const isActive = {
|
2016-07-29 23:57:21 +02:00
|
|
|
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",
|
2016-08-10 23:50:23 +02:00
|
|
|
search: (this.props.location.pathname == "/search") ? "active" : "link",
|
2016-07-26 21:01:27 +02:00
|
|
|
};
|
2016-08-10 21:36:11 +02:00
|
|
|
|
|
|
|
// Hamburger collapsing function
|
2016-08-03 15:44:29 +02:00
|
|
|
const collapseHamburger = function () {
|
|
|
|
$("#main-navbar").collapse("hide");
|
|
|
|
};
|
2016-08-10 21:36:11 +02:00
|
|
|
|
2016-07-07 23:23:18 +02:00
|
|
|
return (
|
|
|
|
<div>
|
2016-08-04 15:28:07 +02:00
|
|
|
<div className="row">
|
|
|
|
<div className="col-xs-12 col-md-1 col-lg-2 sidebar" styleName="sidebar">
|
|
|
|
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false" styleName="toggle">
|
|
|
|
<span className="sr-only">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.toggleNavigation"]} />
|
|
|
|
</span>
|
|
|
|
<span className="icon-bar" styleName="icon-bar"></span>
|
|
|
|
<span className="icon-bar" styleName="icon-bar"></span>
|
|
|
|
<span className="icon-bar" styleName="icon-bar"></span>
|
|
|
|
</button>
|
|
|
|
<h1 className="text-center" styleName="title">
|
|
|
|
<IndexLink styleName="link" to="/" styleName="link" onClick={collapseHamburger}>
|
|
|
|
<img alt="A" src="./img/ampache-blue.png" styleName="imgTitle" />
|
|
|
|
<span className="hidden-md">mpache</span>
|
|
|
|
</IndexLink>
|
|
|
|
</h1>
|
|
|
|
<nav className="collapse" styleName="collapse" aria-label={formatMessage(sidebarLayoutMessages["app.sidebarLayout.mainNavigationMenu"])} id="main-navbar" role="navigation">
|
|
|
|
<div className="navbar text-center" styleName="icon-navbar">
|
|
|
|
<div className="container-fluid" styleName="container-fluid">
|
|
|
|
<ul className="nav navbar-nav" styleName="nav">
|
|
|
|
<li>
|
|
|
|
<Link to="/" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.home"])} styleName="link" onClick={collapseHamburger}>
|
|
|
|
<span className="glyphicon glyphicon-home" aria-hidden="true"></span>
|
|
|
|
<span className="sr-only">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.home"]} />
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<Link to="/settings" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.settings"])} styleName="link" onClick={collapseHamburger}>
|
|
|
|
<span className="glyphicon glyphicon-wrench" aria-hidden="true"></span>
|
|
|
|
<span className="sr-only">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.settings"]} />
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<Link to="/logout" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.logout"])} styleName="link" onClick={collapseHamburger}>
|
|
|
|
<span className="glyphicon glyphicon-off" aria-hidden="true"></span>
|
|
|
|
<span className="sr-only">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.logout"]} />
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
2016-07-07 23:23:18 +02:00
|
|
|
</div>
|
2016-08-04 15:28:07 +02:00
|
|
|
<ul className="nav" styleName="nav">
|
|
|
|
<li>
|
|
|
|
<Link to="/discover" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.discover"])} styleName={isActive.discover} onClick={collapseHamburger}>
|
|
|
|
<span className="glyphicon glyphicon-globe" aria-hidden="true"></span>
|
|
|
|
<span className="hidden-md">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.discover"]} />
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<Link to="/browse" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browse"])} styleName={isActive.browse} onClick={collapseHamburger}>
|
|
|
|
<span className="glyphicon glyphicon-headphones" aria-hidden="true"></span>
|
|
|
|
<span className="hidden-md">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.browse"]} />
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
<ul className="nav text-center" styleName="nav-list">
|
|
|
|
<li>
|
|
|
|
<Link to="/artists" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseArtists"])} styleName={isActive.artists} onClick={collapseHamburger}>
|
|
|
|
<span className="glyphicon glyphicon-user" aria-hidden="true"></span>
|
|
|
|
<span className="sr-only text-capitalize">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
|
|
|
|
</span>
|
|
|
|
<span className="hidden-md text-capitalize">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<Link to="/albums" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseAlbums"])} styleName={isActive.albums} onClick={collapseHamburger}>
|
|
|
|
<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">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} />
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<Link to="/songs" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseSongs"])} styleName={isActive.songs} onClick={collapseHamburger}>
|
|
|
|
<span className="glyphicon glyphicon-music" aria-hidden="true"></span>
|
|
|
|
<span className="sr-only text-capitalize">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.common.track"]} values={{itemCount: 42}} />
|
|
|
|
</span>
|
|
|
|
<span className="hidden-md text-capitalize">
|
|
|
|
<FormattedMessage {...sidebarLayoutMessages["app.common.track"]} values={{itemCount: 42}} />
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
2016-08-12 00:57:12 +02:00
|
|
|
<WebPlayer location={this.props.location} />
|
2016-08-04 15:28:07 +02:00
|
|
|
</div>
|
2016-07-07 23:23:18 +02:00
|
|
|
</div>
|
|
|
|
|
2016-08-04 15:28:07 +02:00
|
|
|
<div className="col-xs-12 col-md-11 col-md-offset-1 col-lg-10 col-lg-offset-2 main-panel" styleName="main-panel" onClick={collapseHamburger} role="main">
|
2016-07-07 23:23:18 +02:00
|
|
|
{this.props.children}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2016-07-28 23:14:52 +02:00
|
|
|
SidebarLayoutIntl.propTypes = {
|
|
|
|
children: PropTypes.node,
|
2016-08-10 23:50:23 +02:00
|
|
|
intl: intlShape.isRequired,
|
2016-07-28 23:14:52 +02:00
|
|
|
};
|
2016-07-29 23:57:21 +02:00
|
|
|
export default injectIntl(CSSModules(SidebarLayoutIntl, css));
|