feat(ui_kit): implement top nav bar

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

@@ -25,7 +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_app_bar_theme.dart';
+import 'package:wyatt_ui_kit_example/theme/top_bar_theme.dart';
 
 /// Easely switch between Material and Studio themes.
 abstract class Themes {

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

@@ -3,24 +3,31 @@ 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 TopAppBarThemeExtension {
+class TopAppBarTheme extends TopBarThemeExtension {
   const TopAppBarTheme({
     super.iconTheme,
     super.backgroundColors,
-    super.expandedDividerStyle,
+    super.secondaryColor,
     super.titleStyle,
+    super.subTitleStyle,
   });
 
   factory TopAppBarTheme.light() => TopAppBarTheme(
         backgroundColors: const MultiColor.single(
           Color.fromRGBO(246, 246, 246, 1),
         ),
-        expandedDividerStyle: Colors.black.withOpacity(0.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,
         ),
-        iconTheme: const IconThemeData(color: Colors.black),
+        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(
@@ -29,31 +36,35 @@ class TopAppBarTheme extends TopAppBarThemeExtension {
           Color.fromRGBO(39, 47, 61, 1),
           Color.fromRGBO(44, 50, 56, 1),
         ]),
-        expandedDividerStyle: Colors.white.withOpacity(0.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<TopAppBarThemeExtension> copyWith({
+  ThemeExtension<TopBarThemeExtension> copyWith({
     IconThemeData? iconTheme,
     MultiColor? backgroundColors,
-    Color? expandedDividerStyle,
+    Color? secondaryColor,
     TextStyle? titleStyle,
   }) =>
       TopAppBarTheme(
         iconTheme: iconTheme ?? this.iconTheme,
         backgroundColors: backgroundColors ?? this.backgroundColors,
-        expandedDividerStyle: expandedDividerStyle ?? this.expandedDividerStyle,
+        secondaryColor: secondaryColor ?? this.secondaryColor,
         titleStyle: titleStyle ?? this.titleStyle,
       );
 
   @override
-  ThemeExtension<TopAppBarThemeExtension> lerp(
-    covariant ThemeExtension<TopAppBarThemeExtension>? other,
+  ThemeExtension<TopBarThemeExtension> lerp(
+    covariant ThemeExtension<TopBarThemeExtension>? other,
     double t,
   ) {
     if (other is! TopAppBarTheme) {
@@ -63,8 +74,7 @@ class TopAppBarTheme extends TopAppBarThemeExtension {
       iconTheme: IconThemeData.lerp(iconTheme, other.iconTheme, t),
       backgroundColors:
           MultiColor.lerp(backgroundColors, other.backgroundColors, t),
-      expandedDividerStyle:
-          Color.lerp(expandedDividerStyle, other.expandedDividerStyle, t),
+      secondaryColor: Color.lerp(secondaryColor, other.secondaryColor, t),
       titleStyle: TextStyle.lerp(titleStyle, other.titleStyle, t),
     );
   }