<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  
      <!-- Bootstrap core CSS -->
    <link href="http://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="http://getbootstrap.com/docs/3.3/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Bootstrap styles -->
    <link href="http://getbootstrap.com/docs/3.3/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="stylesheet">

    <!-- System specific Styles CSS -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  </head>

  <body>
    <my-app>
    loading...
  </my-app>

<!-- Bootstrap core JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://getbootstrap.com/docs/3.3/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/docs/3.3/assets/js/ie10-viewport-bug-workaround.js"></script>

  </body>

</html>
/* Styles go here */

### Angular Starter Plunker - Typescript
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, ViewEncapsulation} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
//import {RouterModule} from '@angular/router';
//import {NavbarMapService} from "./NavbarMapService";
//import {NavbarComponent} from "./Navbar";
//import UnderConstruction from "./UnderConstruction";
import {SafeHtmlPipe, MyPostDirective, MyPostService, SidebarComponent, DynamicSidebarComponent} from "./SidebarComponent";

@Component({
  selector: 'my-app',
  templateUrl : 'main.html',
  styleUrls: ['main.css'],
  encapsulation: ViewEncapsulation.None
})
export class App {
}

@NgModule({
  imports: [ 
    BrowserModule
//    ,RouterModule.forRoot(NavbarMapService.routes) 
  ],
  declarations: [
    App
  //,NavbarComponent
  ,SidebarComponent
        ,MyPostDirective
        ,DynamicSidebarComponent
        ,SafeHtmlPipe
  //,UnderConstruction
  ]
  ,providers: [
        { provide: LocationStrategy, useClass: HashLocationStrategy }
        //,NavbarMapService
         ,MyPostService
    ]  
    ,bootstrap: [ App ]
    ,entryComponents: [
        DynamicSidebarComponent
    ]

})
export class AppModule {}
<div class="wrapper">
  <!-- Sidebar Container -->
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3>Test</h3>
      <strong>Test</strong>
    </div>
    
    <!-- Problem is right here -->
    <sidebars></sidebars>
    
    <!-- Thie collapse and the jquery javascript corresponding to that works, but not when the below exact code is built witha component
    
    <ul class="list-unstyled components">
      <li class="active"><a href="#">Sidebar Item 1</a><i class="glyphicon "></i></li>
      <li>
        <a href="#subMenu1" data-toggle="collapse" aria-expanded="false">
          <i class="glyphicon "></i> Sidebar Item 2
        </a>
        <ul class="collapse list-unstyled" id="subMenu1">
          <li><a href="#">Sub Sidebar Item 1</a><i class="glyphicon "></i></li>
          <li>
            <a href="#subMenu2" data-toggle="collapse" aria-expanded="false">
              <i class="glyphicon "></i> Sub Sidebar Item 2
            </a>
            <ul class="collapse list-unstyled" id="subMenu2">
              <li><a href="#">SubS Sidebar Item 1</a><i class="glyphicon "></i></li>
              <li><a href="http://www.yahoo.com">SubS Sidebar Item 2</a><i class="glyphicon "></i></li>
              <li><a href="/somepath/someProcess">SubS Sidebar Item 3</a><i class="glyphicon "></i></li>
            </ul>
          </li>
          <li>
            <a href="#subMenu3" data-toggle="collapse" aria-expanded="false">
              <i class="glyphicon "></i> Sub Sidebar Item 3
            </a>
            <ul class="collapse list-unstyled" id="subMenu3">
              <li><a href="#">DD Item 1</a><i class="glyphicon "></i></li>
              <li><a href="#">DD Item 2</a><i class="glyphicon "></i></li>
              <li><a href="javascript:somecall()">DD Item 3</a><i class="glyphicon "></i></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Sidebar Item 3</a><i class="glyphicon "></i></li>
    </ul>
    -->


  </nav>

  <!-- Page Content Container -->
  <div id="content">
    <!--
        <app-navbar></app-navbar>
        <router-outlet></router-outlet>
        -->
    Something
  </div>
</div>
<!--
<app-footer></app-footer>
-->
/*
body { padding-top: 0px; }
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    NAVBAR STYLE
----------------------------------------------------- */

/*
.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

i, span {
    display: inline-block;
}
*/
.navbar-default {
    font-size: 1.15em;
    font-weight: 400;
    background-color: #7386D5;
/*    background-color: #006b96;*/
    /*padding: 10px;*/
    border: 0px;
    border-radius: 0px;
}

