show hide items depend on sidebar open/closed status

app/shared/directives.js

@@ -59,17 +59,19 @@ app.directive('collapseMenu', function ($timeout) {
 
             $scope.collapseToggle = function () {
                 if ($rootScope.collapsed === false) {
-					jQuery("span.menu-text").css("display" , "none");
+					//jQuery("span.menu-text, span.arrow, .sidebar footer").css("display" , "none");
                     jQuery(".sidebar").css("width" , "62px");
 					jQuery(".manager-view").css("width" , "calc(100% - 62px)");
-					jQuery(".sidebar footer").css("display" , "none");
+					//jQuery(".sidebar footer").css("display" , "none");
+                    //jQuery(".menu-text").hide();
                     $rootScope.collapsed = true;
                     $rootScope.sidebarPinned = false;
                 } else {
-					jQuery("span.menu-text").fadeIn(400);
+					jQuery("span.menu-text, span.arrow, .sidebar footer").fadeIn(400);
                     jQuery(".sidebar").css("width" , "250px");
 					jQuery(".manager-view").css("width" , "calc(100% - 250px)");
-					jQuery(".sidebar footer").fadeIn(400);
+					//jQuery(".sidebar footer").fadeIn(400);
+                    //jQuery(".menu-text").show();
                     $rootScope.collapsed = false;
                     $rootScope.sidebarPinned = true;
                 }
@@ -144,8 +146,7 @@ app.directive('sidebar', ['$location', function () {
             $('#side-menu').metisMenu();
             $http.get(RESTURL.url + 'menu/').success(function (data) {
                 //$scope.allMenuItems = angular.copy(data.generic);
-                $scope.menuItems = data;
-                debugger;
+                $scope.menuItems = {"generic": data.other};
                 // $scope.menuItems = []; // angular.copy($scope.allMenuItems);
 
                 // at start define breadcrumblinks for breadcrumb
@@ -164,20 +165,17 @@ app.directive('sidebar', ['$location', function () {
 
             $scope.openSidebar = function () {
                 if ($rootScope.sidebarPinned === false) {
-                    jQuery("span.menu-text").fadeIn(400);
+                    jQuery("span.menu-text, span.arrow, .sidebar footer, #side-menu").fadeIn(400);
                     jQuery(".sidebar").css("width" , "250px");
                     jQuery(".manager-view").css("width" , "calc(100% - 250px)");
-                    jQuery(".sidebar footer").fadeIn(400);
                     $rootScope.collapsed = false;
                 }
             };
 
             $scope.closeSidebar = function () {
                 if ($rootScope.sidebarPinned === false) {
-                    jQuery("span.menu-text").css("display" , "none");
                     jQuery(".sidebar").css("width" , "62px");
                     jQuery(".manager-view").css("width" , "calc(100% - 62px)");
-                    jQuery(".sidebar footer").css("display" , "none");
                     $rootScope.collapsed = true;
                 }
             };
@@ -187,9 +185,6 @@ app.directive('sidebar', ['$location', function () {
                     if (newindex > -1) {
                         $scope.menuItems = [$scope.allMenuItems[newindex]];
                         $scope.collapseVar = 1;
-                        $timeout(function () {
-                            $('#side-menu').metisMenu();
-                        });
                     }
                 });
 
@@ -211,6 +206,7 @@ app.directive('sidebar', ['$location', function () {
             $scope.breadcrumb = function (itemlist) {
                 $rootScope.breadcrumblinks = itemlist;
                 // showSaveButton is used for to show or not to show save button on top of the page
+                // todo: remove button
                 $rootScope.showSaveButton = false;
             };
 

app/shared/templates/directives/sidebar.html

@@ -7,18 +7,21 @@
             <!--<sidebar-search></sidebar-search>-->
             <li ui-sref-active="active">
                 <a href="#/dashboard" ng-click="breadcrumb(['Panel'])"><i class="fa fa-dashboard fa-fw"></i>
-                	<span class="menu-text">Panel</span>
+                	<span class="menu-text" ng-class="{hidden: $root.collapsed}">Panel</span>
                 </a>
             </li>
             
             <li ng-repeat="(key, item) in menuItems" ng-class="{active: collapseVar == $index+1}">{{dropDown}}
                 <a href="" ng-click="check($index+1)">
-                    <i class="fa fa-wrench fa-fw" ng-class="{'fa-user': key == 'personel'}"></i>
-                    <span class="menu-text">{{ key }}</span>
+                    <i class="fa fa-fw fa-cogs"
+                       ng-class="{generic: 'fa fa-fw fa-wrench', ogrenci: 'fa fa-fw fa-book'}[key]"></i>
+                    <span class="menu-text" ng-class="{hidden: $root.collapsed}">{{ key }}</span>
+                    <span class="fa arrow" ng-class="{hidden: $root.collapsed}"></span>
                 </a>
-                <ul class="nav nav-second-level">
+                <ul class="nav nav-second-level" ng-class="{hidden: $root.collapsed}">
                     <li ng-repeat="v in item">
-                        <a ng-href="#/{{v[1]}}" ng-click="breadcrumb([key, v[0]])">{{v[0]}}</a>
+                        <a ng-href="#{{v.url}}/?{{v.param}}={{$root.selectedUser.key}}"
+                           ng-click="breadcrumb([key, v.text])">{{v.text}}</a>
                     </li>
                 </ul>
                 <!-- /.nav-second-level -->
@@ -26,7 +29,7 @@
         </ul>
     </div>
     <!-- /.sidebar-collapse -->
-    
+
     
     <!-- sidebar-person-info -->
     <div class="sidebar-person-info">
@@ -69,7 +72,7 @@
     <!-- end of sidebar-person-info -->
     
     
-    <footer>
+    <footer ng-class="{hidden: $root.collapsed}">
     	<span>v <app-version></app-version> &copy; ZetaOps</span>
     </footer>
 </div>