Available Layout Types

Egret offers several layout types that can be configured through the layout service:

• Vertical Layout: Traditional sidebar navigation with header on the side (default)
• Horizontal Layout: Top navigation with header at the top
• Auth Layout: Special layout for authentication pages
• Admin Layout: Base layout for admin pages with customizable components

Set Default Layout Configuration

You can set the default layout by modifying the setAppLayout method in layout.service.ts:

// layout.service.ts
setAppLayout() {
  // ********** SET DEFAULT LAYOUT **********
  let defaultLayout: ILayoutConf = {
    navigationPos: 'side', // side, top
    sidebarStyle: 'full', // full, compact, closed
    sidebarCompactToggle: false, // if "sidebarStyle" is "compact" make it true
    dir: 'ltr', // ltr, rtl
    useBreadcrumb: true, 
    topbarFixed: false,
    sidebarColor: 'sidebar-dark', // sidebar-dark, sidebar-light
    matTheme: 'egret-navy', // egret-navy, egret-navy-dark
    breadcrumb: 'simple', // simple, title
  };
}

Set Layout during Runtime

Here's how to inject and use the layout service in a component:

import { Component, OnInit } from '@angular/core';
import { LayoutService } from 'app/shared/services/layout.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html'
})
export class MyComponent implements OnInit {
  constructor(private layoutService: LayoutService) {}

  ngOnInit() {
    // Subscribe to layout changes
    this.layoutService.layoutConf$.subscribe(layoutConf => {
      console.log('Current layout config:', layoutConf);
    });
  }

  // Change to compact sidebar
  setCompactSidebar() {
    this.layoutService.publishLayoutChange({
      sidebarStyle: 'compact'
    });
  }

  // Change to horizontal navigation
  setHorizontalLayout() {
    this.layoutService.publishLayoutChange({
      navigationPos: 'top'
    });
  }

  // Toggle RTL mode
  toggleRTL() {
    this.layoutService.publishLayoutChange({
      dir: 'rtl'
    });
  }
}

Common Layout Configurations

Here are some common layout configurations you might want to use:

// Full sidebar (default)
layoutService.publishLayoutChange({
  sidebarStyle: 'full'
});

// Compact sidebar (icons only, expands on hover if sidebarCompactToggle is true)
layoutService.publishLayoutChange({
  sidebarStyle: 'compact',
  sidebarCompactToggle: true
});

// Closed sidebar (completely hidden)
layoutService.publishLayoutChange({
  sidebarStyle: 'closed'
});

// Side navigation (default)
layoutService.publishLayoutChange({
  navigationPos: 'side'
});

// Top navigation (horizontal menu)
layoutService.publishLayoutChange({
  navigationPos: 'top'
});

// Change material theme
layoutService.publishLayoutChange({
  matTheme: 'egret-navy-dark'
});

// Change sidebar color
layoutService.publishLayoutChange({
  sidebarColor: 'sidebar-light'
});

// Fixed topbar
layoutService.publishLayoutChange({
  topbarFixed: true
});

// Fixed footer
layoutService.publishLayoutChange({
  footerFixed: true
});