Improve sidebar

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 app/dist/eventsourcePolyfill.js
 app/dist/webpackHotMiddlewareClient.js
+app/dist/*.hot-update.json
+app/dist/*.hot-update.js

TODO

@@ -7,9 +7,7 @@
 # CSS
     * Sidebar responsiveness
     * Songs on iPhone 5
-    * Set sidebar .active
     * /artist/:id and /album/:id arts in responsive view
-    * Scroll horizontal sidebar
     * Move CSS in modules
         => https://github.com/gajus/react-css-modules
 

app/components/layouts/Sidebar.jsx

@@ -3,46 +3,86 @@ import { IndexLink, Link} from "react-router";
 
 export default class SidebarLayout extends Component {
     render () {
+        const isActive = {
+            discover: (this.props.location.pathname == "/discover") ? "active" : "",
+            browse: (this.props.location.pathname == "/browse") ? "active" : "",
+            artists: (this.props.location.pathname == "/artists") ? "active" : "",
+            albums: (this.props.location.pathname == "/albums") ? "active" : "",
+            songs: (this.props.location.pathname == "/songs") ? "active" : "",
+            search: (this.props.location.pathname == "/search") ? "active" : ""
+        };
         return (
             <div>
-                <div className="col-sm-3 col-md-2 sidebar hidden-xs">
+                <div className="col-sm-1 col-md-2 sidebar hidden-xs">
-                    <h1 className="text-center"><IndexLink to="/"><img alt="A" src="./app/assets/img/ampache-blue.png"/>mpache</IndexLink></h1>
+                    <h1 className="text-center">
+                        <IndexLink to="/">
+                            <img alt="A" src="./app/assets/img/ampache-blue.png"/>
+                            <span className="hidden-sm">mpache</span>
+                        </IndexLink>
+                    </h1>
                     <nav aria-label="Main navigation menu">
                         <div className="navbar text-center icon-navbar">
                             <div className="container-fluid">
                                 <ul className="nav navbar-nav icon-navbar-nav">
                                     <li>
-                                        <Link to="/" title="Home"><span className="glyphicon glyphicon-home" aria-hidden="true"></span> <span className="sr-only">Home</span></Link>
+                                        <Link to="/" title="Home">
+                                            <span className="glyphicon glyphicon-home" aria-hidden="true"></span>
+                                            <span className="sr-only">Home</span>
+                                        </Link>
                                     </li>
                                     <li>
-                                        <Link to="/settings" title="Settings"><span className="glyphicon glyphicon-wrench" aria-hidden="true"></span> <span className="sr-only">Settings</span></Link>
+                                        <Link to="/settings" title="Settings">
+                                            <span className="glyphicon glyphicon-wrench" aria-hidden="true"></span>
+                                            <span className="sr-only">Settings</span>
+                                        </Link>
                                     </li>
                                     <li>
-                                        <Link to="/logout" title="Logout"><span className="glyphicon glyphicon-off" aria-hidden="true"></span> <span className="sr-only">Logout</span></Link>
+                                        <Link to="/logout" title="Logout">
+                                            <span className="glyphicon glyphicon-off" aria-hidden="true"></span>
+                                            <span className="sr-only">Logout</span>
+                                        </Link>
                                     </li>
                                 </ul>
                             </div>
                         </div>
                         <ul className="nav nav-sidebar">
                             <li>
-                                <Link to="/discover" title="Discover">
+                                <Link to="/discover" title="Discover" className={isActive.discover}>
                                     <span className="glyphicon glyphicon-globe" aria-hidden="true"></span>
                                     <span className="hidden-sm"> Discover</span>
                                 </Link>
                             </li>
                             <li>
-                                <Link to="/browse" title="Browse">
+                                <Link to="/browse" title="Browse" className={isActive.browse}>
                                     <span className="glyphicon glyphicon-headphones" aria-hidden="true"></span>
                                     <span className="hidden-sm"> Browse</span>
                                 </Link>
-                                <ul className="nav nav-sidebar text-center">
+                                <ul className="nav nav-list text-center">
-                                    <li><Link to="/artists" title="Browse artists"><span className="glyphicon glyphicon-user" aria-hidden="true"></span> Artists</Link></li>
+                                    <li>
-                                    <li><Link to="/albums" title="Browse albums"><span className="glyphicon glyphicon-cd" aria-hidden="true"></span> Albums</Link></li>
+                                        <Link to="/artists" title="Browse artists" className={isActive.artists}>
-                                    <li><Link to="/songs" title="Browse songs"><span className="glyphicon glyphicon-music" aria-hidden="true"></span> Songs</Link></li>
+                                            <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
+                                            <span className="sr-only">Artists</span>
+                                            <span className="hidden-sm"> Artists</span>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link to="/albums" title="Browse albums" className={isActive.albums}>
+                                            <span className="glyphicon glyphicon-cd" aria-hidden="true"></span>
+                                            <span className="sr-only">Albums</span>
+                                            <span className="hidden-sm"> Albums</span>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link to="/songs" title="Browse songs" className={isActive.songs}>
+                                            <span className="glyphicon glyphicon-music" aria-hidden="true"></span>
+                                            <span className="sr-only">Songs</span>
+                                            <span className="hidden-sm"> Songs</span>
+                                        </Link>
+                                    </li>
                                 </ul>
                             </li>
                             <li>
-                                <Link to="/search" title="Search">
+                                <Link to="/search" title="Search" className={isActive.search}>
                                     <span className="glyphicon glyphicon-search" aria-hidden="true"></span>
                                     <span className="hidden-sm"> Search</span>
                                 </Link>
@@ -51,7 +91,7 @@ export default class SidebarLayout extends Component {
                     </nav>
                 </div>
 
-                <div className="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main-panel">
+                <div className="col-sm-11 col-sm-offset-1 col-md-10 col-md-offset-2 main-panel">
                     {this.props.children}
                 </div>
             </div>

app/dist/fix.ie9.js

@@ -65,7 +65,7 @@
 /******/ 	}
 /******/ 	
 /******/ 	var hotApplyOnUpdate = true;
