Sidebar constructor

Sidebar({
  1. List<SidebarItem> items = const [],
  2. String? activePath,
  3. bool collapsed = false,
  4. String? className,
  5. Map<String, Object?> props = const {},
  6. Map<String, Object?> style = const {},
  7. DartStyle? dartStyle,
  8. String? itemClassName,
  9. String? activeItemClassName,
  10. Map<String, Object?> itemStyle = const {},
  11. Map<String, Object?> activeItemStyle = const {},
  12. DartStyle? itemDartStyle,
  13. DartStyle? activeItemDartStyle,
  14. void onToggle(
    1. Object event
    )?,
})

Creates a sidebar from navigation items.

Implementation

Sidebar({
  List<SidebarItem> items = const [],
  String? activePath,
  bool collapsed = false,
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
  String? itemClassName,
  String? activeItemClassName,
  Map<String, Object?> itemStyle = const {},
  Map<String, Object?> activeItemStyle = const {},
  DartStyle? itemDartStyle,
  DartStyle? activeItemDartStyle,
  void Function(Object event)? onToggle,
}) : super(
       'nav',
       props: mergeComponentProps(
         {...props, 'aria-label': props['aria-label'] ?? 'Sidebar'},
         className: className,
         defaultStyle: const {
           'display': 'grid',
           'gap': '6px',
           'padding': '12px',
         },
         dartStyle: dartStyle,
         style: style,
       ),
       children: [
         if (onToggle != null)
           FlintElement(
             'button',
             props: {
               'type': 'button',
               'aria-expanded': (!collapsed).toString(),
               'onClick': onToggle,
             },
             children: normalizeChildren(
               collapsed ? 'Expand' : 'Collapse',
               const [],
             ),
           ),
         for (final item in items)
           _sidebarLink(
             item,
             active: item.active || item.href == activePath,
             collapsed: collapsed,
             itemClassName: itemClassName,
             activeItemClassName: activeItemClassName,
             itemStyle: itemStyle,
             activeItemStyle: activeItemStyle,
             itemDartStyle: itemDartStyle,
             activeItemDartStyle: activeItemDartStyle,
           ),
       ],
     );