README

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

libs-renderable - Session 48

Reusable templates for layouts and navigation with dual Angular + Flutter support.

Overview

libs-renderable provides plug-and-play templates that can be used in the cosmic hierarchy via moduleRef. Each template supports both Angular (standalone components) and Flutter (widget definitions).

Structure

libs/libs-renderable/
├── layout-templates/           # Layout containers
│   ├── split-sidebar/          # Sidebar + main content
│   ├── header-content-footer/  # Classic 3-section layout
│   ├── dashboard/              # Multi-panel dashboard
│   ├── two-column-equal/       # 50/50 split
│   └── three-column-equal/     # 33/33/33 split
│
├── navigation-templates/       # Navigation components
│   ├── sidebar-nav/            # Collapsible sidebar navigation
│   ├── top-nav/                # Horizontal top navigation
│   ├── footer/                 # Footer with links
│   └── breadcrumb-nav/         # Breadcrumb trail
│
├── shell-components/           # Core shell
│   ├── page-renderer/          # Page content renderer
│   └── routes-manager/         # Route configuration
│
└── shared/                     # Shared utilities
    ├── models/                 # TypeScript interfaces
    ├── angular/                # Angular-specific utils
    └── flutter/                # Flutter-specific utils

Path Mappings

{
  "@libs-renderable/layout-templates/*": ["libs/libs-renderable/layout-templates/*/src/index.ts"],
  "@libs-renderable/navigation-templates/*": ["libs/libs-renderable/navigation-templates/*/src/index.ts"],
  "@libs-renderable/shell-components/*": ["libs/libs-renderable/shell-components/*/src/index.ts"]
}

Usage

Import in Angular

import { SplitSidebarLayoutComponent } from '@libs-renderable/layout-templates/split-sidebar';
import { SidebarNavComponent } from '@libs-renderable/navigation-templates/sidebar-nav';

@Component({
  standalone: true,
  imports: [SplitSidebarLayoutComponent, SidebarNavComponent],
  // ...
})
export class MyPageComponent {}

Reference in Cosmic Hierarchy

Navigation and layout nodes use moduleRef to reference templates:

// Navigation node
const sidebarNav: CosmicNode = {
  id: 'nav-sidebar-1',
  name: 'Main Sidebar',
  nodeType: 'navigation',
  moduleRef: '@libs-renderable/navigation-templates/sidebar-nav',
  layoutSlot: 'sidebar',
  inheritToChildren: true,
};

// Layout configuration on galaxy/world
const adminGalaxy: CosmicNode = {
  id: 'galaxy-admin',
  name: 'Admin',
  nodeType: 'galaxy',
  route: '/admin',
  layout: {
    template: 'split-sidebar',
    templateRef: '@libs-renderable/layout-templates/split-sidebar',
    sidebarWidth: 280,
    sidebarPosition: 'left',
  },
};

Layout Templates

split-sidebar

Classic layout with collapsible sidebar.

Property Type Default Description
sidebarWidth number 280 Sidebar width in pixels
sidebarPosition 'left' | 'right' 'left' Sidebar position
collapsible boolean true Allow sidebar collapse
collapsedWidth number 64 Width when collapsed

header-content-footer

Three-section vertical layout.

Property Type Default Description
headerHeight number 64 Header height in pixels
footerHeight number 48 Footer height in pixels
stickyHeader boolean true Keep header fixed

dashboard

Multi-panel dashboard layout.

Property Type Default Description
columns number 12 Grid columns
gap number 16 Gap between panels
responsive boolean true Enable responsive behavior

two-column-equal / three-column-equal

Equal-width column layouts.

Property Type Default Description
gap number 16 Gap between columns
stackOnMobile boolean true Stack vertically on mobile

Navigation Templates

sidebar-nav

Collapsible sidebar with menu items.

Property Type Default Description
items NavItem[] [] Menu items
collapsed boolean false Initial collapsed state
showIcons boolean true Display icons

top-nav

Horizontal navigation bar.

Property Type Default Description
items NavItem[] [] Menu items
position 'fixed' | 'sticky' | 'static' 'sticky' Position behavior

footer

Footer with link sections.

Property Type Default Description
sections FooterSection[] [] Link sections
copyright string '' Copyright text

breadcrumb-nav

Breadcrumb trail navigation.

Property Type Default Description
separator string '/' Separator character
homeIcon string 'fa-home' Home icon

Dual Export (Angular + Flutter)

Each template provides both Angular and Flutter exports:

Angular Export

// Generated Angular standalone component
@Component({
  standalone: true,
  selector: 'lib-split-sidebar-layout',
  templateUrl: './split-sidebar-layout.component.html',
  styleUrls: ['./split-sidebar-layout.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SplitSidebarLayoutComponent {
  sidebarWidth = input<number>(280);
  sidebarPosition = input<'left' | 'right'>('left');
  // ...
}

Flutter Export

{
  "type": "SplitSidebarLayout",
  "properties": {
    "sidebarWidth": 280,
    "sidebarPosition": "left"
  },
  "slots": {
    "sidebar": [],
    "content": []
  }
}

Integration with Layout-Builder

The layout-builder tool (@libs-structural/layout-builder) uses libs-renderable as its template library:

  1. Browse available templates in the template library panel
  2. Drag templates onto the visual canvas
  3. Configure properties in the properties panel
  4. Export as Angular component or Flutter widget

Migration from Legacy Modules

The old modules/layout/ and modules/navigation/ directories are deprecated.

See:

Related Documentation