Escritorio y adaptación móvil

import 'package:flutter/material.dart';
import 'package:issel_code_widgets/issel_code_widgets.dart';

class DocumentationShell extends StatefulWidget {
  const DocumentationShell({
    super.key,
    required this.app,
    required this.overview,
    required this.components,
  });

  final IsselAppController app;
  final Widget overview;
  final Widget components;

  @override
  State<DocumentationShell> createState() => _DocumentationShellState();
}

class _DocumentationShellState extends State<DocumentationShell> {
  static const _items = [
    IsselNavigationItem(
      id: 'overview',
      label: 'Introducción',
      icon: Icons.home_outlined,
    ),
    IsselNavigationItem(
      id: 'components',
      label: 'Componentes',
      icon: Icons.widgets_outlined,
    ),
    IsselNavigationItem(
      id: 'appearance',
      label: 'Apariencia',
      icon: Icons.palette_outlined,
    ),
  ];

  String _selectedId = 'overview';
  bool _sidebarOpen = true;

  int get _selectedIndex => _items.indexWhere((item) => item.id == _selectedId);
  String get _title => _items[_selectedIndex].label;

  @override
  Widget build(BuildContext context) {
    final config = widget.app.config.desktop;
    final content = IndexedStack(
      index: _selectedIndex,
      children: [
        widget.overview,
        widget.components,
        SingleChildScrollView(
          padding: const EdgeInsets.all(24),
          child: IsselThemeSelector(controller: widget.app.theme),
        ),
      ],
    );

    return LayoutBuilder(builder: (context, constraints) {
      if (constraints.maxWidth < config.sidebarBreakpoint) {
        return Scaffold(
          appBar: AppBar(title: Text(_title)),
          drawer: Drawer(
            width: 260,
            child: SafeArea(
              child: Builder(
                  builder: (drawerContext) => _pane(
                        width: 260,
                        afterSelection: () => Navigator.of(drawerContext).pop(),
                      )),
            ),
          ),
          body: content,
        );
      }

      return IsselDesktopScaffold(
        config: config,
        sidebarOpen: _sidebarOpen,
        onSidebarClose: () => setState(() => _sidebarOpen = false),
        sidebar: _pane(width: config.sidebarWidth),
        caption: IsselDesktopCaption(
          height: config.captionHeight,
          leading: _sidebarOpen
              ? null
              : IsselCaptionButton(
                  icon: const Icon(Icons.menu),
                  tooltip: 'Abrir menú',
                  onPressed: () => setState(() => _sidebarOpen = true),
                ),
          title: IsselBreadcrumbs(items: [
            IsselBreadcrumbItem(label: widget.app.config.title),
            IsselBreadcrumbItem(label: _title),
          ]),
          actions: [
            IsselCaptionButton(
              icon: const Icon(Icons.palette_outlined),
              tooltip: 'Configurar apariencia',
              onPressed: () => setState(() => _selectedId = 'appearance'),
            ),
          ],
        ),
        child: content,
      );
    });
  }

  Widget _pane({required double width, VoidCallback? afterSelection}) =>
      IsselNavigationPane(
        width: width,
        header: Text(widget.app.config.title),
        items: _items,
        selectedId: _selectedId,
        onSelected: (id) {
          setState(() => _selectedId = id);
          afterSelection?.call();
        },
      );
}

// Fragmento de composición; el adaptador lo proporciona la app:
IsselDesktopCaption(
  title: const Text('Inventario'),
  dragAreaBuilder: (context, child) => windowAdapter.dragArea(child),
  windowControls: windowAdapter.controls,
)