.navbar-default .navbar-nav>li>a {
    color: white;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #cbf0ff;
}

.navbar-default .navbar-brand {
    color: #002433;
}

.navbar-default .navbar-brand:hover {
    color: #ffffff;
    text-shadow: 1px -1px 8px #b3e9ff;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    background-color: #004059;
    color: white;
}

.navbar-default .navbar-toggle {
    border: none;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border: none;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #002433;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.dropdown-menu {
    background-color: #004059;
    color: white;
    border: 0px;
    border-radius: 2px;
    /*    padding-top: 10px;
        padding-bottom: 10px; */
}

.dropdown-menu>li>a {
    background-color: #004059;
    color: white;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    background-color: #004059;
    color:white;
}

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #003246;
}

.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #ffffff;
}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    height: 100%;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
    display: none;
}

#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

#sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
}

#sidebar.active ul ul a {
    padding: 10px !important;
}

#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #7386D5;
    /* #6d7fcc; */
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}
#sidebar ul li a i {
    margin-right: 10px;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}


a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
}
a[aria-expanded="true"]::before {
    content: '\e260';
}


ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article, a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    padding: 0px;
    width: 100%;
    /*min-height: 100vh; */
    transition: all 0.3s;
}


/* ---------------------------------------------------
    MEDIA QUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important ;
    }
    a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
        top: auto;
        bottom: 5px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
    #sidebar.active {
        margin-left: 0 !important;
    }

    #sidebar .sidebar-header h3, #sidebar .CTAs {
        display: none;
    }

    #sidebar .sidebar-header strong {
        display: block;
    }

    #sidebar ul li a {
        padding: 20px 10px;
    }

    #sidebar ul li a span {
        font-size: 0.85em;
    }
    #sidebar ul li a i {
        margin-right:  0;
        display: block;
    }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar ul li a i {
        font-size: 1.3em;
    }
    #sidebar {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
    .dropdown-menu>li>a {
        background-color: #006b96;
        color: #ffffff;
    }
    .dropdown-menu>li>a:hover {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
        color: #ffffff;
        background-color: transparent;
    }
    .dropdown-menu .divider {
        height: 1px;
        margin: 9px 0;
        overflow: hidden;
        background-color: #005577;
    }
}

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="navbar" class="collapse navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="nav-item active">
                    <a class="nav-link" href="#">MyCompany<span class="sr-only">(current)</span></a>
                </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Support<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a [routerLink]="['underconstruction']">User Maintenance</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Toolbox<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a [routerLink]="['underconstruction']">Tool 1</a></li>
            <li><a [routerLink]="['underconstruction']">Tool 2</a></li>
          </ul>
        </li>

        <ul class="nav navbar-nav navbar-right">

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Setup<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a [routerLink]="['underconstruction']"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>Configuration</a></li>
              <li><a [routerLink]="['underconstruction']"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>Some other setup</a></li>
              <li role="separator" class="divider"></li>
              <li><a [routerLink]="['underconstruction']"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>Files</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Me the user<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li>
            </ul>
          </li>
        </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>
<div>
    <div class="page-header">
        <h3>This module is still under construction. Thanks for checking out. Please stop by again to see the progress......</h3>
    </div>
</div>
import {Component, ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'config',
    templateUrl: 'underconstruction.html',
    encapsulation:ViewEncapsulation.None
})
export default class UnderConstruction {}
import {Component} from '@angular/core';
import {NavbarMapService} from "./NavbarMapService";

@Component({
    selector: 'app-navbar',
    templateUrl: 'navbar.html',
    providers : [NavbarMapService]
})
export default class NavbarComponent {}
import {Injectable} from "@angular/core";
import {provideRoutes, Routes} from "@angular/router";
import UnderConstruction from "./UnderConstruction";

@Injectable()
export class NavbarMapService {

    static routes: Routes = [
        {path: 'underconstruction', component: UnderConstruction}
    ];
}
import {
    AfterViewInit, Component, ComponentFactoryResolver, Directive, Injectable, Input, OnDestroy, OnInit, Pipe,
    PipeTransform,
    Type,
    ViewChild,
    ViewContainerRef, ViewEncapsulation
} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";

/*****
 * Using Dynamic Component Module
 */

