[Fixed] Router-Outlet Navigation With Constant Sidebar and NavBar on Angular

Issue

I’m a bit confused on what to do on how to place my router-outlet. I have tried researching for similar cases but to no avail.
Here is the scenario
I have a dashboard component which loads after a login is successful. The dashboard contains a sidebar, footer and navigation component declared on the html. Now, when I click on a user link to show me the list of users, it loads the user component but the sidebar, footer and navigation disappears and I am left with only the user component. I just want a situation when I click on a link in the sidebar, it just changes the content without removing the sidebar, footer and nav……
PS: the user component has its own module, then I imported this into the appModule as usual.

Here is what I have so far.

app.component.html

<router-outlet></router-outlet>

dashboard.component.html

<side-bar></side-bar>
<topnav-bar></topnav-bar>
<content></content>
<footer></footer>

sidebar.component.html

 <li>
            <a id="formsli" (click)="anchorClicked($event)"
              ><i class="fa fa-user"></i> User<span class="fa fa-chevron-down"></span
            ></a>
            <ul class="nav child_menu">          
              <li><a [routerLink]="['/user/list']">User List</a></li>
              <li><a [routerLink]="['/user/new']">New User</a></li>
            </ul>
 </li>

usersRouteFile

const routes: Routes = [
    { path: 'user/list', component: UsersComponent },
    { path: 'user/new', component: UserComponent },
];

appModule

export const AppRoutes2: Routes = [
  { path: '', component: LoginComponent},
  { path: 'content', component: ContentComponent },
  { path: 'dashboard', component: DashboardComponent },
];

imports: [
      BrowserModule,
      RouterModule.forRoot(AppRoutes2, {useHash: false}),
      HttpClientModule,
      UsersModule,
   ],

If i click on the user list link, the sidebar, nav and footer disappears. I want it to remain and just change the content area.

Please, what am i doing wrong or not doing right??

Solution

App.component.html

     //use the ngIf directive to either create or destroy the div with       static content (this is determined from the app.component.ta
      <div class='user-nav' *ngIf="isLoggedIn">
          <side-bar></side-bar>
          <top-navbar></top-navbar>
       </div>
     //anything that is routed will show up here
       <router-outlet></router-outlet>
    //if you want the footer to only be available after logging in add it here too
       <footer></footer>