worked on playlist view / switching mechanism

app/.meteor/versions

@@ -1,4 +1,4 @@
-oraccounts-base@1.2.2
+accounts-base@1.2.2
 accounts-facebook@1.0.6
 accounts-github@1.0.6
 accounts-oauth@1.1.8

app/client/scripts/onCreated.js

@@ -346,23 +346,46 @@ Template.room.onCreated(function () {
         }
     });
     Meteor.setTimeout(function(){
-        $("#chat-slideout").on("click", function(e){
-            $("#chat-slideout").attr("disabled", true);
+        $("#playlist-slideout").on("click", function(){
+            if($("#chat-slide-out").css("right") === "0px"){
+                $("#chat-slideout").sideNav("hide");
+            }
+            var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
+            $(".container").css("margin-right", "370px")
+            if($("#playlist-slide-out").css("right") === "0px"){
+                $(".container").css("margin-right", marginRightWidth);
+            }
+        });
+        $("#chat-slideout").on("click", function(){
+            if($("#playlist-slide-out").css("right") === "0px"){
+                $("#playlist-slideout").sideNav("hide");
+            }
             var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
             $(".chat-ul").scrollTop(1000000);
             $(".container").css("margin-right", "370px")
-            if($("#slide-out").css("right") === "0px"){
+            if($("#chat-slide-out").css("right") === "0px"){
                 $(".container").css("margin-right", marginRightWidth);
             }
         });
-        $("body").on("click", function(){
+        $("body").on("click", function(e){
+            console.log(e.target);
             var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
-            var interval = Meteor.setInterval(function(){
-                if($("#slide-out").css("right") < "0px"){
-                    $(".container").css("margin-right", marginRightWidth);
-                    Meteor.clearInterval(interval);
-                }
-            }, 10);
+            if($("#playlist-slide-out").css("right") === "0px"){
+                var interval = Meteor.setInterval(function(){
+                    if($("#playlist-slide-out").css("right") < "0px"){
+                        $(".container").css("margin-right", marginRightWidth);
+                        Meteor.clearInterval(interval);
+                    }
+                }, 10);
+            }
+            if($("#chat-slide-out").css("right") === "0px"){
+                var interval = Meteor.setInterval(function(){
+                    if($("#chat-slide-out").css("right") < "0px"){
+                        $(".container").css("margin-right", marginRightWidth);
+                        Meteor.clearInterval(interval);
+                    }
+                }, 10);
+            }
         });
         $(window).on("resize", function(){
             var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";

app/client/stylesheets/app.css

@@ -297,16 +297,15 @@ hr{
 }
 
 #sidenav-overlay{
-    background-color: initial !important;
-    z-index: 0 !important;
+    display: none
 }
 
-.room-slideout{
+.side-nav{
     top: 64px;
     height: 100%;
 }
 
-.room-slideout h5{
+.side-nav h5{
     text-align: center;
     background-color: #028A77 !important;
     margin: 0;

app/client/templates/room.html

@@ -14,9 +14,10 @@
                     </ul>
                     <span class="brand-logo center">{{type}}</span>
                     <ul class="right hide-on-med-and-down">
-                        <li><a href="#"><i class="material-icons">queue_music</i></a></li>
+                        <!-- <li><a href="#"><i class="material-icons">queue_music</i></a></li> -->
                         <!-- <li><a href="#" data-activates="chat" class="dropdown-button"><i class="material-icons">chat</i></a></li> -->
-                        <li><a href="#" id="chat-slideout" data-activates="slide-out" class="header-collapse"><i class="material-icons">chat</i></a></li>
+                        <li><a href="#" id="playlist-slideout" data-activates="playlist-slide-out" class="header-collapse"><i class="material-icons">queue_music</i></a></li>
+                        <li><a href="#" id="chat-slideout" data-activates="chat-slide-out" class="header-collapse"><i class="material-icons">chat</i></a></li>
                     </ul>
                     <div id='chat' class='dropdown-content right'>
                         <ul id="chat-ul">
@@ -285,7 +286,7 @@
                 </div>
             </div>
         </main>
-        <div id="slide-out" class="side-nav room-slideout">
+        <div id="chat-slide-out" class="side-nav">
             <h5>Chat</h5>
             <ul class="chat-ul">
                 {{#each globalChat}}
@@ -310,6 +311,9 @@
                 <a id="submit" class="waves-effect waves-light btn">Send</a>
             </div>
         </div>
+        <div id="playlist-slide-out" class="side-nav">
+            <h5>Playlist</h5>
+        </div>
         <ul id='admin-dropdown' style="background-color: #00bfa5 !important; display: none">
             <li><a><i class="material-icons">pause</i></a></li>
             <li><a><i class="material-icons">skip_next</i></a></li>
@@ -334,7 +338,11 @@
                 belowOrigin: true
             });
             $('select').material_select();
-            $(".header-collapse").sideNav({
+            $("#chat-slideout").sideNav({
+                menuWidth: 350,
+                edge: 'right'
+            });
+            $("#playlist-slideout").sideNav({
                 menuWidth: 350,
                 edge: 'right'
             });