Blur Admin sidebar menu doesn't appear?
<p>I want to implement login system on my angular app using Blur Admin template.</p>

<p>I know there is auth.html but what I want is custom.</p>

<p>My idea is when unauthenticated user open app page, my app will load login.html content which is auth.html content and put in index.html else my app will load main.html which contain dashboard.html container and put in index.html then load dashboard.html.</p>

<p>So in root of my app I have <code>index.html</code>, <code>login.html</code>, <code>main.html</code></p>

<p><code>index.html</code></p>

<pre><code>...
all css component here
...
&lt;body&gt;
&lt;div ui-view style="height: 100%;"&gt;

&lt;/div&gt;
...
all js component here
...
&lt;/body&gt;
</code></pre>

<p><code>login.html</code> just main content of <code>auth.html</code></p>

<pre><code>&lt;main class="auth-main"&gt;
  &lt;div class="auth-block"&gt;
    &lt;h1&gt;Sign in to Blur Admin&lt;/h1&gt;
    &lt;a href="reg.html" class="auth-link"&gt;New to Blur Admin? Sign up!&lt;/a&gt;

    &lt;form class="form-horizontal"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;

        &lt;div class="col-sm-10"&gt;
          &lt;input type="email" class="form-control" id="inputEmail3" placeholder="Email"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Password&lt;/label&gt;

        &lt;div class="col-sm-10"&gt;
          &lt;input type="password" class="form-control" id="inputPassword3" placeholder="Password"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="col-sm-offset-2 col-sm-10"&gt;
          &lt;button type="submit" class="btn btn-default btn-auth"&gt;Sign in&lt;/button&gt;
          &lt;a href class="forgot-pass"&gt;Forgot password?&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;

    &lt;div class="auth-sep"&gt;&lt;span&gt;&lt;span&gt;or Sign in with one click&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;

    &lt;div class="al-share-auth"&gt;
      &lt;ul class="al-share clearfix"&gt;
        &lt;li&gt;&lt;i class="socicon socicon-facebook" title="Share on Facebook"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;li&gt;&lt;i class="socicon socicon-twitter" title="Share on Twitter"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;li&gt;&lt;i class="socicon socicon-google" title="Share on Google Plus"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/main&gt;
</code></pre>

<p><code>main.html</code> is main content of <code>index.html</code> before modified.</p>

<pre><code>&lt;div class="body-bg"&gt;&lt;/div&gt;
&lt;main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $baSidebarService.isMenuCollapsed() }"&gt;

  &lt;ba-sidebar&gt;&lt;/ba-sidebar&gt;
  &lt;page-top&gt;&lt;/page-top&gt;

  &lt;div class="al-main"&gt;
    &lt;div class="al-content"&gt;
      &lt;content-top&gt;&lt;/content-top&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;footer class="al-footer clearfix"&gt;
    &lt;div class="al-footer-right"&gt;Created with &lt;i class="ion-heart"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;div class="al-footer-main clearfix"&gt;
      &lt;div class="al-copy"&gt;Blur Admin 2016&lt;/div&gt;
      &lt;ul class="al-share clearfix"&gt;
        &lt;li&gt;&lt;i class="socicon socicon-facebook"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;li&gt;&lt;i class="socicon socicon-twitter"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;li&gt;&lt;i class="socicon socicon-google"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;li&gt;&lt;i class="socicon socicon-github"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/footer&gt;

  &lt;back-top&gt;&lt;/back-top&gt;
&lt;/main&gt;

&lt;div id="preloader" ng-show="!$pageFinishedLoading"&gt;
  &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><code>app/pages/pages.module.js</code> load my other page and authorization check</p>

<pre><code>/**
 * @author v.lugovsky
 * created on 16.12.2015
 */