-/******/ 	var hotCurrentHash = "b6652854710cfe2cd142"; // eslint-disable-line no-unused-vars
+/******/ 	var hotCurrentHash = "cf1ba667e264da876286"; // eslint-disable-line no-unused-vars
 /******/ 	var hotCurrentModuleData = {};
 /******/ 	var hotCurrentParents = []; // eslint-disable-line no-unused-vars
 /******/ 	

app/dist/style.css

@@ -6795,8 +6795,12 @@ button.close {
 }
 
 /* Sidebar navigation */
+.sidebar .navbar {
+    border: none;
+}
+
 .nav-sidebar {
-    margin-right: -21px; /* 20px padding + 1px border */
+    margin-right: -20px;
     margin-bottom: 20px;
     margin-left: -20px;
 }
@@ -6806,12 +6810,42 @@ button.close {
     padding-left: 20px;
 }
 
+@media (max-width: 991px) {
+    .sidebar, .sidebar .navbar .container-fluid {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+
+    .sidebar .nav-list {
+        text-align: right;
+    }
+
+    .sidebar .nav-sidebar > li > a {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    .sidebar .nav-list > li > a {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
 .nav-sidebar .nav-sidebar {
     margin-bottom: 0;  /* No margin bottom for nested nav-sidebar. */
 }
 
-.nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus, .nav > li > a:hover, .nav > li > a:focus {
+.nav-sidebar > .active > a:focus, .nav > li > a:focus {
     color: #fff;
+    background-color: transparent;
+}
+
+.nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav > li > a:hover {
+    color: #fff;
+    background-color: #222;
+}
+
+.nav > li > a.active {
     background-color: #222;
 }
 

app/styles/ampache.css

@@ -35,8 +35,12 @@
 }
 
 /* Sidebar navigation */
+.sidebar .navbar {
+    border: none;
+}
+
 .nav-sidebar {
-    margin-right: -21px; /* 20px padding + 1px border */
+    margin-right: -20px;
     margin-bottom: 20px;
     margin-left: -20px;
 }
@@ -46,16 +50,46 @@
     padding-left: 20px;
 }
 
+@media (max-width: 991px) {
+    .sidebar,
+    .sidebar .navbar .container-fluid {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+
+    .sidebar .nav-list {
+        text-align: right;
+    }
+
+    .sidebar .nav-sidebar > li > a {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    .sidebar .nav-list > li > a {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
 .nav-sidebar .nav-sidebar {
     margin-bottom: 0;  /* No margin bottom for nested nav-sidebar. */
 }
 
-.nav-sidebar > .active > a,
-.nav-sidebar > .active > a:hover,
 .nav-sidebar > .active > a:focus,
-.nav > li > a:hover,
 .nav > li > a:focus {
     color: #fff;
+    background-color: transparent;
+}
+
+.nav-sidebar > .active > a,
+.nav-sidebar > .active > a:hover,
+.nav > li > a:hover {
+    color: #fff;
+    background-color: #222;
+}
+
+.nav > li > a.active {
     background-color: #222;
 }
 

package.json

@@ -8,7 +8,7 @@
   "repository": "git+https://github.com/Phyks/ampache_react.git",
   "scripts": {
     "build": "./node_modules/webpack/bin/webpack.js --progress",
-    "serve": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress  --hot"
+    "watch": "./node_modules/webpack/bin/webpack.js --progress  --watch"
   },
   "dependencies": {
     "babel-polyfill": "^6.9.1",

webpack.config.base.js

@@ -16,9 +16,9 @@ module.exports = {
     },
 
     output: {
-        path: path.join(__dirname, "app/dist"),
+        path: path.join(__dirname, "app/dist/"),
         filename: "[name].js",
-        publicPath: "/app/dist"
+        publicPath: "./"
     },
 
     module: {