menuBarStory top-level property

Implementation

Story menuBarStory = Story(
  name: 'Menu Bar',
  builder: (context) {
    final buttonLabel =
        context.knobs.text(label: 'Button Label', initial: 'Open Menu');

    final menuWidth = context.knobs.slider(
      label: 'Menu Width',
      min: 100,
      max: 500,
      initial: 250,
    );

    final menuHeight = context.knobs.slider(
      label: 'Menu Height',
      min: 100,
      max: 500,
      initial: 200,
    );

    final menuBorderRadius = context.knobs.slider(
      label: 'Menu Border Radius',
      min: 0,
      max: 50,
      initial: 10,
    );

    final menuOffset = context.knobs.slider(
      label: 'Menu Offset',
      min: -300,
      max: 200,
      initial: 66,
    );

    final backgroundOpacity = context.knobs.slider(
      label: 'Background Opacity',
      min: 0.0,
      max: 1.0,
      initial: 0.7,
    );

    final outsideClick =
        context.knobs.boolean(label: 'Outside Click to Close', initial: true);

    final buttonSize = context.knobs.options(
      label: 'Button Size',
      options: [
        Option(label: 'Small', value: ButtonSize.small),
        Option(label: 'Medium', value: ButtonSize.medium),
        Option(label: 'Large', value: ButtonSize.large),
      ],
      initial: ButtonSize.medium,
    );

    final primaryButtonBackgroundColor = context.knobs.options(
      label: 'Primary Button Background Color',
      initial: Color(0xFFF15A29),
      options: const [
        Option(label: 'Green', value: Colors.green),
        Option(label: 'Blue', value: Colors.blue),
        Option(label: 'Red', value: Color(0xFFF15A29)),
      ],
    );

    final hasEndIcon =
        context.knobs.boolean(label: 'Show End Icon', initial: false);

    final endIconSize = context.knobs.slider(
      label: 'End Icon Size',
      min: 12,
      max: 36,
      initial: 18,
    );

    return DDSMenuBar(
      buttonLabel: buttonLabel,
      menuWidth: menuWidth,
      menuHeight: menuHeight,
      menuOffset: menuOffset,
      menuBorderRadius: menuBorderRadius,
      backgroundOpacity: backgroundOpacity,
      outsideClick: outsideClick,
      buttonSize: buttonSize,
      buttonPrimaryButtonBackgroundColor: primaryButtonBackgroundColor,
      buttonOnPressed: () {},
      buttonEndIcon: hasEndIcon
          ? Icon(Icons.close, color: Colors.white, size: endIconSize)
          : null,
      customMenu: Container(
        height: menuHeight,
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Living Room',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '2',
                          style: TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Bedroom',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '3',
                          style: TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Bathroom',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '5',
                          style: TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Kitchen',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '1',
                          style: TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Dining Room',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '1',
                          style: TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Office',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '2',
                          style: TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Garage',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '1',
                          style: TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Garden',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '1',
                          style: TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  },
);