Trying to hide the navigation-sidebar without hiding ui-view

[RipleWare]

I am trying to implement a way of 'hiding' the eeh-navigation-sidebar when a user is not logged in so I can retain the ui-router states. I can't set an ng-hide or an ng-if override as it hides the nested <ui-view> element along with the entire sidebar and I would prefer to keep my content inside the eeh-navigation-page-wrapper.

I tried using ng-class to add width: 0 but that doesn't seem to be working either. I'm just wondering if the eeh-navigation actually supports ng-class and if I'm adding my CSS wrong. If so, could you possibly provide a small example of how I could achieve this scenario.

Thanks heaps.

[mmteyrek]

Check http://www.ethanhann.com/sb-admin-2/demo/index.html

[RipleWare]

Thanks for that - great example, but I can't find any reference to AngularJS, nor <ui-view> which is what I really need to work from.

[mmteyrek]

JavaScript :

 $authProvider.loginUrl = 'auth/login';
 $urlRouterProvider.otherwise('/login');

.state("XXXX",{"abstract":!0,templateUrl:"./partials/home.html"})
.state("XXXX.authenticated",
        {"abstract":!0,templateUrl:"/partials/authenticated.html"})

// already identified

 .state('metrics.authenticated.departements', {
            url: '/departements/index',
            templateUrl: '/partials/departements/index.html',
            controller: 'DepartementCtrl',
            resolve: {
              loginRequired: loginRequired  
            }
        })

//home.html
<ui-view></ui-view>

//authenticated.html

  <eeh-navigation-sidebar menu-name="'sidebar'"  search-input-icon-class="'fa-search'"
     menu-item-collapsed-icon-class="'fa-chevron-left'" menu-item-expanded-icon-class="'fa-chevron-down'"  sidebar-collapsed-icon-class="'fa-arrow-right'"  sidebar-expanded-icon-class="'fa-arrow-left'"
    search-input-is-visible="false">
     <ui-view></ui-view>
 </eeh-navigation-sidebar>

[RipleWare]

I am only quite new to angular and I'm not sure I follow your example 100%. I have implemented my a form of authentication in my app already and drive my content from the isLoggedIn flag. I was hoping there was a much simpler method of changing the visibility of the sidebar based on an Angular condition (or expression being true). That is how I have controlled all my other content (navbar, etc.) Basically, I was looking for a way to hide the sidebar without hiding the <ui-view>.

[RipleWare]

Okay, I'm sure this is not the preferred way of handling this scenario, but this is how I have managed to get around it for the time being (and to demonstrate what I am ultimately trying to achieve):

            <!-- Sidebar Navigation -->
            <eeh-navigation-sidebar
                menu-name="'sideMenu'" 
                ng-class="{ 'hidden': !user.isLoggedIn }" 
                search-input-is-visible="false"
                sidebar-is-collapsed="false">
                <ui-view></ui-view>
            </eeh-navigation-sidebar> 

            <div ng-if="!user.isLoggedIn">
                <ui-view></ui-view>
            </div> <!--./Sidebar Navigation -->

It would be great if this functionality was built in somehow.

[ethanhann]

Without it being a built-in feature you could wrap the eeh-navigation-sidebar in a custom directive that adds the sidebar-invisible class (or your own class that does the same thing) to the page wrapper element and add the Bootstrap hidden class to the sidebar nav. When your user is authenticated you would need to inform your custom directive to remove the classes.