(function () {
  'use strict';

  angular.module('BlurAdmin.pages', [
     'angularCSS', //css lazy load
    'ui.router',

    'BlurAdmin.pages.dashboard', //dashboard page
    'BlurAdmin.pages.transaksi', //my other page
    'BlurAdmin.pages.ui',
    'BlurAdmin.pages.components',
    'BlurAdmin.pages.form',
    'BlurAdmin.pages.tables',
    'BlurAdmin.pages.charts',
    'BlurAdmin.pages.maps',
    'BlurAdmin.pages.profile',

  ])
      .config(routeConfig).run(function ($rootScope, $state, authFactory){

        $rootScope.$state = $state;

            $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
                authFactory.isAuthenticated().then(function (response) {
                    //authenticated user will go to dashboard
                    $state.transitionTo('home.dashboard')
                }, function (error) {
                    event.preventDefault();
                    //unauthenticated user will go to login
                    $state.transitionTo("login");
                });

            });      
      });

  /** @ngInject */
  function routeConfig($urlRouterProvider, $stateProvider, baSidebarServiceProvider) {

    $stateProvider

    .state('home', {
        url: '/home',
        abstract: true,
        templateUrl: 'main.html',
        authenticate: true,
    })

    .state('login', {
        url: '/login',
        templateUrl: 'login.html',
        title: 'Login',
        authenticate: false,
        css: 'app/auth.css' //css lazy load
    });

    $urlRouterProvider.otherwise('/login');

    ....
    ....
    ....
</code></pre>

<p><code>app/pages/dashboard/dashboard.module.js</code> </p>

<pre><code>/**
 * @author v.lugovsky
 * created on 16.12.2015
 */
(function () {
  'use strict';

  angular.module('BlurAdmin.pages.dashboard', [])
      .config(routeConfig);

  /** @ngInject */
  function routeConfig($stateProvider) {
    $stateProvider
        .state('home.dashboard', {
          url: '/dashboard',
          templateUrl: 'app/pages/dashboard/dashboard.html',
          title: 'Dashboard',
          css: 'app/main.css', //css lazy load
          sidebarMeta: {
            icon: 'ion-android-home',
            order: 0,
          },
          authenticate: true,
        });
  }

})();
</code></pre>

<p><code>app/pages/transaksi/transaksi.module.js</code> </p>

<pre><code>(function () {
    'use strict';
    angular.module('BlurAdmin.pages.transaksi', [
        'BlurAdmin.pages.transaksi.sewa', //sub menu for transaksi
        'ngFileUpload'
    ])
        .config(routeConfig)

        function routeConfig($stateProvider){
            $stateProvider
            .state('home.transaksi', {
                url: '/transaksi',
                title: 'Transaksi',
                sidebarMeta: {
                    icon: 'ion-grid',
                    order: 100              
                }
            });
        }

})();
</code></pre>

<p><code>app/pages/transaksi/sewa/sewa.module.js</code> routing for sub menu of transaksi</p>

<pre><code>(function () {
    'use strict';

    angular.module('BlurAdmin.pages.transaksi.sewa', [])
        .config(routeConfig);

    function routeConfig($stateProvider){
        $stateProvider
            .state('home.transaksi.sewa', {
                url: '/sewa',
                templateUrl: 'app/pages/transaksi/sewa/sewa.html', //contain something simple just "this is sewa page"
                controller: 'SewaCtrl',
                title: 'Sewa',
                authenticate: true,
                sidebarMeta: {
                    order: 0
                }
            });
    }   
})();
</code></pre>

<p>currently I'm authenticated user so when I open <code>http://localhost:3000/account/</code>  redirect to <code>http://localhost:3000/account/#/home/dashboard</code></p>

<p>But as title says <strong>dashboard menu</strong> and <strong>my custom page <code>transaksi</code> including sub level name sewa</strong> doesn't appear like this</p>

<p><a href="https://i.stack.imgur.com/IBeIv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IBeIv.png" alt="dashboard menu doesn&#39;t appear"></a></p>

<p>I have already check via inspect element maybe it just css problem, unfortunatelly no.</p>

<p>and when I go to <code>http://localhost:3000/account/#/home/transaksi/sewa</code> I redirected to <code>http://localhost:3000/account/#/home/dashboard</code> instead of showing <code>this is sewa page</code>.</p>

<p>Why this thing happen? and how to solve it?</p>

<p>Thanks in advance.</p>