DocsShell constructor

DocsShell({ Object? nav, Object? sidebar, String? title, String? description, Object? child, List<Object?> children = const [], Object? footer, Object maxWidth = 1180, String? className, Map<String, Object?> props = const {}, Map<String, Object?> style = const {}, DartStyle? dartStyle, })

Creates a docs shell with responsive content and sidebar columns.

Implementation

DocsShell({
  Object? nav,
  Object? sidebar,
  String? title,
  String? description,
  Object? child,
  List<Object?> children = const [],
  Object? footer,
  Object maxWidth = 1180,
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
}) : super(
        'div',
        props: mergeComponentProps(
          props,
          className: className,
          dartStyle: DartStyle(
            minHeight: '100vh',
            background: ThemeToken.color(
              'docsBackground',
              fallback: '#ffffff',
            ).toCss(),
            color: ThemeToken.color('docsText', fallback: '#101828').toCss(),
          ).merge(dartStyle),
          style: style,
        ),
        children: [
          if (nav != null) toFlintNode(nav),
          SafeArea(
            child: ConstrainedBox(
              maxWidth: maxWidth,
              center: true,
              child: ResponsiveGrid(
                columns: sidebar == null
                    ? 'minmax(0, 1fr)'
                    : '260px minmax(0, 1fr)',
                gap: 32,
                dartStyle: const DartStyle(
                  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 32),
                  alignItems: AlignItems.start,
                ),
                children: [
                  if (sidebar != null)
                    FlintElement(
                      'aside',
                      children: normalizeChildren(sidebar, const []),
                    ),
                  FlintElement(
                    'main',
                    children: [
                      if (title != null || description != null)
                        _ShellHeading(title: title, description: description),
                      ...normalizeChildren(child, children),
                      if (footer != null) toFlintNode(footer),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      );