switching between torrents and feeds

css/app.css

@@ -408,7 +408,6 @@ a {
   bottom: 0;
   top: 110px;
   right: 0;
-  overflow: hidden;
 }
 .main_content .name {
   font-size: 32px;

css/app.styl

@@ -422,7 +422,7 @@ $bottom_height = 30px
     // padding-bottom $bottom_height + 10
     top $top_height - 20px
     right 0
-    overflow hidden
+    // overflow hidden
 
     .name
         font-size 32px

index.html

@@ -144,8 +144,8 @@ <h2 class="collapsable">Labels<span class="toggle"></span></h2>
 
 			<section class="feeds" data-section="feeds">
 				<h2 class="collapsable">Feeds<span class="toggle"></span></h2>
-				<ul>
-					<li class="feed"><span class="img"></span><a>No Feeds</a></li>
+				<ul class="feeds">
+					<li><span class="img"></span><a>No Feeds</a></li>
 				</ul>
 			</section>
 		</div>

js/app/app.js

@@ -102,6 +102,8 @@ var MainApp = Backbone.View.extend({
             product: 'uTorrent'
         })
 
+        this.context = 'torrents'
+
         // btapp.on('all', console.log, console)
 
         var message = {
@@ -152,6 +154,47 @@ var MainApp = Backbone.View.extend({
         })
     },
 
+    setContext: function(context)
+    {
+        console.log(context)
+        if(this.context === context)
+            return
+
+        var current = $('#' + this.context)
+        var next = $('#' + context)
+
+        this.context = context
+
+        current.children()
+            .animate({
+                opacity: 0,
+                translateX: -10
+            }, 200, function()
+            {
+                $(this).parent().addClass('hidden')
+            })
+
+        next.removeClass('hidden')
+            .children('.name')
+                .css({
+                    opacity: 0,
+                    translateX: 30
+                }).animate({
+                    opacity: 1,
+                    translateX: 0
+                }, 300).end()
+            .children('.content')
+                .css({
+                    opacity: 0,
+                    translateX: 30,
+                    scale: 0.98
+                }).delay(100).animate({
+                    opacity: 1,
+                    translateX: 0,
+                    scale: 1
+                }, 300).end()
+    },
+
     calculateTotals: function(_this)
     {
         var up_el = $('#up_speed')
@@ -252,7 +295,7 @@ var FeedTorrentRow = Backbone.View.extend({
     addTorrent: function(e)
     {
         e.preventDefault()
-        console.log(this.model.get('properties').get('url'))
+
         btapp.get('add').torrent(this.model.get('properties').get('url'))
     }
 })
@@ -505,7 +548,9 @@ var TorrentsList = Backbone.View.extend(
 
 var Sidebar = Backbone.View.extend({
     events: {
-        'click ul:not(.feed) a': 'filterTorrents'
+        'click ul:not(.feeds) a': 'filterTorrents',
+        'click ul': 'setContext',
+        'click ul a': 'setActual'
     },
 
     initialize: function()
@@ -515,15 +560,32 @@ var Sidebar = Backbone.View.extend({
         })
     },
 
-    filterTorrents: function(e)
+    setContext: function(e, triggered)
     {
+        var context = $(e.currentTarget).hasClass('feeds') ? 'feeds' : 'torrents'
+
+        if(triggered)
+            return
+
         if(!this.app)
             this.app = App
 
-        e.preventDefault()
+        this.app.setContext(context)
+    },
+
+    setActual: function(e)
+    {
+        this.$('.actual').removeClass('actual')
+        $(e.currentTarget).addClass('actual')
+    },
 
-        this.$el.find('.actual').removeClass('actual')
-        var el = $(e.currentTarget).addClass('actual')
+    filterTorrents: function(e, triggered)
+    {
+        if(!this.app)
+            this.app = App
+
+        e.preventDefault()
+        var el = $(e.currentTarget)
 
         var section = $(el).closest('section').data('section')
         var elems