???

frontend/css/styles.css

@@ -1,12 +1,15 @@
 body, html{
   padding: 0px;
   margin: 0px;
-  width: 100%;
   height: 100%;
+  width: 100%
 }
 
+
 .navbar{
   border-radius: 0px!important;
+  border-bottom: 1px solid black;
+  margin-bottom: 0px!important;
 }
 
 .navbar-blue{
@@ -15,18 +18,17 @@ body, html{
 
 .navbar-brand{
   padding-top: 14px;
-  width: 200px
+  width: 225px
 }
 
+.main-content{
+  height: 90%;
+  margin-right: 0px
+}
 /* Side Navigation */
 
 @media(min-width:768px) {
   .side-nav {
-    position: fixed;
-    top: 51px;
-    left: 225px;
-    width: 225px;
-    margin-left: -225px;
     border: none;
     border-radius: 0;
     overflow-y: auto;
@@ -35,10 +37,15 @@ body, html{
     overflow-x: hidden;
     padding-bottom: 40px;
     color: white;
+    height: 100%;
+  }
+
+  .side-nav>li{
+    width: 100%;
   }
 
   .side-nav>li>a {
-      width: 225px;
+      width: 100%;
       color: #9D9D9D;
   }
 
@@ -50,6 +57,10 @@ body, html{
   }
 }
 
+.sidebar{
+  height: 100%;
+  padding-right: 0px;
+}
 .side-nav>li>ul {
     padding: 0;
 }
@@ -64,3 +75,21 @@ body, html{
 .side-nav>li>ul>li>a:hover {
     color: #fff;
 }
+
+.content-col{
+  padding-left: 14%;
+}
+
+.player-skin{
+  background-color: #F8F8F8;
+  border-color: #E7E7E7;
+}
+
+.player-position{
+  position: fixed;
+  width: 100%;
+  margin-left: -15px;
+  padding-left: 0px;
+  background-color: #BEC3CC;
+}
+}

frontend/index.html

@@ -58,24 +58,38 @@
 			</div><!-- /.navbar-collapse -->
 		  </div><!-- /.container-fluid -->
 		</nav>
-		<div class="collapse navbar-collapse navbar-ex1-collapse">
-            <ul class="nav navbar-nav side-nav">
-                <li class="active">
-                    <a href="#"><i class="fa fa-volume-up"></i> Now Playing</a>
-                </li>
-                <li>
-                    <a href="#"><i class="fa fa-bars"></i> Queue</a>
-                </li>
-                <li>
-                    <a href="#"><i class="fa fa-folder"></i> Folders</a>
-                </li>
-                <li>
-                    <a href="#"><i class="fa fa-bar-chart-o"></i> Statistics</a>
-                </li>
-            </ul>
-    	</div>
-		<div class="container-fluid">
-			<div ng-view=""></div>
+		<div class="row main-content">
+			<div class="col-md-2 sidebar">
+				<ul class="nav navbar-nav side-nav">
+	                <li class="active">
+	                    <a href="#"><i class="fa fa-volume-up"></i> Now Playing</a>
+	                </li>
+	                <li>
+	                    <a href="#"><i class="fa fa-bars"></i> Queue</a>
+	                </li>
+	                <li>
+	                    <a href="#"><i class="fa fa-folder"></i> Folders</a>
+	                </li>
+	                <li>
+	                    <a href="#"><i class="fa fa-asterisk"></i> Recently Added</a>
+	                </li>
+	                <li>
+	                    <a href="#"><i class="fa fa-bar-chart-o"></i> Statistics</a>
+	                </li>
+            	</ul>
+			</div>
+			<div class="col-md-10">
+				<ng-include src="'modules/player/player.html'"></ng-include>		
+				<div ng-view=""></div>
+			</div>
 		</div>
-	</body>
+		<nav class="navbar navbar-inverse navbar-blue navbar-fixed-bottom">
+			  <div class="container">
+			    ...
+			  </div>
+			</nav>
+	<!-- 	<div class="collapse navbar-collapse navbar-ex1-collapse">
+            
+    	</div>
+  -->  	</body>
 </html>

frontend/modules/player/player.html

@@ -0,0 +1,9 @@
+<div class="player-position">
+	<nav class="navbar navbar-default player-skin">
+		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+	      <ul class="nav navbar-nav">
+	      	<li>button</li>
+	      </ul>
+	    </div><!-- /.navbar-collapse -->
+	</nav>
+</div>