app.jade

// ko template: { afterRender: afterRender }
// /ko

#main-navbar.navbar.navbar-inverse
    button#main-menu-toggle(type="button", data-toggle="collapse", data-target="#siteNavBar", data-bind="click: toggleMainMenu")
        i.navbar-icon.fa.fa-bars.icon
        // span.hide-menu-text HIDE MENU

    div
        .navbar-inner
            .navbar-header
                a.navbar-brand
                    span.fa(data-bind="css: pageStatusIcon")
                    |  
                    span(data-bind="text: pageTitle")

                //disabled
                button.navbar-toggle.collapsed(style="display: none;", type="button", data-toggle="collapse", data-target="#main-navbar-collapse")
                    span.navbar-icon.fa.fa-bars

            #main-navbar-collapse.collapse.navbar-collapse.main-navbar-collapse

#main-menu
    #main-menu-inner
        ul.navigation(data-bind="foreach: sidebar")
            <!-- ko if: label -->
            li
                h4.menu-content.no-padding-b(data-bind="text: text")
            <!-- /ko -->
            <!-- ko if: dropdown -->
            li.mm-dropdown.mm-dropdown-root(data-bind="css: { open: open }")
                a(href="#", data-bind="click: function() { $root.openMainMenu(); open(!open()); }")
                    .menu-icon.fa(data-bind="css: icon")
                    | &nbsp;
                    span.mm-text(data-bind="text: text")
                ul(data-bind="foreach: children")
                    li(data-bind="css: { active: active }")
                        a(href="#" data-bind="goto: goto, attr: { title: text }", data-toggle="tooltip", data-placement="right", data-container="#main-menu" )
                            .menu-icon.fa(data-bind="css: icon")
                            | &nbsp;
                            span.mm-text(data-bind="text: text")
            <!-- /ko -->
            <!-- ko ifnot: label || dropdown -->
            li(data-bind="css: { active: active }")
                a(href="#" data-bind="goto: goto, attr: { title: text }", data-toggle="tooltip", data-placement="right", data-container="#main-menu" )
                    .menu-icon.fa(data-bind="css: icon")
                    | &nbsp;
                    span.mm-text(data-bind="text: text")
            <!-- /ko -->
            
        .menu-content
            a.btn.btn-primary.btn-block.btn-outline.dark(href="/logout") Logout

#main-menu-bg
    
ul.list-unstyled#toastMessages(data-bind="foreach: toastMessages")
    li
        .alert(data-bind="css: styleClass, text: message")

#content-wrapper
    div(data-bind="style: { display: (hideAlerts() ? 'none' : 'block') }, with: applicationState.alerts()[0]")
        <!-- ko partial: 'views/' + alertType -->
        <!-- /ko -->
    div#viewRoot(data-bind="component: { name: mainPanel() ? 'views/' + mainPanel().template : '', params: mainPanel().viewModel, afterRender: mainPanel().afterRender }")

.modal(data-backdrop="static", data-bind="with: dialog", tabindex="-1")#sharedModal
    .modal-dialog(data-bind="css: viewModel.size")
        .modal-content(data-bind="component: { name: 'views/dialogs/' + template, params: viewModel }")