Navigation rail

example/lib/home.dart

@@ -15,6 +15,7 @@ import 'package:zeta_example/pages/components/dialpad_example.dart';
 import 'package:zeta_example/pages/components/dropdown_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
 import 'package:zeta_example/pages/components/navigation_bar_example.dart';
+import 'package:zeta_example/pages/components/navigation_rail_example.dart';
 import 'package:zeta_example/pages/components/phone_input_example.dart';
 import 'package:zeta_example/pages/components/radio_example.dart';
 import 'package:zeta_example/pages/components/stepper_example.dart';
@@ -64,6 +65,7 @@ final List<Component> components = [
   Component(DateInputExample.name, (context) => const DateInputExample()),
   Component(PhoneInputExample.name, (context) => const PhoneInputExample()),
   Component(DialogExample.name, (context) => const DialogExample()),
+  Component(NavigationRailExample.name, (context) => const NavigationRailExample()),
 ];
 
 final List<Component> theme = [

example/lib/pages/components/navigation_rail_example.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class NavigationRailExample extends StatefulWidget {
+  static const String name = 'NavigationRail';
+
+  const NavigationRailExample({Key? key}) : super(key: key);
+
+  @override
+  State<NavigationRailExample> createState() => _NavigationRailExampleState();
+}
+
+class _NavigationRailExampleState extends State<NavigationRailExample> {
+  List<String> _titles = [
+    'Label',
+    'User Preferences',
+    'Account Settings',
+    'Label',
+  ];
+  int? _selectedIndex;
+
+  @override
+  Widget build(BuildContext context) {
+    final zeta = Zeta.of(context);
+
+    return SafeArea(
+      child: ExampleScaffold(
+        name: 'Navigation Rail',
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ZetaNavigationRail(
+              selectedIndex: _selectedIndex,
+              onSelect: (index) => setState(() => _selectedIndex = index),
+              wordWrap: false,
+              items: [
+                ZetaNavigationRailItem(
+                  label: 'Label',
+                  icon: Icon(ZetaIcons.star_round),
+                ),
+                ZetaNavigationRailItem(
+                  label: 'User\nPreferences',
+                  icon: Icon(ZetaIcons.star_round),
+                ),
+                ZetaNavigationRailItem(
+                  label: 'Account Settings',
+                  icon: Icon(ZetaIcons.star_round),
+                ),
+                ZetaNavigationRailItem(
+                  label: 'Label',
+                  icon: Icon(ZetaIcons.star_round),
+                  disabled: true,
+                ),
+              ],
+            ),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.all(ZetaSpacing.x5),
+                child: _selectedIndex == null
+                    ? const SizedBox()
+                    : Text(
+                        _titles[_selectedIndex!],
+                        textAlign: TextAlign.center,
+                        style: ZetaTextStyles.titleMedium.copyWith(
+                          color: zeta.colors.textDefault,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/widgetbook/main.dart

@@ -20,6 +20,7 @@ import 'pages/components/dropdown_widgetbook.dart';
 import 'pages/components/in_page_banner_widgetbook.dart';
 import 'pages/components/list_item_widgetbook.dart';
 import 'pages/components/navigation_bar_widgetbook.dart';
+import 'pages/components/navigation_rail_widgetbook.dart';
 import 'pages/components/pagination_widgetbook.dart';
 import 'pages/components/password_input_widgetbook.dart';
 import 'pages/components/phone_input_widgetbook.dart';
@@ -126,6 +127,7 @@ class HotReload extends StatelessWidget {
               builder: (context) => stepperUseCase(context),
             ),
             WidgetbookUseCase(name: 'Dialog', builder: (context) => dialogUseCase(context)),
+            WidgetbookUseCase(name: 'Navigation Rail', builder: (context) => navigationRailUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
         WidgetbookCategory(

example/widgetbook/pages/components/navigation_rail_widgetbook.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+import '../../utils/utils.dart';
+
+Widget navigationRailUseCase(BuildContext context) {
+  final zeta = Zeta.of(context);
+  int? selectedIndex;
+  final items = context.knobs.string(
+    label: 'Items separated with comma',
+    initialValue: 'Label,User Preferences,Account Settings,Label',
+  );
+  final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
+  final iconData = iconKnob(
+    context,
+    name: "Icon",
+    rounded: rounded,
+    initial: rounded ? ZetaIcons.star_round : ZetaIcons.star_sharp,
+  );
+  final wordWrap = context.knobs.boolean(label: 'Word wrap', initialValue: true);
+  final disabled = context.knobs.boolean(label: 'Disabled', initialValue: false);
+  final itemsList = items.split(',').where((element) => element.trim().isNotEmpty).toList();
+  return SafeArea(
+    child: WidgetbookTestWidget(
+      widget: StatefulBuilder(
+        builder: (context, setState) {
+          return Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              ZetaNavigationRail(
+                selectedIndex: selectedIndex,
+                onSelect: (index) => setState(() => selectedIndex = index),
+                wordWrap: wordWrap,
+                items: itemsList
+                    .map((item) => ZetaNavigationRailItem(
+                          label: item,
+                          icon: Icon(iconData),
+                          disabled: disabled,
+                        ))
+                    .toList(),
+              ),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.all(ZetaSpacing.x5),
+                  child: selectedIndex == null
+                      ? const SizedBox()
+                      : Text(
+                          itemsList[selectedIndex!],
+                          textAlign: TextAlign.center,
+                          style: ZetaTextStyles.titleMedium.copyWith(
+                            color: zeta.colors.textDefault,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                ),
+              ),
+            ],
+          );
+        },
+      ),
+    ),
+  );
+}