Nested header

docs/.env.development

@@ -1,2 +1 @@
-NEXT_PUBLIC_DEMO_URL=https://dev.demo.forui.dev
-NEXT_PUBLIC_DEMO_URL=http://localhost:51624
+NEXT_PUBLIC_DEMO_URL=http://localhost:3001

docs/components/widget.tsx

@@ -4,10 +4,10 @@ interface Props {
     name: string;
     variant?: string;
     height?: number;
-    query: Record<string, string>;
+    query?: Record<string, string>;
 }
 
-export function Widget({name, variant = 'default', height = 200, query}: Props) {
+export function Widget({name, variant = 'default', height = 200, query = {}}: Props) {
     const {resolvedTheme} = useTheme();
     query['theme'] = `zinc-${resolvedTheme}`;
 

docs/pages/docs/button.mdx

@@ -34,9 +34,10 @@ FButton(
 ```dart
 FButton.raw(
   child: Text('Button'),
-  onPress: () {};
+  onPress: () {},
 );
 ```
+
 ## Examples
 
 ### Primary

docs/pages/docs/header.mdx

@@ -3,15 +3,16 @@ import { Widget } from "../../components/widget";
 
 # Header
 A header contains the page's title and navigation actions.
+It is typically used on pages at the root of the navigation stack.
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='header' query={{}}/>
+    <Widget name='header'/>
   </Tabs.Tab>
   <Tabs.Tab>
         ```dart
         FHeader(
-          title: 'Edit Alarm',
+          title: const Text('Edit Alarm'),
           actions: [
             FHeaderAction(
               icon: FAssets.icons.alarmClock,
@@ -22,18 +23,48 @@ A header contains the page's title and navigation actions.
               onPress: () {},
             ),
           ],
-        )
+        );
         ```
   </Tabs.Tab>
 </Tabs>
 
+## Nested Header
+
+It is typically used on nested pages or sheets.
+
+<Tabs items={['Preview', 'Code']}>
+    <Tabs.Tab>
+        <Widget name='header'  variant='nested'/>
+    </Tabs.Tab>
+    <Tabs.Tab>
+        ```dart
+        FHeader.nested(
+          title: const Text('Appointment'),
+          leftActions: [
+            FHeaderAction.back(onPress: () {}),
+          ],
+          rightActions: [
+            FHeaderAction(
+              icon: FAssets.icons.info,
+              onPress: () {},
+            ),
+            FHeaderAction(
+              icon: FAssets.icons.plus,
+              onPress: () {},
+            ),
+          ],
+        );
+        ```
+    </Tabs.Tab>
+</Tabs>
+
 ## Usage
 
 ### `FHeader(...)`
 
 ```dart
 FHeader(
-  title: 'Edit Alarm',
+  title: const Text('Title'),
   actions: [
     FHeaderAction(
       icon: FAssets.icons.alarmClock,
@@ -44,5 +75,103 @@ FHeader(
       onPress: () {},
     ),
   ],
-)
-```
+);
+```
+
+### `FHeader.nested(...)`
+
+```dart
+FHeader.nested(
+  title: const Text('Title'),
+  leftActions: [
+    FHeaderAction.back(onPress: () {}),
+  ],
+  rightActions: [
+    FHeaderAction(
+      icon: FAssets.icons.info,
+      onPress: () {},
+    ),
+    FHeaderAction.x(onPress: () {}),
+  ],
+);
+```
+
+## Examples
+
+### Header
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='header'/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+        ```dart
+        FHeader(
+          title: const Text('Edit Alarm'),
+          actions: [
+            FHeaderAction(
+              icon: FAssets.icons.alarmClock,
+              onPress: () {},
+            ),
+            FHeaderAction(
+              icon: FAssets.icons.plus,
+              onPress: () {},
+            ),
+          ],
+        );
+        ```
+  </Tabs.Tab>
+</Tabs>
+
+### Nested Header with back icon
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='header' variant='nested' />
+  </Tabs.Tab>
+  <Tabs.Tab>
+        ```dart
+        FHeader.nested(
+          title: const Text('Appointment'),
+          leftActions: [
+            FHeaderAction.back(onPress: () {}),
+          ],
+          rightActions: [
+            FHeaderAction(
+              icon: FAssets.icons.info,
+              onPress: () {},
+            ),
+            FHeaderAction(
+              icon: FAssets.icons.plus,
+              onPress: () {},
+            ),
+          ],
+        );
+        ```
+  </Tabs.Tab>
+</Tabs>
+
+### Nested Header with X icon
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='header' variant='nested-x' />
+  </Tabs.Tab>
+  <Tabs.Tab>
+        ```dart
+        FHeader.nested(
+          title: const Text('Climate'),
+          leftActions: [
+            FHeaderAction(
+              icon: FAssets.icons.thermometer,
+              onPress: () {},
+            ),
+            FHeaderAction(
+              icon: FAssets.icons.wind,
+              onPress: null,
+            ),
+          ],
+          rightActions: [
+            FHeaderAction.x(onPress: () {}),
+          ],
+        );
+        ```
+  </Tabs.Tab>
+</Tabs>

docs/pages/docs/scaffold.mdx

@@ -12,7 +12,7 @@ Creates a visual scaffold for Forui widgets.
     ```dart
     FScaffold(
       header: FHeader(
-        title: 'Settings',
+        title: const Text('Settings'),
         actions: [
           FHeaderAction(
             icon: FAssets.icons.ellipsis,
@@ -63,7 +63,7 @@ Creates a visual scaffold for Forui widgets.
 ```dart
 FScaffold(
   header: FHeader(
-    title: 'Settings',
+    title: const Text('Settings'),
     actions: [
       FHeaderAction(
         icon: FAssets.icons.ellipsis,

forui/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.2.0
+
+* Add `NestedHeader` widget.
+
+### Breaking changes
+
+* `FHeaderActionStyle.action` parameter has been renamed to `FHeaderStyle.actionStyle`.
+* `FHeaderActionStyle.padding` parameter has been moved to `FHeaderStyle.actionSpacing`.
+
 ## 0.1.0
 
 * Initial release! 🚀

forui/example/lib/example.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+
+import 'package:forui/forui.dart';
+
+class Example extends StatefulWidget {
+  const Example({super.key});
+
+  @override
+  State<Example> createState() => _ExampleState();
+}
+
+class _ExampleState extends State<Example> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) => Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const SizedBox(height: 10),
+          Expanded(
+            child: FTabs(
+              tabs: [
+                FTabEntry(
+                  label: 'Account',
+                  content: FCard(
+                    title: 'Account',
+                    subtitle: 'Make changes to your account here. Click save when you are done.',
+                    child: Column(
+                      children: [
+                        Container(
+                          color: Colors.red,
+                          height: 100,
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                FTabEntry(
+                  label: 'Password',
+                  content: FCard(
+                    title: 'Password',
+                    subtitle: 'Change your password here. After saving, you will be logged out.',
+                    child: Column(
+                      children: [
+                        Container(
+                          color: Colors.blue,
+                          height: 100,
+                        )
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      );
+}