Shell

bs-shell is a responsive app-shell layout with a collapsible sidebar. The sidebar content is marked with the structural *bsShellSidebar directive (top-bar content with *bsShellTopbar); all other children form the main content area. The [state] input ('auto', 'show', 'hide') controls visibility, while [breakpoint] sets the viewport size at which 'auto' reveals the sidebar. Bind [size] to resize it at runtime.

Basic usage

  
    
      
        <bs-shell [state]="'auto'" [breakpoint]="'md'">
        
    
      
          <nav *bsShellSidebar>
        
    
      
            <span class="d-block p-3">Home</span>
        
    
      
            <span class="d-block p-3">Settings</span>
        
    
      
          </nav>
        
    
      
        
        
    
      
          <main class="p-3">
        
    
      
            Main content is every other child.
        
    
      
          </main>
        
    
      
        </bs-shell>

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { BsShellComponent, BsShellSidebarDirective } from '@mintplayer/ng-bootstrap/shell';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-shell-demo',
        
    
      
          templateUrl: './my-shell-demo.component.html',
        
    
      
          imports: [BsShellComponent, BsShellSidebarDirective],
        
    
      
        })
        
    
      
        export class MyShellDemoComponent {}