Add side nav toggle function for small screen

media/css/seahub.css

@@ -657,6 +657,20 @@ textarea:-moz-placeholder {/* for FF */
         border-right:1px solid #eee;
     }
 }
+@media (max-width: 767px) {
+    .side-tabnav {
+        background: #f8f8f8;
+        width:300px;
+        position:fixed;
+        top:0;
+        bottom:0;
+        z-index:1;
+        padding:20px;
+        overflow-x:hidden;
+        overflow-y:auto;
+        border-right:1px solid #eee;
+    }
+}
 .side-tabnav .hd {
     margin-bottom:0.5em;
 }

seahub/templates/base_for_backbone.html

@@ -43,7 +43,7 @@
         <div id="header" role="banner" class="navbar navbar-fixed-top">
             <div id="header-inner">
                 {% block notice_panel %}{% endblock %}
-                <a href="{{ SITE_ROOT }}" id="logo" class="fleft">
+                <a href="{{ SITE_ROOT }}" id="logo" class="hidden-sm-down fleft">
                     {% if seacloud_mode %}
                     <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
                     {% else %}
@@ -51,6 +51,8 @@
                     {% endif %}
                 </a>
 
+                <button class="sf2-icon-list-view hidden-md-up" title="Side Nav Menu" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></button>
+
                 <div class="fright">
                 {% if has_file_search %}
                     {% include 'snippets/search_form.html' %}

seahub/templates/js/templates.html

@@ -606,6 +606,7 @@
 </script>
 
 <script type="text/template" id="side-nav-tmpl">
+    <a href="#" class="sf2-icon-x2 fright hidden-md-up js-close-side-nav" title="{% trans "Close" %}" aria-label="{% trans "Close" %}"></a>
     <h3 class="hd">{% trans "Files" %}</h3>
     <ul class="side-tabnav-tabs">
         {% if user.permissions.can_add_repo %}

static/scripts/app/views/side-nav.js

@@ -28,7 +28,14 @@ define([
                 'can_add_repo': app.pageOptions.can_add_repo,
             };
             this.render();
-            this.$el.show();
+            if ($(window).width() >= 768) {
+                this.$el.show();
+            }
+            var _this = this;
+            $('#js-toggle-side-nav').click(function() {
+                _this.show();
+                return false;
+            });
         },
 
         render: function() {
@@ -38,7 +45,9 @@ define([
 
         events: {
             'click #group-nav a:first': 'toggleGroupList',
-            'click #enable-mods': 'enableMods'
+            'click #enable-mods': 'enableMods',
+            'click .js-close-side-nav': 'closeNav',
+            'click li > a': 'visitLink'
         },
 
         toggleGroupList: function() {
@@ -139,7 +148,26 @@ define([
                 error: function() {
                 }
             });
-        }
+        },
+
+        show: function() {
+            this.$el.show();
+        },
+
+        closeNav: function() {
+            this.$el.hide();
+            return false;
+        },
+
+        visitLink: function(event) {
+            if ($(window).width() < 768) {
+                if ($(event.target).attr('href') !== "#") {
+                    // except for groups toggle link
+                    this.$el.hide();
+                }
+            }
+            return true;
+        },
 
     });