packages/wyatt_ui_components/example/lib/components/custom_app_bar.dart

@@ -5,7 +5,7 @@ import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 part 'custom_app_bar.g.dart';
 
 @ComponentCopyWithExtension()
-class CustomAppBar extends AppBarComponent with $CustomAppBarCWMixin {
+class CustomAppBar extends TopAppBarComponent with $CustomAppBarCWMixin {
   const CustomAppBar({super.title, super.key});
 
   @override

packages/wyatt_ui_components/example/lib/components/custom_app_bar.g.dart

@@ -6,22 +6,85 @@ part of 'custom_app_bar.dart';
 // ComponentCopyWithGenerator
 // **************************************************************************
 
-class $CustomAppBarCWProxyImpl implements $AppBarComponentCWProxy {
+class $CustomAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
   const $CustomAppBarCWProxyImpl(this._value);
   final CustomAppBar _value;
   @override
   CustomAppBar title(TextWrapper? title) => this(title: title);
   @override
+  CustomAppBar centerTitle(bool? centerTitle) => this(centerTitle: centerTitle);
+  @override
+  CustomAppBar shape(ShapeBorder? shape) => this(shape: shape);
+  @override
+  CustomAppBar systemOverlayStyle(SystemUiOverlayStyle? systemOverlayStyle) =>
+      this(systemOverlayStyle: systemOverlayStyle);
+  @override
+  CustomAppBar automaticallyImplyLeading(bool? automaticallyImplyLeading) =>
+      this(automaticallyImplyLeading: automaticallyImplyLeading);
+  @override
+  CustomAppBar flexibleSpace(Widget? flexibleSpace) =>
+      this(flexibleSpace: flexibleSpace);
+  @override
+  CustomAppBar bottom(PreferredSizeWidget? bottom) => this(bottom: bottom);
+  @override
+  CustomAppBar elevation(double? elevation) => this(elevation: elevation);
+  @override
+  CustomAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
+      this(scrolledUnderElevation: scrolledUnderElevation);
+  @override
+  CustomAppBar shadowColor(Color? shadowColor) =>
+      this(shadowColor: shadowColor);
+  @override
+  CustomAppBar surfaceTintColor(Color? surfaceTintColor) =>
+      this(surfaceTintColor: surfaceTintColor);
+  @override
+  CustomAppBar backgroundColor(MultiColor? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  CustomAppBar iconTheme(IconThemeData? iconTheme) =>
+      this(iconTheme: iconTheme);
+  @override
+  CustomAppBar primary(bool? primary) => this(primary: primary);
+  @override
+  CustomAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
+      this(excludeHeaderSemantics: excludeHeaderSemantics);
+  @override
+  CustomAppBar toolbarHeight(double? toolbarHeight) =>
+      this(toolbarHeight: toolbarHeight);
+  @override
+  CustomAppBar leadingWidth(double? leadingWidth) =>
+      this(leadingWidth: leadingWidth);
+  @override
   CustomAppBar leading(Widget? leading) => this(leading: leading);
   @override
   CustomAppBar actions(List<Widget>? actions) => this(actions: actions);
   @override
+  CustomAppBar expandedWidget(List<Widget>? expandedWidget) =>
+      this(expandedWidget: expandedWidget);
+  @override
   CustomAppBar key(Key? key) => this(key: key);
   @override
   CustomAppBar call({
     TextWrapper? title,
+    bool? centerTitle,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
     Widget? leading,
     List<Widget>? actions,
+    List<Widget>? expandedWidget,
     Key? key,
   }) =>
       CustomAppBar(
@@ -31,6 +94,6 @@ class $CustomAppBarCWProxyImpl implements $AppBarComponentCWProxy {
 }
 
 mixin $CustomAppBarCWMixin on Component {
-  $AppBarComponentCWProxy get copyWith =>
+  $TopAppBarComponentCWProxy get copyWith =>
       $CustomAppBarCWProxyImpl(this as CustomAppBar);
 }

packages/wyatt_ui_components/lib/src/domain/entities/app_bar_component.g.dart

@@ -1,20 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'app_bar_component.dart';
-
-// **************************************************************************
-// ComponentProxyGenerator
-// **************************************************************************
-
-abstract class $AppBarComponentCWProxy {
-  AppBarComponent title(TextWrapper? title);
-  AppBarComponent leading(Widget? leading);
-  AppBarComponent actions(List<Widget>? actions);
-  AppBarComponent key(Key? key);
-  AppBarComponent call({
-    TextWrapper? title,
-    Widget? leading,
-    List<Widget>? actions,
-    Key? key,
-  });
-}

packages/wyatt_ui_components/lib/src/domain/entities/bars/bars.dart

@@ -0,0 +1,19 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export './bottom_navigation_bar_component.dart';
+export './top_navigation_bar_component.dart';
+export 'top_app_bar_component.dart';

packages/wyatt_ui_components/lib/src/domain/entities/bars/bottom_navigation_bar_component.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
 // Copyright (C) 2023 WYATT GROUP
 // Please see the AUTHORS file for details.
 //
@@ -16,6 +14,8 @@ import 'package:wyatt_component_copy_with_extension/component_copy_with_extensio
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
+import 'package:flutter/material.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
 import 'package:wyatt_ui_components/src/core/mixins/copy_with_mixin.dart';
 import 'package:wyatt_ui_components/src/domain/entities/component.dart';
 

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_app_bar_component.dart

@@ -0,0 +1,53 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// super program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// super program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with super program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/src/domain/entities/bars/top_bar_component.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'top_app_bar_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class TopAppBarComponent extends TopBarComponent
+    with CopyWithMixin<$TopAppBarComponentCWProxy> {
+  const TopAppBarComponent({
+    this.title,
+    this.centerTitle,
+    super.shape,
+    super.systemOverlayStyle,
+    super.automaticallyImplyLeading,
+    super.flexibleSpace,
+    super.bottom,
+    super.elevation,
+    super.scrolledUnderElevation,
+    super.shadowColor,
+    super.surfaceTintColor,
+    super.backgroundColor,
+    super.iconTheme,
+    super.primary,
+    super.excludeHeaderSemantics,
+    super.toolbarHeight,
+    super.leadingWidth,
+    super.leading,
+    super.actions,
+    super.expandedWidget,
+    super.key,
+  });
+  final TextWrapper? title;
+  final bool? centerTitle;
+}

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_app_bar_component.g.dart

@@ -0,0 +1,55 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'top_app_bar_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $TopAppBarComponentCWProxy {
+  TopAppBarComponent title(TextWrapper? title);
+  TopAppBarComponent centerTitle(bool? centerTitle);
+  TopAppBarComponent shape(ShapeBorder? shape);
+  TopAppBarComponent systemOverlayStyle(
+      SystemUiOverlayStyle? systemOverlayStyle);
+  TopAppBarComponent automaticallyImplyLeading(bool? automaticallyImplyLeading);
+  TopAppBarComponent flexibleSpace(Widget? flexibleSpace);
+  TopAppBarComponent bottom(PreferredSizeWidget? bottom);
+  TopAppBarComponent elevation(double? elevation);
+  TopAppBarComponent scrolledUnderElevation(double? scrolledUnderElevation);
+  TopAppBarComponent shadowColor(Color? shadowColor);
+  TopAppBarComponent surfaceTintColor(Color? surfaceTintColor);
+  TopAppBarComponent backgroundColor(MultiColor? backgroundColor);
+  TopAppBarComponent iconTheme(IconThemeData? iconTheme);
+  TopAppBarComponent primary(bool? primary);
+  TopAppBarComponent excludeHeaderSemantics(bool? excludeHeaderSemantics);
+  TopAppBarComponent toolbarHeight(double? toolbarHeight);
+  TopAppBarComponent leadingWidth(double? leadingWidth);
+  TopAppBarComponent leading(Widget? leading);
+  TopAppBarComponent actions(List<Widget>? actions);
+  TopAppBarComponent expandedWidget(List<Widget>? expandedWidget);
+  TopAppBarComponent key(Key? key);
+  TopAppBarComponent call({
+    TextWrapper? title,
+    bool? centerTitle,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_bar_component.dart

@@ -0,0 +1,62 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+abstract class TopBarComponent extends Component {
+  const TopBarComponent({
+    this.leading,
+    this.actions,
+    this.automaticallyImplyLeading,
+    this.flexibleSpace,
+    this.bottom,
+    this.elevation,
+    this.scrolledUnderElevation,
+    this.shadowColor,
+    this.surfaceTintColor,
+    this.backgroundColor,
+    this.iconTheme,
+    this.primary,
+    this.excludeHeaderSemantics,
+    this.toolbarHeight,
+    this.leadingWidth,
+    this.systemOverlayStyle,
+    this.shape,
+    this.expandedWidget,
+    super.key,
+  });
+
+  final Widget? leading;
+  final List<Widget>? actions;
+  final bool? automaticallyImplyLeading;
+  final Widget? flexibleSpace;
+  final PreferredSizeWidget? bottom;
+  final double? elevation;
+  final double? scrolledUnderElevation;
+  final Color? shadowColor;
+  final Color? surfaceTintColor;
+  final MultiColor? backgroundColor;
+  final IconThemeData? iconTheme;
+  final bool? primary;
+  final bool? excludeHeaderSemantics;
+  final double? toolbarHeight;
+  final double? leadingWidth;
+  final SystemUiOverlayStyle? systemOverlayStyle;
+  final ShapeBorder? shape;
+  final List<Widget>? expandedWidget;
+}

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_navigation_bar_component.dart

@@ -0,0 +1,56 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/src/domain/entities/bars/top_bar_component.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'top_navigation_bar_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class TopNavigationBarComponent extends TopBarComponent
+    with CopyWithMixin<$TopNavigationBarComponentCWProxy> {
+  const TopNavigationBarComponent({
+    this.navigationItems,
+    this.onTap,
+    this.currentIndex = 0,
+    super.shape,
+    super.systemOverlayStyle,
+    super.automaticallyImplyLeading,
+    super.flexibleSpace,
+    super.bottom,
+    super.elevation,
+    super.scrolledUnderElevation,
+    super.shadowColor,
+    super.surfaceTintColor,
+    super.backgroundColor,
+    super.iconTheme,
+    super.primary,
+    super.excludeHeaderSemantics,
+    super.toolbarHeight,
+    super.leadingWidth,
+    super.leading,
+    super.actions,
+    super.expandedWidget,
+    super.key,
+  });
+
+  final List<TextWrapper>? navigationItems;
+  final int currentIndex;
+  final void Function(BuildContext, int)? onTap;
+}

packages/wyatt_ui_components/lib/src/domain/entities/bars/top_navigation_bar_component.g.dart

@@ -0,0 +1,60 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'top_navigation_bar_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $TopNavigationBarComponentCWProxy {
+  TopNavigationBarComponent navigationItems(List<TextWrapper>? navigationItems);
+  TopNavigationBarComponent onTap(void Function(BuildContext, int)? onTap);
+  TopNavigationBarComponent currentIndex(int? currentIndex);
+  TopNavigationBarComponent shape(ShapeBorder? shape);
+  TopNavigationBarComponent systemOverlayStyle(
+      SystemUiOverlayStyle? systemOverlayStyle);
+  TopNavigationBarComponent automaticallyImplyLeading(
+      bool? automaticallyImplyLeading);
+  TopNavigationBarComponent flexibleSpace(Widget? flexibleSpace);
+  TopNavigationBarComponent bottom(PreferredSizeWidget? bottom);
+  TopNavigationBarComponent elevation(double? elevation);
+  TopNavigationBarComponent scrolledUnderElevation(
+      double? scrolledUnderElevation);
+  TopNavigationBarComponent shadowColor(Color? shadowColor);
+  TopNavigationBarComponent surfaceTintColor(Color? surfaceTintColor);
+  TopNavigationBarComponent backgroundColor(MultiColor? backgroundColor);
+  TopNavigationBarComponent iconTheme(IconThemeData? iconTheme);
+  TopNavigationBarComponent primary(bool? primary);
+  TopNavigationBarComponent excludeHeaderSemantics(
+      bool? excludeHeaderSemantics);
+  TopNavigationBarComponent toolbarHeight(double? toolbarHeight);
+  TopNavigationBarComponent leadingWidth(double? leadingWidth);
+  TopNavigationBarComponent leading(Widget? leading);
+  TopNavigationBarComponent actions(List<Widget>? actions);
+  TopNavigationBarComponent expandedWidget(List<Widget>? expandedWidget);
+  TopNavigationBarComponent key(Key? key);
+  TopNavigationBarComponent call({
+    List<TextWrapper>? navigationItems,
+    void Function(BuildContext, int)? onTap,
+    int? currentIndex,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  });
+}

packages/wyatt_ui_components/lib/src/domain/entities/entities.dart

@@ -14,8 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-export './app_bar_component.dart';
-export './bottom_navigation_bar_component.dart';
+export './bars/bars.dart';
 export './buttons/buttons.dart';
 export './cards/cards.dart';
 export './component.dart';

packages/wyatt_ui_components/lib/src/features/component_theme_data.dart

@@ -19,6 +19,7 @@ import 'package:wyatt_ui_components/src/domain/entities/entities.dart';
 class ComponentThemeData {
   const ComponentThemeData.raw({
     this.appBar,
+    this.topNavigationBarComponent,
     this.bottomNavigationBar,
     this.errorWidget,
     this.loadingWidget,
@@ -34,8 +35,11 @@ class ComponentThemeData {
     this.quoteCardComponent,
     this.skillCardComponent,
   });
-  final AppBarComponent? appBar;
+  final TopAppBarComponent? appBar;
+
+  final TopNavigationBarComponent? topNavigationBarComponent;
   final BottomNavigationBarComponent? bottomNavigationBar;
+
   final ErrorWidgetComponent? errorWidget;
   final LoadingWidgetComponent? loadingWidget;
   final LoaderComponent? loaderComponent;

packages/wyatt_ui_kit/example/lib/bars/bars.dart

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/demo_page.dart';
+
+class Bars extends DemoPage {
+  const Bars({super.key});
+
+  @override
+  Widget build(BuildContext context) => ListView(
+        cacheExtent: 1000,
+        children: [
+          const Gap(20),
+          TopAppBar(
+            leading: Padding(
+              padding: const EdgeInsets.all(8),
+              child: Image.asset('assets/images/studio_logo.png'),
+            ),
+            title: 'Wyatt Studio'.wrap(
+              gradientColors: const MultiColor(
+                [
+                  Color.fromRGBO(57, 167, 254, 1),
+                  Color.fromRGBO(71, 94, 241, 1),
+                ],
+              ),
+            ),
+            actions: [
+              IconButton(onPressed: () {}, icon: const Icon(Icons.menu))
+            ],
+          ),
+          const Gap(20),
+          TopAppBar(
+            leading: Padding(
+              padding: const EdgeInsets.all(8),
+              child: Image.asset('assets/images/studio_logo.png'),
+            ),
+            title: 'Wyatt Studio'.wrap(
+              gradientColors: const MultiColor(
+                [
+                  Color.fromRGBO(57, 167, 254, 1),
+                  Color.fromRGBO(71, 94, 241, 1),
+                ],
+              ),
+            ),
+            expandedWidget: const [
+              ListTile(
+                title: Text('Votre programme'),
+              ),
+              ListTile(
+                title: Text('Votre programme'),
+              ),
+              ListTile(
+                title: Text('Votre programme'),
+              )
+            ],
+            actions: [
+              IconButton(
+                onPressed: () {},
+                icon: const Icon(Icons.clear),
+              )
+            ],
+          ),
+          const Gap(20),
+          TopNavigationBar(
+            leading: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 20),
+              child: Image.asset('assets/images/studio_long_logo.png'),
+            ),
+            actions: [
+              Padding(
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 20, vertical: 25),
+                child: FlatButton(
+                  label: 'Estimer mon projet'.wrap(),
+                ),
+              ),
+            ],
+            navigationItems: [
+              'ACCEUIL'.wrap(),
+              'VOTRE PROGRAMME'.wrap(),
+              'LE STUDIO'.wrap(),
+              'SAVOIR FAIRE'.wrap()
+            ].whereType<TextWrapper>().toList(),
+          ),
+        ],
+      );
+
+  @override
+  String get title => 'Bars';
+}

packages/wyatt_ui_kit/example/lib/home.dart

@@ -1,6 +1,7 @@
 import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
+import 'package:wyatt_ui_kit_example/bars/bars.dart';
 import 'package:wyatt_ui_kit_example/buttons/buttons.dart';
 import 'package:wyatt_ui_kit_example/cards/cards.dart';
 import 'package:wyatt_ui_kit_example/demo_page.dart';
@@ -28,6 +29,7 @@ class _HomeState extends State<Home> {
     Loaders(),
     RichTextBuilders(),
     TextInputs(),
+    Bars(),
   ];
 
   int currentIndex = 0;

packages/wyatt_ui_kit/example/lib/theme/themes.dart

@@ -25,6 +25,7 @@ import 'package:wyatt_ui_kit_example/theme/rich_text_builder_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/simple_icon_button_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/symbol_button_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/text_input_theme.dart';
+import 'package:wyatt_ui_kit_example/theme/top_bar_theme.dart';
 
 /// Easely switch between Material and Studio themes.
 abstract class Themes {
@@ -92,6 +93,7 @@ abstract class Themes {
           // Rich Text
           RichTextBuilderTheme.light(),
           TextInputTheme.light(),
+          TopAppBarTheme.light(),
         ],
       );
 
@@ -124,6 +126,7 @@ abstract class Themes {
           // Rich Text
           RichTextBuilderTheme.dark(),
           TextInputTheme.dark(),
+          TopAppBarTheme.dark(),
         ],
       );
 }

packages/wyatt_ui_kit/example/lib/theme/top_bar_theme.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class TopAppBarTheme extends TopBarThemeExtension {
+  const TopAppBarTheme({
+    super.iconTheme,
+    super.backgroundColors,
+    super.secondaryColor,
+    super.titleStyle,
+    super.subTitleStyle,
+  });
+
+  factory TopAppBarTheme.light() => TopAppBarTheme(
+        backgroundColors: const MultiColor.single(
+          Color.fromRGBO(246, 246, 246, 1),
+        ),
+        secondaryColor: const Color.fromRGBO(36, 38, 42, 1),
+        titleStyle: GoogleFonts.montserrat(
+          fontWeight: FontWeight.bold,
+          color: const Color.fromRGBO(36, 38, 42, 1),
+          fontSize: 18,
+        ),
+        subTitleStyle: GoogleFonts.montserrat(
+          fontWeight: FontWeight.w400,
+          color: const Color.fromRGBO(36, 38, 42, 1),
+          fontSize: 18,
+        ),
+        iconTheme: const IconThemeData(color: Color.fromRGBO(36, 38, 42, 1)),
+      );
+
+  factory TopAppBarTheme.dark() => TopAppBarTheme(
+        backgroundColors: const MultiColor([
+          Color.fromRGBO(44, 50, 56, 1),
+          Color.fromRGBO(39, 47, 61, 1),
+          Color.fromRGBO(44, 50, 56, 1),
+        ]),
+        secondaryColor: Colors.white,
+        titleStyle: GoogleFonts.montserrat(
+          fontWeight: FontWeight.bold,
+          fontSize: 18,
+        ),
+        subTitleStyle: GoogleFonts.montserrat(
+          fontWeight: FontWeight.w400,
+          fontSize: 18,
+        ),
+        iconTheme: const IconThemeData(color: Colors.white),
+      );
+
+  @override
+  ThemeExtension<TopBarThemeExtension> copyWith({
+    IconThemeData? iconTheme,
+    MultiColor? backgroundColors,
+    Color? secondaryColor,
+    TextStyle? titleStyle,
+  }) =>
+      TopAppBarTheme(
+        iconTheme: iconTheme ?? this.iconTheme,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        secondaryColor: secondaryColor ?? this.secondaryColor,
+        titleStyle: titleStyle ?? this.titleStyle,
+      );
+
+  @override
+  ThemeExtension<TopBarThemeExtension> lerp(
+    covariant ThemeExtension<TopBarThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! TopAppBarTheme) {
+      return this;
+    }
+    return TopAppBarTheme(
+      iconTheme: IconThemeData.lerp(iconTheme, other.iconTheme, t),
+      backgroundColors:
+          MultiColor.lerp(backgroundColors, other.backgroundColors, t),
+      secondaryColor: Color.lerp(secondaryColor, other.secondaryColor, t),
+      titleStyle: TextStyle.lerp(titleStyle, other.titleStyle, t),
+    );
+  }
+}

packages/wyatt_ui_kit/lib/src/components/bars/bars.dart

@@ -0,0 +1,18 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// super program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// super program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with super program. If not, see <https://www.gnu.org/licenses/>.
+
+export './top_app_bar.dart';
+export './top_navigation_bar.dart';

packages/wyatt_ui_kit/lib/src/components/bars/top_app_bar.dart

@@ -0,0 +1,134 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// super program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// super program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with super program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+part 'top_app_bar.g.dart';
+
+@ComponentCopyWithExtension()
+class TopAppBar extends TopAppBarComponent with $TopAppBarCWMixin {
+  const TopAppBar({
+    super.title,
+    super.centerTitle,
+    super.systemOverlayStyle,
+    super.automaticallyImplyLeading,
+    super.flexibleSpace,
+    super.bottom,
+    super.elevation,
+    super.scrolledUnderElevation,
+    super.shadowColor,
+    super.surfaceTintColor,
+    super.backgroundColor,
+    super.iconTheme,
+    super.primary,
+    super.excludeHeaderSemantics,
+    super.toolbarHeight,
+    super.leadingWidth,
+    super.leading,
+    super.actions,
+    super.shape,
+    super.expandedWidget,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) => DecoratedBox(
+        decoration: BoxDecoration(
+          gradient: ThemeHelper.getThemeElement<MultiColor, Gradient>(
+            [
+              backgroundColor,
+              context.themeExtension<TopBarThemeExtension>()?.backgroundColors,
+            ],
+            valueValidator: (value) => value?.isGradient,
+            transform: (value) =>
+                LinearGradientHelper.fromNullableColors(value?.colors),
+            defaultValue: null,
+          ),
+          color: ThemeHelper.getThemeElement<MultiColor, Color>(
+            [
+              backgroundColor,
+              context.themeExtension<TopBarThemeExtension>()?.backgroundColors,
+            ],
+            valueValidator: (value) => value?.isColor,
+            transform: (value) => value?.color,
+            defaultValue: Theme.of(context).appBarTheme.backgroundColor,
+          ),
+        ),
+        child: Column(
+          children: [
+            AppBar(
+              titleSpacing: 0,
+              backgroundColor: Colors.transparent,
+              systemOverlayStyle: systemOverlayStyle,
+              automaticallyImplyLeading: automaticallyImplyLeading ?? true,
+              flexibleSpace: flexibleSpace,
+              bottom: bottom,
+              elevation: elevation ?? 0,
+              scrolledUnderElevation: scrolledUnderElevation,
+              shadowColor: shadowColor,
+              surfaceTintColor: surfaceTintColor,
+              iconTheme:
+                  ThemeHelper.getThemeElement<IconThemeData, IconThemeData>(
+                [
+                  iconTheme,
+                  context.themeExtension<TopBarThemeExtension>()?.iconTheme,
+                ],
+                valueValidator: (value) => value != null,
+                transform: (value) => value,
+                defaultValue: Theme.of(context).iconTheme,
+              ),
+              primary: primary ?? true,
+              excludeHeaderSemantics: excludeHeaderSemantics ?? false,
+              leadingWidth: leadingWidth,
+              title: Text(
+                title?.data ?? '',
+                style: ThemeHelper.getThemeElement<TextStyle, TextStyle>(
+                  [
+                    title?.style,
+                    context.themeExtension<TopBarThemeExtension>()?.titleStyle
+                  ],
+                  valueValidator: (value) => value != null,
+                  transform: (value) => value,
+                  defaultValue: context.textTheme.titleLarge,
+                ),
+              ).toGradient(gradientColors: title?.gradientColors),
+              leading: leading,
+              actions: actions,
+              centerTitle: centerTitle ?? false,
+            ),
+            if (expandedWidget != null)
+              ...ListTile.divideTiles(
+                color: ThemeHelper.getThemeElement<Color, Color>(
+                  [
+                    context
+                        .themeExtension<TopBarThemeExtension>()
+                        ?.secondaryColor
+                        ?.withOpacity(0.1),
+                  ],
+                  valueValidator: (value) => value != null,
+                  transform: (value) => value,
+                  defaultValue: Theme.of(context).dividerColor,
+                ),
+                context: context,
+                tiles: expandedWidget!,
+              ),
+          ],
+        ),
+      );
+}

packages/wyatt_ui_kit/lib/src/components/bars/top_app_bar.g.dart

@@ -0,0 +1,119 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'top_app_bar.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $TopAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
+  const $TopAppBarCWProxyImpl(this._value);
+  final TopAppBar _value;
+  @override
+  TopAppBar title(TextWrapper? title) => this(title: title);
+  @override
+  TopAppBar centerTitle(bool? centerTitle) => this(centerTitle: centerTitle);
+  @override
+  TopAppBar shape(ShapeBorder? shape) => this(shape: shape);
+  @override
+  TopAppBar systemOverlayStyle(SystemUiOverlayStyle? systemOverlayStyle) =>
+      this(systemOverlayStyle: systemOverlayStyle);
+  @override
+  TopAppBar automaticallyImplyLeading(bool? automaticallyImplyLeading) =>
+      this(automaticallyImplyLeading: automaticallyImplyLeading);
+  @override
+  TopAppBar flexibleSpace(Widget? flexibleSpace) =>
+      this(flexibleSpace: flexibleSpace);
+  @override
+  TopAppBar bottom(PreferredSizeWidget? bottom) => this(bottom: bottom);
+  @override
+  TopAppBar elevation(double? elevation) => this(elevation: elevation);
+  @override
+  TopAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
+      this(scrolledUnderElevation: scrolledUnderElevation);
+  @override
+  TopAppBar shadowColor(Color? shadowColor) => this(shadowColor: shadowColor);
+  @override
+  TopAppBar surfaceTintColor(Color? surfaceTintColor) =>
+      this(surfaceTintColor: surfaceTintColor);
+  @override
+  TopAppBar backgroundColor(MultiColor? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  TopAppBar iconTheme(IconThemeData? iconTheme) => this(iconTheme: iconTheme);
+  @override
+  TopAppBar primary(bool? primary) => this(primary: primary);
+  @override
+  TopAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
+      this(excludeHeaderSemantics: excludeHeaderSemantics);
+  @override
+  TopAppBar toolbarHeight(double? toolbarHeight) =>
+      this(toolbarHeight: toolbarHeight);
+  @override
+  TopAppBar leadingWidth(double? leadingWidth) =>
+      this(leadingWidth: leadingWidth);
+  @override
+  TopAppBar leading(Widget? leading) => this(leading: leading);
+  @override
+  TopAppBar actions(List<Widget>? actions) => this(actions: actions);
+  @override
+  TopAppBar expandedWidget(List<Widget>? expandedWidget) =>
+      this(expandedWidget: expandedWidget);
+  @override
+  TopAppBar key(Key? key) => this(key: key);
+  @override
+  TopAppBar call({
+    TextWrapper? title,
+    bool? centerTitle,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  }) =>
+      TopAppBar(
+        title: title ?? _value.title,
+        centerTitle: centerTitle ?? _value.centerTitle,
+        systemOverlayStyle: systemOverlayStyle ?? _value.systemOverlayStyle,
+        automaticallyImplyLeading:
+            automaticallyImplyLeading ?? _value.automaticallyImplyLeading,
+        flexibleSpace: flexibleSpace ?? _value.flexibleSpace,
+        bottom: bottom ?? _value.bottom,
+        elevation: elevation ?? _value.elevation,
+        scrolledUnderElevation:
+            scrolledUnderElevation ?? _value.scrolledUnderElevation,
+        shadowColor: shadowColor ?? _value.shadowColor,
+        surfaceTintColor: surfaceTintColor ?? _value.surfaceTintColor,
+        backgroundColor: backgroundColor ?? _value.backgroundColor,
+        iconTheme: iconTheme ?? _value.iconTheme,
+        primary: primary ?? _value.primary,
+        excludeHeaderSemantics:
+            excludeHeaderSemantics ?? _value.excludeHeaderSemantics,
+        toolbarHeight: toolbarHeight ?? _value.toolbarHeight,
+        leadingWidth: leadingWidth ?? _value.leadingWidth,
+        leading: leading ?? _value.leading,
+        actions: actions ?? _value.actions,
+        shape: shape ?? _value.shape,
+        expandedWidget: expandedWidget ?? _value.expandedWidget,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $TopAppBarCWMixin on Component {
+  $TopAppBarComponentCWProxy get copyWith =>
+      $TopAppBarCWProxyImpl(this as TopAppBar);
+}

packages/wyatt_ui_kit/lib/src/components/bars/top_navigation_bar.dart

@@ -0,0 +1,135 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/bars/widgets/navigation_item.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+part 'top_navigation_bar.g.dart';
+
+@ComponentCopyWithExtension()
+class TopNavigationBar extends TopNavigationBarComponent
+    with $TopNavigationBarCWMixin {
+  const TopNavigationBar({
+    super.navigationItems,
+    super.onTap,
+    super.currentIndex = 0,
+    super.systemOverlayStyle,
+    super.automaticallyImplyLeading,
+    super.flexibleSpace,
+    super.bottom,
+    super.elevation,
+    super.scrolledUnderElevation,
+    super.shadowColor,
+    super.surfaceTintColor,
+    super.backgroundColor,
+    super.iconTheme,
+    super.primary,
+    super.excludeHeaderSemantics,
+    super.toolbarHeight,
+    super.leadingWidth,
+    super.leading,
+    super.actions,
+    super.shape,
+    super.expandedWidget,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) => DecoratedBox(
+        decoration: BoxDecoration(
+          gradient: ThemeHelper.getThemeElement<MultiColor, Gradient>(
+            [
+              backgroundColor,
+              context.themeExtension<TopBarThemeExtension>()?.backgroundColors,
+            ],
+            valueValidator: (value) => value?.isGradient,
+            transform: (value) =>
+                LinearGradientHelper.fromNullableColors(value?.colors),
+            defaultValue: null,
+          ),
+          color: ThemeHelper.getThemeElement<MultiColor, Color>(
+            [
+              backgroundColor,
+              context.themeExtension<TopBarThemeExtension>()?.backgroundColors,
+            ],
+            valueValidator: (value) => value?.isColor,
+            transform: (value) => value?.color,
+            defaultValue: Theme.of(context).appBarTheme.backgroundColor,
+          ),
+        ),
+        child: AppBar(
+          toolbarHeight: 100,
+          titleSpacing: 0,
+          backgroundColor: Colors.transparent,
+          systemOverlayStyle: systemOverlayStyle,
+          automaticallyImplyLeading: automaticallyImplyLeading ?? true,
+          flexibleSpace: flexibleSpace,
+          bottom: bottom,
+          elevation: elevation ?? 0,
+          scrolledUnderElevation: scrolledUnderElevation,
+          shadowColor: shadowColor,
+          surfaceTintColor: surfaceTintColor,
+          iconTheme: ThemeHelper.getThemeElement<IconThemeData, IconThemeData>(
+            [
+              iconTheme,
+              context.themeExtension<TopBarThemeExtension>()?.iconTheme,
+            ],
+            valueValidator: (value) => value != null,
+            transform: (value) => value,
+            defaultValue: Theme.of(context).iconTheme,
+          ),
+          primary: primary ?? true,
+          excludeHeaderSemantics: excludeHeaderSemantics ?? false,
+          leadingWidth: 200,
+          title: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: navigationItems != null
+                ? navigationItems!
+                    .asMap()
+                    .map<int, Widget>(
+                      (key, value) => MapEntry(
+                        key,
+                        Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 10),
+                          child: MouseRegion(
+                            cursor: SystemMouseCursors.click,
+                            child: GestureDetector(
+                              onTap: () {
+                                onTap?.call(context, key);
+                              },
+                              child: NavigationItem(
+                                item: value,
+                                selected: key == currentIndex,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                    )
+                    .values
+                    .toList()
+                : [],
+          ),
+          leading: leading,
+          actions: actions,
+          centerTitle: true,
+        ),
+      );
+}

packages/wyatt_ui_kit/lib/src/components/bars/top_navigation_bar.g.dart

@@ -0,0 +1,130 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'top_navigation_bar.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $TopNavigationBarCWProxyImpl
+    implements $TopNavigationBarComponentCWProxy {
+  const $TopNavigationBarCWProxyImpl(this._value);
+  final TopNavigationBar _value;
+  @override
+  TopNavigationBar navigationItems(List<TextWrapper>? navigationItems) =>
+      this(navigationItems: navigationItems);
+  @override
+  TopNavigationBar onTap(void Function(BuildContext, int)? onTap) =>
+      this(onTap: onTap);
+  @override
+  TopNavigationBar currentIndex(int? currentIndex) =>
+      this(currentIndex: currentIndex);
+  @override
+  TopNavigationBar shape(ShapeBorder? shape) => this(shape: shape);
+  @override
+  TopNavigationBar systemOverlayStyle(
+          SystemUiOverlayStyle? systemOverlayStyle) =>
+      this(systemOverlayStyle: systemOverlayStyle);
+  @override
+  TopNavigationBar automaticallyImplyLeading(bool? automaticallyImplyLeading) =>
+      this(automaticallyImplyLeading: automaticallyImplyLeading);
+  @override
+  TopNavigationBar flexibleSpace(Widget? flexibleSpace) =>
+      this(flexibleSpace: flexibleSpace);
+  @override
+  TopNavigationBar bottom(PreferredSizeWidget? bottom) => this(bottom: bottom);
+  @override
+  TopNavigationBar elevation(double? elevation) => this(elevation: elevation);
+  @override
+  TopNavigationBar scrolledUnderElevation(double? scrolledUnderElevation) =>
+      this(scrolledUnderElevation: scrolledUnderElevation);
+  @override
+  TopNavigationBar shadowColor(Color? shadowColor) =>
+      this(shadowColor: shadowColor);
+  @override
+  TopNavigationBar surfaceTintColor(Color? surfaceTintColor) =>
+      this(surfaceTintColor: surfaceTintColor);
+  @override
+  TopNavigationBar backgroundColor(MultiColor? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  TopNavigationBar iconTheme(IconThemeData? iconTheme) =>
+      this(iconTheme: iconTheme);
+  @override
+  TopNavigationBar primary(bool? primary) => this(primary: primary);
+  @override
+  TopNavigationBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
+      this(excludeHeaderSemantics: excludeHeaderSemantics);
+  @override
+  TopNavigationBar toolbarHeight(double? toolbarHeight) =>
+      this(toolbarHeight: toolbarHeight);
+  @override
+  TopNavigationBar leadingWidth(double? leadingWidth) =>
+      this(leadingWidth: leadingWidth);
+  @override
+  TopNavigationBar leading(Widget? leading) => this(leading: leading);
+  @override
+  TopNavigationBar actions(List<Widget>? actions) => this(actions: actions);
+  @override
+  TopNavigationBar expandedWidget(List<Widget>? expandedWidget) =>
+      this(expandedWidget: expandedWidget);
+  @override
+  TopNavigationBar key(Key? key) => this(key: key);
+  @override
+  TopNavigationBar call({
+    List<TextWrapper>? navigationItems,
+    void Function(BuildContext, int)? onTap,
+    int? currentIndex,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  }) =>
+      TopNavigationBar(
+        navigationItems: navigationItems ?? _value.navigationItems,
+        onTap: onTap ?? _value.onTap,
+        currentIndex: currentIndex ?? _value.currentIndex,
+        systemOverlayStyle: systemOverlayStyle ?? _value.systemOverlayStyle,
+        automaticallyImplyLeading:
+            automaticallyImplyLeading ?? _value.automaticallyImplyLeading,
+        flexibleSpace: flexibleSpace ?? _value.flexibleSpace,
+        bottom: bottom ?? _value.bottom,
+        elevation: elevation ?? _value.elevation,
+        scrolledUnderElevation:
+            scrolledUnderElevation ?? _value.scrolledUnderElevation,
+        shadowColor: shadowColor ?? _value.shadowColor,
+        surfaceTintColor: surfaceTintColor ?? _value.surfaceTintColor,
+        backgroundColor: backgroundColor ?? _value.backgroundColor,
+        iconTheme: iconTheme ?? _value.iconTheme,
+        primary: primary ?? _value.primary,
+        excludeHeaderSemantics:
+            excludeHeaderSemantics ?? _value.excludeHeaderSemantics,
+        toolbarHeight: toolbarHeight ?? _value.toolbarHeight,
+        leadingWidth: leadingWidth ?? _value.leadingWidth,
+        leading: leading ?? _value.leading,
+        actions: actions ?? _value.actions,
+        shape: shape ?? _value.shape,
+        expandedWidget: expandedWidget ?? _value.expandedWidget,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $TopNavigationBarCWMixin on Component {
+  $TopNavigationBarComponentCWProxy get copyWith =>
+      $TopNavigationBarCWProxyImpl(this as TopNavigationBar);
+}

packages/wyatt_ui_kit/lib/src/components/bars/widgets/navigation_item.dart

@@ -0,0 +1,73 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// super program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// super program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with super program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class NavigationItem extends StatelessWidget {
+  const NavigationItem({
+    required this.item,
+    required this.selected,
+    super.key,
+  });
+  final TextWrapper item;
+  final bool selected;
+
+  @override
+  Widget build(BuildContext context) => Stack(
+        alignment: Alignment.bottomCenter,
+        children: [
+          if (selected)
+            Container(
+              height: 5,
+              width: 70,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(100),
+                color: ThemeHelper.getThemeElement<Color, Color>(
+                  [
+                    context
+                        .themeExtension<TopBarThemeExtension>()
+                        ?.secondaryColor
+                  ],
+                  valueValidator: (value) => value != null,
+                  transform: (value) => value,
+                  defaultValue: Theme.of(context).primaryColor,
+                ),
+              ),
+            ),
+          SizedBox(
+            height: 50,
+            child: Center(
+              child: Text(
+                item.data,
+                style: ThemeHelper.getThemeElement<TextStyle, TextStyle>(
+                  [
+                    item.style,
+                    context
+                        .themeExtension<TopBarThemeExtension>()
+                        ?.subTitleStyle
+                  ],
+                  valueValidator: (value) => value != null,
+                  transform: (value) => value,
+                  defaultValue: context.textTheme.titleMedium,
+                ),
+              ),
+            ),
+          ),
+        ],
+      );
+}

packages/wyatt_ui_kit/lib/src/components/components.dart

@@ -20,3 +20,4 @@ export './gradients/gradients.dart';
 export './loader/loader.dart';
 export './rich_text_builder/rich_text_builder.dart';
 export './text_inputs/text_input.dart';
+export 'bars/bars.dart';

packages/wyatt_ui_kit/lib/src/domain/domain.dart

@@ -19,3 +19,4 @@ export './card_theme_extension.dart';
 export './loader_theme_extension.dart';
 export './rich_text_builder_theme_extension.dart';
 export './text_input_theme_extension.dart';
+export 'top_bar_theme_extension.dart';

packages/wyatt_ui_kit/lib/src/domain/top_bar_theme_extension.dart

@@ -15,21 +15,22 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/material.dart';
-import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 
-part 'app_bar_component.g.dart';
-
-@ComponentProxyExtension()
-abstract class AppBarComponent extends Component
-    with CopyWithMixin<$AppBarComponentCWProxy> {
-  const AppBarComponent({
-    this.title,
-    this.leading,
-    this.actions,
-    super.key,
+abstract class TopBarThemeExtension
+    extends ThemeExtension<TopBarThemeExtension> {
+  const TopBarThemeExtension({
+    this.iconTheme,
+    this.backgroundColors,
+    this.secondaryColor,
+    this.titleStyle,
+    this.subTitleStyle,
   });
-  final TextWrapper? title;
-  final Widget? leading;
-  final List<Widget>? actions;
+
+  final MultiColor? backgroundColors;
+  final IconThemeData? iconTheme;
+  final Color? secondaryColor;
+
+  final TextStyle? titleStyle;
+  final TextStyle? subTitleStyle;
 }