How to modify design on html component angular to be same as code pen?

[ahmedsaazizba]

I have bootstrap side menu on angular 7 project as code pen link

my problem on my menu it is not have good design although i use same css
and html may be different because i have tage of angular
so How to get my menu design angular as exist on code pen link

    <div class="container-fluid">

     

        <ul *ngFor="let rep of reportlist"  >

            <li>

                <div class="navbar-header bkgnd">

                    <h4>{{rep.reportCategory}}</h4>

                </div>

                <div class="colsm12" id="">

                   <div class="sideNav nav navbar">

                <ul *ngFor="let subrep of subreportlist" >

                                   

                    <span *ngIf="subrep.reportCategoryID === rep.reportCategoryID">

                        <li><a href="/reportdetails?id={{subrep.reportID}}">{{subrep.reportName}}<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-home"></span></a></li>

                           

                    </span>

                    

                </ul>

            </div>

        </div>

            </li>

       

      </ul>

      

     </div>

  

</nav>

<div class="col-10">

    <router-outlet></router-outlet>

    </div>

body,html{
    height: 100%;
  }
nav.sidebar {
    -webkit-transition: margin 200ms ease-out;
      -moz-transition: margin 200ms ease-out;
      -o-transition: margin 200ms ease-out;
      transition: margin 200ms ease-out;
  }

.bkgnd {
    background-color: #d9edf7;
    color:#428bca;
}

.colsm12{
    position: relative;
    min-height: 1px;
    width: 100%;
    float: left;
}

 @media (min-width: 320px) {
   
    nav.sidebar:hover + .main{
      margin-left: 200px;
    }
   
    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
      text-align: center;
      width: 100%;
      margin-left: 0px;
    }
    
    nav.sidebar a{
      padding-right: 13px;
    }

   .sideNav > li:first-child {
      border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .sideNav > li{
      border-bottom: 1px #e5e5e5 solid;
    }

    nav.sidebar .sideNav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    nav.sidebar, nav.sidebar .container-fluid{
      padding: 0 0px 0 0px;
    }

    .navbar-inverse .sideNav .open .dropdown-menu>li>a {
      color: #777;
    }

    nav.sidebar{
      width: 200px;
      height: 100%;
      margin-left: -160px;
      float: left;
      margin-bottom: 0px;
    }

    nav.sidebar li {
      width: 100%;
    }

    nav.sidebar:hover{
      margin-left: 0px;
    }

    .forAnimate{
      opacity: 0;
    }
  }
   
  @media (min-width: 1330px) {

    nav.sidebar{
      margin-left: 0px;
      float: left;
    }

    nav.sidebar .forAnimate{
      opacity: 1;
    }
  }

  nav.sidebar .sideNav .open .dropdown-menu>li>a:hover, nav.sidebar .sideNav .open .dropdown-menu>li>a:focus {
    color: #CCC;
    background-color: transparent;
  }

  .sideNav > li:first-child {
      border-top: 1px #e5e5e5 solid;
    }

  nav:hover .forAnimate{
    opacity: 1;
  }

  
 

side menu i desired to make as below