How do I restrict router-outlet to only populate a certain portion fo the page with that component?

I'm using Angular 13 and PrimeNG 13. I have this basic component (ContentComponent) where I would like to click an item in the menu and see the corresponding component in the primary content area ...

<div>
    <div class="sidePanel">
        <div class="menu">           
            <p-panelMenu  [model]="items" [multiple]="false"></p-panelMenu> 
        </div>
        <div class="main">             
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

I have defined these PrimeNG MenuItems ...

  ngOnInit() {
    this.items1 = [{
      label: 'Users',
      items: [
        {
          label: 'Reports',
          id: 'reports',
          routerLink: ['reports']
        }
    ...
      }

and I have set this up in my app-routing.module.ts file

const routes: Routes = [
    ...
  {
    path: 'content',
    children: [
      {
        path: '',
        component: ContentComponent
      },
      {
        path: 'reports',
        component: ReportsComponent
      },

but when my page with the panel menu is rendered and I click on the "Reports" item, the "ReportsComponent" takes up the entire screen and causes the navigation panel to disappear. How do I restrict router-outlet to only populate the component in the designated section of the page?

Since the ReportsComponent should be rendered within the ContentComponent based on the routing change, you can change the app's routes as follows:

const routes: Routes = [
    ...
  {
    path: 'content',
    // The parent component should be added here:
    component: ContentComponent
    children: [
      // The children's components should be added here:
      {
        path: 'reports',
        component: ReportsComponent
      },

Read more about Nesting routes in Angular here: https://angular.io/guide/router#nesting-routes