export interface MyPost {
    htmlText: any;
}

@Component({
    template: `<div [innerHtml]="htmlText | safeHtml"></div>`
})
export class DynamicSidebarComponent {
    @Input() htmlText: any;
}

// Directive
@Directive({
    selector: '[sideBarPage]'
})
export class MyPostDirective {
    constructor(public viewContainerRef: ViewContainerRef) {}
}

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {

    constructor(private sanitized: DomSanitizer) {}

    transform(value : any) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

// Component declaration for dynamic items
export class PostItem {
    constructor(public component: Type<any>, public data: any) {}
}

// Service to instantiate the component and populate with data
@Injectable()
export class MyPostService {

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

    loadComponent(viewContainerRef: ViewContainerRef, postItem: PostItem) {

        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(postItem.component);
        viewContainerRef.clear();

        let componentRef = viewContainerRef.createComponent(componentFactory);

        let myPost: MyPost = <MyPost>componentRef.instance;
        console.log("MyPostService: Line 6a:" + postItem.data);
        myPost.htmlText = postItem.data;
    }
}

@Component({
    selector: 'sidebars',
    template: `
        <ng-template sideBarPage></ng-template>
    `
})
export class SidebarComponent implements OnInit, OnDestroy {

    @ViewChild(MyPostDirective)
    private myPostDirective: MyPostDirective;

    postItem: PostItem;

    constructor(private myPostService: MyPostService) {}

    ngOnInit() {
        this.postItem = {component: DynamicSidebarComponent, data: this.buildSideBar()};
        this.myPostService.loadComponent(this.myPostDirective.viewContainerRef, this.postItem);
    }

    ngOnDestroy() {
    }

    buildSideBar() {

        let retval : string = "<ul class=\"list-unstyled components\">\n" +
            "      <li class=\"active\"><a href=\"#\">Sidebar Item 1</a><i class=\"glyphicon \"></i></li>\n" +
            "      <li>\n" +
            "        <a href=\"#subMenu1\" data-toggle=\"collapse\" aria-expanded=\"false\">\n" +
            "          <i class=\"glyphicon \"></i> Sidebar Item 2\n" +
            "        </a>\n" +
            "        <ul class=\"collapse list-unstyled\" id=\"subMenu1\">\n" +
            "          <li><a href=\"#\">Sub Sidebar Item 1</a><i class=\"glyphicon \"></i></li>\n" +
            "          <li>\n" +
            "            <a href=\"#subMenu2\" data-toggle=\"collapse\" aria-expanded=\"false\">\n" +
            "              <i class=\"glyphicon \"></i> Sub Sidebar Item 2\n" +
            "            </a>\n" +
            "            <ul class=\"collapse list-unstyled\" id=\"subMenu2\">\n" +
            "              <li><a href=\"#\">SubS Sidebar Item 1</a><i class=\"glyphicon \"></i></li>\n" +
            "              <li><a href=\"http://www.yahoo.com\">SubS Sidebar Item 2</a><i class=\"glyphicon \"></i></li>\n" +
            "              <li><a href=\"/somepath/someProcess\">SubS Sidebar Item 3</a><i class=\"glyphicon \"></i></li>\n" +
            "            </ul>\n" +
            "          </li>\n" +
            "          <li>\n" +
            "            <a href=\"#subMenu3\" data-toggle=\"collapse\" aria-expanded=\"false\">\n" +
            "              <i class=\"glyphicon \"></i> Sub Sidebar Item 3\n" +
            "            </a>\n" +
            "            <ul class=\"collapse list-unstyled\" id=\"subMenu3\">\n" +
            "              <li><a href=\"#\">DD Item 1</a><i class=\"glyphicon \"></i></li>\n" +
            "              <li><a href=\"#\">DD Item 2</a><i class=\"glyphicon \"></i></li>\n" +
            "              <li><a href=\"javascript:somecall()\">DD Item 3</a><i class=\"glyphicon \"></i></li>\n" +
            "            </ul>\n" +
            "          </li>\n" +
            "        </ul>\n" +
            "      </li>\n" +
            "      <li><a href=\"#\">Sidebar Item 3</a><i class=\"glyphicon \"></i></li>\n" +
            "    </ul>";

        return retval;    
      
    }
}