Collapse menu

3 files changed, 32 insertions, 6 deletions

diff --git a/css/businessadmin.css b/css/businessadmin.css
index da70bf8..60ce407 100644
--- a/css/businessadmin.css
+++ b/css/businessadmin.css
@@ -94,4 +94,10 @@ td .btn.btn-circle:last-child {
 
 .table-responsive {
 	overflow-x: auto;
+}
+
+#collapse-menu {
+    margin-right: 16px;
+    margin-top: 16px;
+    float: right;
 }
\ No newline at end of file
diff --git a/js/businessadmin.js b/js/businessadmin.js
index 956b371..34b20fb 100644
--- a/js/businessadmin.js
+++ b/js/businessadmin.js
@@ -82,4 +82,22 @@ $(document).ready(function(){
         $(this).parent().find('.mixitup-sort').removeClass('active sorting_asc sorting_desc').addClass('sorting');
         $(this).addClass('active sorting_' + sorting).removeClass('sorting');
     });
+
+    // Collapse menu 
+    var collapsed = false;
+    $('#collapse-menu').click(function(){
+        if (!collapsed)
+            $('.nav-title').hide();
+        $('.sidebar').animate({
+            width: collapsed ? 250 : 50
+        }, 200);
+        $('#page-wrapper').animate({
+            marginLeft: collapsed ? 250 : 50
+        }, 200);
+        if (collapsed)
+            $('.nav-title').delay(200).queue(function(){$(this).show()});
+        $(this).find('i.fa').removeClass('fa-caret-square-o-left fa-caret-square-o-right').addClass('fa-caret-square-o-' + (collapsed ? 'left' : 'right'));
+        collapsed = !collapsed;
+        return true;
+    });
 });
\ No newline at end of file
diff --git a/nav.php b/nav.php
index 257c9f2..bf5b16a 100644
--- a/nav.php
+++ b/nav.php
@@ -94,24 +94,26 @@
         <div class="sidebar-nav navbar-collapse">
             <ul class="nav" id="side-menu">
                 <li>
-                    <a <?php if($_page=='/') echo 'class="active"'; ?> href="<?=constants::url_internal?>/"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
+                    <a <?php if($_page=='/') echo 'class="active"'; ?> href="<?=constants::url_internal?>/"><i class="fa fa-dashboard fa-fw"></i> <span class="nav-title">Dashboard</span></a>
                 </li>
                 <li>
-                    <a <?php if($_page=='/clients') echo 'class="active"'; ?> href="<?=constants::url_internal?>/clients"><i class="fa fa-institution fa-fw"></i> Clients</a>
+                    <a <?php if($_page=='/clients') echo 'class="active"'; ?> href="<?=constants::url_internal?>/clients"><i class="fa fa-institution fa-fw"></i> <span class="nav-title">Clients</span></a>
                 </li>
                 <li>
-                    <a <?php if($_page=='/contacts') echo 'class="active"'; ?> href="<?=constants::url_internal?>/contacts"><i class="fa fa-user fa-fw"></i> Contacts</a>
+                    <a <?php if($_page=='/contacts') echo 'class="active"'; ?> href="<?=constants::url_internal?>/contacts"><i class="fa fa-user fa-fw"></i> <span class="nav-title">Contacts</span></a>
                 </li>
                 <li>
-                    <a <?php if($_page=='/offers') echo 'class="active"'; ?> href="<?=constants::url_internal?>/offers"><i class="fa fa-briefcase fa-fw"></i> Offers</a>
+                    <a <?php if($_page=='/offers') echo 'class="active"'; ?> href="<?=constants::url_internal?>/offers"><i class="fa fa-briefcase fa-fw"></i> <span class="nav-title">Offers</span></a>
                 </li>
                 <li>
-                    <a <?php if($_page=='/assignments') echo 'class="active"'; ?> href="<?=constants::url_internal?>/assignments"><i class="fa fa-check-square fa-fw"></i> Assignments</a>
+                    <a <?php if($_page=='/assignments') echo 'class="active"'; ?> href="<?=constants::url_internal?>/assignments"><i class="fa fa-check-square fa-fw"></i> <span class="nav-title">Assignments</span></a>
                 </li>
                 <li>
-                    <a <?php if($_page=='/about') echo 'class="active"'; ?> href="<?=constants::url_internal?>/about"><i class="fa fa-info-circle fa-fw"></i> About</a>
+                    <a <?php if($_page=='/about') echo 'class="active"'; ?> href="<?=constants::url_internal?>/about"><i class="fa fa-info-circle fa-fw"></i> <span class="nav-title">About</span></a>
                 </li>
             </ul>
+
+            <a href="#" id="collapse-menu" title="Collapse menu"><i class="fa fa-fw fa-caret-square-o-left"></i></a>
         </div>
         <!-- /.sidebar-collapse -->
     </div>