ui-essentials/projects/demo-ui-essentials/src/app/shared/layout-containers/layout-container.component.scss

// Layout Container Component - Main application shell layout
.ui-layout-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  box-sizing: border-box;
  overflow: hidden;

  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
  flex-flow: column;

  // Top navigation bar
  &__top-bar {
    order: 1;
    flex: 0 0 64px; // Standard app bar height
    box-sizing: border-box;
    overflow: hidden;
    transition: all 300ms cubic-bezier(0.2, 0.0, 0, 1.0);
    position: relative;
  }

  // Main content wrapper
  &__centre-wrapper {
    width: 100%;
    box-sizing: border-box;
    position: relative;

    order: 2;
    flex: 1;
    overflow: hidden;
    min-height: 0;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: stretch;

    // Left sidebar navigation
    .left-navigation {
      order: 1;
      flex: 0 0 64px; // Collapsed sidebar width
      overflow: hidden;
      position: relative;
      box-sizing: border-box;
      height: 100%;
      transition: all 300ms cubic-bezier(0.2, 0.0, 0, 1.0);

      // Navigation states
      &--hide {
        flex: 0 0 0;
      }

      &--rail {
        flex: 0 0 80px; // Rail navigation width
      }

      &--full {
        flex: 0 0 320px; // Expanded sidebar width
      }
    }

    // Main content area
    .main-body {
      order: 2;
      flex: 1;
      overflow: hidden;
      min-height: 0;
      box-sizing: border-box;
      position: relative;

      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: stretch;

      // Inner header section
      &__header {
        order: 1;
        flex: 0 0 0;
        box-sizing: border-box;
        overflow: hidden;
        transition: all 300ms cubic-bezier(0.2, 0.0, 0, 1.0);
        width: 100%;
        position: relative;
      }

      // Inner content body
      &__body {
        order: 2;
        flex: 1;
        overflow: hidden;
        min-height: 0;
        box-sizing: border-box;
      }

      // Inner footer section
      &__footer {
        order: 3;
        flex: 0 0 0;
        box-sizing: border-box;
        overflow: hidden;
        transition: all 300ms cubic-bezier(0.2, 0.0, 0, 1.0);
        width: 100%;
        position: relative;
      }
    }

    // Right sidebar navigation
    .right-navigation {
      order: 3;
      flex: 0 0 320px; // Right sidebar width
      overflow: hidden;
      position: relative;
      box-sizing: border-box;
      height: 100%;
      transition: all 300ms cubic-bezier(0.2, 0.0, 0, 1.0);

      // Right navigation states
      &--hide {
        flex: 0 0 0;
      }

      &--show {
        flex: 0 0 320px; // Shown right sidebar width
      }
    }
  }

  // Bottom bar section
  &__bottom-bar {
    order: 3;
    flex: 0 0 0;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 300ms cubic-bezier(0.2, 0.0, 0, 1.0);
  }

  // Responsive design for smaller screens
  @media (max-width: 768px) {
    &__centre-wrapper {
      .left-navigation {
        &--full {
          flex: 0 0 280px; // Smaller full width on mobile
        }
      }

      .right-navigation {
        &--show {
          flex: 0 0 280px; // Smaller right sidebar on mobile
        }
      }
    }
  }

  // Mobile breakpoint - stack navigation vertically
  @media (max-width: 640px) {
    &__centre-wrapper {
      flex-direction: column;
      
      .left-navigation,
      .right-navigation {
        &--full,
        &--show {
          flex: 0 0 64px; // Navigation becomes horizontal bar on mobile
        }
      }
    }
  }
}