AppShell constructor

AppShell({
  1. Object? brand,
  2. Object? sidebar,
  3. Object? topbar,
  4. Object? child,
  5. List<Object?> children = const [],
  6. String? className,
  7. Map<String, Object?> props = const {},
  8. Map<String, Object?> style = const {},
  9. DartStyle? dartStyle,
})

Creates an app shell around sidebar and main page content.

Implementation

AppShell({
  Object? brand,
  Object? sidebar,
  Object? topbar,
  Object? child,
  List<Object?> children = const [],
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
}) : super(
        'div',
        props: mergeComponentProps(
          props,
          className: className,
          defaultStyle: const {
            'display': 'grid',
            'grid-template-columns': '280px minmax(0, 1fr)',
            'min-height': '100vh',
            'background': '#f8fafc',
            'color': '#101828',
          },
          dartStyle: dartStyle,
          style: style,
        ),
        children: [
          if (sidebar != null)
            FlintElement(
              'aside',
              props: const {
                'style': {
                  'border-right': '1px solid #e4e7ec',
                  'background': '#ffffff',
                },
              },
              children: [
                if (brand != null)
                  FlintElement(
                    'div',
                    props: const {
                      'style': {
                        'padding': '20px',
                        'border-bottom': '1px solid #e4e7ec',
                        'font-weight': 700,
                      },
                    },
                    children: normalizeChildren(brand, const []),
                  ),
                toFlintNode(sidebar),
              ],
            ),
          FlintElement(
            'div',
            props: const {
              'style': {
                'min-width': 0,
                'display': 'grid',
                'grid-template-rows': 'auto minmax(0, 1fr)',
              },
            },
            children: [
              if (topbar != null) toFlintNode(topbar),
              FlintElement(
                'main',
                props: const {
                  'style': {'min-width': 0, 'padding': '24px'},
                },
                children: normalizeChildren(child, children),
              ),
            ],
          ),
        ],
      );