drawerStory top-level property

Implementation

Story drawerStory = Story(
  name: 'Drawer',
  builder: (context) {
    final drawerVariant = context.knobs.options(
      label: 'Drawer Variant',
      options: [
        Option(label: 'Left Drawer', value: DrawerVariant.leftDrawer),
        Option(label: 'Right Drawer', value: DrawerVariant.rightDrawer),
      ],
      initial: DrawerVariant.leftDrawer,
    );

    final drawerWidth = context.knobs.slider(
      label: 'Drawer Width',
      initial: 350,
      min: 250,
      max: 500,
    );

    final isDrawerVisible = context.knobs.boolean(
      label: 'Show Drawer',
      initial: true,
    );

    final customContents = ListView(
      padding: EdgeInsets.zero,
      children: [
        const Divider(
          color: Colors.grey,
          thickness: 1,
          height: 1,
        ),
        Material(
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              title: AppTypography.body(
                'Home',
                BodySize.large,
                color: Colors.black,
              ),
              leading: const Icon(Icons.home),
              onTap: () {},
              hoverColor: ThemeColors.primary.withOpacity(0.1),
              splashColor: ThemeColors.primary,
              tileColor: Colors.white,
            ),
          ),
        ),
        Material(
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              title: AppTypography.body(
                'Services',
                BodySize.large,
                color: Colors.black,
              ),
              leading: const Icon(Icons.design_services),
              onTap: () {},
              hoverColor: ThemeColors.primary.withOpacity(0.1),
              splashColor: ThemeColors.primary,
              tileColor: Colors.white,
            ),
          ),
        ),
        Material(
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              title: AppTypography.body(
                'Support',
                BodySize.large,
                color: Colors.black,
              ),
              leading: const Icon(Icons.support),
              onTap: () {},
              hoverColor: ThemeColors.primary.withOpacity(0.1),
              splashColor: ThemeColors.primary,
              tileColor: Colors.white,
            ),
          ),
        ),
        Material(
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              title: AppTypography.body(
                'About',
                BodySize.large,
                color: Colors.black,
              ),
              leading: const Icon(Icons.info),
              onTap: () {},
              hoverColor: ThemeColors.primary.withOpacity(0.1),
              splashColor: ThemeColors.primary,
              tileColor: Colors.white,
            ),
          ),
        ),
        const Divider(
          color: Colors.grey,
          thickness: 1,
          height: 1,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 5),
          child: DDSCheckbox(
            labelText: 'Show Notifications',
            variant: CheckboxVariant.defaultVariant,
            onChanged: (value) {},
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 5),
          child: DDSCheckbox(
            labelText: 'Enable Dark Mode',
            variant: CheckboxVariant.defaultVariant,
            onChanged: (value) {},
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 5),
          child: DDSCheckbox(
            labelText: 'Email Updates',
            variant: CheckboxVariant.defaultVariant,
            onChanged: (value) {},
          ),
        ),
      ],
    );

    final headerContents = HeaderContents(
      mainTitle: context.knobs
          .text(label: 'Header Title', initial: 'Foxsense Innovations'),
      title: context.knobs.text(label: 'Subtitle', initial: 'John Williams'),
      subtitle: context.knobs
          .text(label: 'Description', initial: 'Software Engineer'),
      icon: const Icon(Icons.close, size: 32, color: Colors.black),
      avatar: DDSAvatar(
        size: AvatarSize.large,
        state: AvatarState.active,
        type: AvatarType.initial,
        initials: 'JD',
      ),
      onIconTap: () {
      },
    );

    final footerContents = FooterContents(
      items: [
        FooterItem(
          title: context.knobs.text(
            label: 'Footer Item 1',
            initial: 'Privacy Policy',
          ),
          onTap: () {},
        ),
        FooterItem(
          title: context.knobs.text(
            label: 'Footer Item 2',
            initial: 'Terms of Service',
          ),
          onTap: () {},
        ),
      ],
    );

    return Stack(
      children: [
        const Center(
          child: Text('Main Content Area'),
        ),
        if (isDrawerVisible)
          Positioned(
            left: drawerVariant == DrawerVariant.leftDrawer ? 0 : null,
            right: drawerVariant == DrawerVariant.rightDrawer ? 0 : null,
            top: 0,
            bottom: 0,
            child: DDSDrawer(
              contents: customContents,
              variant: drawerVariant,
              width: drawerWidth.toDouble(),
              headerContents: headerContents,
              footerContents: footerContents,
            ),
          ),
      ],
    );
  },
);