scaffold method

@override Widget scaffold(ArcaneScaffoldProps props)

Implementation

@override
Widget scaffold(ArcaneScaffoldProps props) {
  return dom.div(
    classes: 'arcane-scaffold arcane-default-scaffold',
    styles: const dom.Styles(
      raw: <String, String>{
        'min-height': '100vh',
        'display': 'flex',
        'flex-direction': 'column',
        'background': 'var(--background)',
        'color': 'var(--foreground)',
      },
    ),
    <Widget>[
      if (_hasHeader(props)) _header(props),
      dom.div(
        classes: 'arcane-scaffold-body',
        attributes: <String, String>{
          if (props.sidebar != null) 'data-has-sidebar': '',
          if (props.secondary != null) 'data-has-secondary': '',
        },
        styles: dom.Styles(
          raw: <String, String>{
            'display': 'grid',
            'grid-template-columns': _gridTemplateColumns(props),
            'min-height': '0',
            'flex': '1',
          },
        ),
        <Widget>[
          if (props.sidebar != null)
            dom.aside(
              classes: 'arcane-scaffold-sidebar',
              styles: const dom.Styles(
                raw: <String, String>{
                  'width': '18rem',
                  'border-right': '1px solid var(--border)',
                  'background': 'var(--background)',
                  'padding': '1rem',
                  'align-self': 'start',
                  'height': 'max-content',
                  'max-height': 'none',
                  'min-height': '0',
                  'overflow': 'visible',
                },
              ),
              <Widget>[props.sidebar!],
            ),
          dom.main_(
            classes: 'arcane-scaffold-main',
            styles: const dom.Styles(
              raw: <String, String>{
                'min-width': '0',
                'padding': '1.5rem',
                'overflow': 'auto',
              },
            ),
            <Widget>[props.body],
          ),
          if (props.secondary != null)
            dom.aside(
              classes: 'arcane-scaffold-secondary',
              styles: const dom.Styles(
                raw: <String, String>{
                  'width': '18rem',
                  'border-left': '1px solid var(--border)',
                  'background': 'var(--background)',
                  'padding': '1rem',
                  'min-height': '0',
                  'overflow': 'auto',
                },
              ),
              <Widget>[props.secondary!],
            ),
        ],
      ),
      if (props.footer != null)
        dom.footer(
          classes: 'arcane-scaffold-footer',
          styles: const dom.Styles(
            raw: <String, String>{
              'border-top': '1px solid var(--border)',
              'padding': '0.875rem 1.25rem',
              'background': 'var(--background)',
            },
          ),
          <Widget>[props.footer!],
        ),
      if (props.floatingAction != null)
        dom.div(
          classes: 'arcane-scaffold-floating',
          styles: const dom.Styles(
            raw: <String, String>{
              'position': 'fixed',
              'right': '1.25rem',
              'bottom': '1.25rem',
              'z-index': '40',
            },
          ),
          <Widget>[props.floatingAction!],
        ),
    ],
  );
}