docs(navbar): add navbar example with brand, dropdown and toggle

apps/docs/docs/components/navbar/_brand.component.ts

@@ -0,0 +1,26 @@
+import { NavbarComponent, NavbarContentComponent, NavbarItemComponent, NavbarBrandComponent } from 'flowbite-angular';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-navbar-brand',
+  standalone: true,
+  imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent, NavbarBrandComponent],
+  template: `
+<flowbite-navbar [isFixed]="true" [isOpen]="true">
+  <flowbite-navbar-brand>
+    Flowbite
+  </flowbite-navbar-brand>
+
+  <flowbite-navbar-content>
+    <flowbite-navbar-item>
+      Home
+    </flowbite-navbar-item>
+    <flowbite-navbar-item>
+      Contacts
+    </flowbite-navbar-item>
+  </flowbite-navbar-content>
+</flowbite-navbar>
+  `
+})
+export class FlowbiteBrandComponent {}

apps/docs/docs/components/navbar/_default.component.ts

@@ -7,11 +7,11 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent],
   template: `
-    <flowbite-navbar [isFixed]="true">
-      <flowbite-navbar-content>
-        <flowbite-navbar-item>Hello world !</flowbite-navbar-item>
-      </flowbite-navbar-content>
-    </flowbite-navbar>
+<flowbite-navbar [isFixed]="true">
+  <flowbite-navbar-content>
+    <flowbite-navbar-item>Hello world!</flowbite-navbar-item>
+  </flowbite-navbar-content>
+</flowbite-navbar>
   `,
 })
 export class FlowbiteDefaultComponent {}

apps/docs/docs/components/navbar/_dropdown.component.ts

@@ -0,0 +1,33 @@
+import { NavbarComponent, NavbarContentComponent, NavbarBrandComponent, NavbarItemComponent, DropdownComponent, DropdownItemComponent } from 'flowbite-angular';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-navbar-dropdown',
+  standalone: true,
+  imports: [NavbarComponent, NavbarContentComponent, NavbarBrandComponent, NavbarItemComponent, DropdownComponent, DropdownItemComponent],
+  template: `
+<flowbite-navbar [isFixed]="true" [isOpen]="true">
+  <flowbite-navbar-brand>
+    Flowbite
+  </flowbite-navbar-brand>
+
+  <flowbite-navbar-content>
+    <flowbite-navbar-item>Hello world!</flowbite-navbar-item>
+
+    <flowbite-dropdown label="Settings">
+      <flowbite-dropdown-item>
+        Profile
+      </flowbite-dropdown-item>
+      <flowbite-dropdown-item>
+        Billing
+      </flowbite-dropdown-item>
+      <flowbite-dropdown-item>
+        App settings
+      </flowbite-dropdown-item>
+    </flowbite-dropdown>
+  </flowbite-navbar-content>
+</flowbite-navbar>
+  `
+})
+export class FlowbiteDropdownComponent {}

apps/docs/docs/components/navbar/_responsive.component.ts

@@ -0,0 +1,31 @@
+import { NavbarComponent, NavbarContentComponent, NavbarItemComponent, NavbarBrandComponent, NavbarToggleComponent } from 'flowbite-angular';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-navbar-responsive',
+  standalone: true,
+  imports: [NavbarComponent, NavbarContentComponent, NavbarItemComponent, NavbarBrandComponent, NavbarToggleComponent],
+  template: `
+<flowbite-navbar>
+  <flowbite-navbar-brand>
+    Flowbite
+  </flowbite-navbar-brand>
+
+  <flowbite-navbar-toggle />
+
+  <flowbite-navbar-content>
+    <flowbite-navbar-item>
+      Home
+    </flowbite-navbar-item>
+    <flowbite-navbar-item>
+      Pricing
+    </flowbite-navbar-item>
+    <flowbite-navbar-item>
+      Contacts
+    </flowbite-navbar-item>
+  </flowbite-navbar-content>
+</flowbite-navbar>
+  `
+})
+export class FlowbiteResponsiveComponent {}

apps/docs/docs/components/navbar/index.md

@@ -13,3 +13,45 @@ keyword: NavbarPage
 ```typescript file="./_default.component.ts"#L1-L1 group="default" name="typescript"
 
 ```
+
+## Navbar with brand
+
+Use this example to display a brand element inside the navbar by importing the `NavbarBrandComponent` component.
+
+{{ NgDocActions.demo('flowbiteBrandComponent', {container: false}) }}
+
+```html file="./_brand.component.ts"#L10-L23 group="brand" name="html"
+
+```
+
+```typescript file="./_brand.component.ts"#L1-L1 group="brand" name="typescript"
+
+```
+
+## Navbar with dropdown
+
+Use this example to feature a dropdown menu when clicking on the settings dropdown inside the navbar by importing the `DropdownComponent` and `DropdownItemComponent` components.
+
+{{ NgDocActions.demo('flowbiteDropdownComponent', {container: false}) }}
+
+```html file="./_dropdown.component.ts"#L10-L30 group="dropdown" name="html"
+
+```
+
+```typescript file="./_dropdown.component.ts"#L1-L1 group="dropdown" name="typescript"
+
+```
+
+## Responsive navbar
+
+On mobile device the navigation bar will be collapsed and you will be able to use the hamburger menu to toggle the menu items by adding the `NavbarToggleComponent` component.
+
+{{ NgDocActions.demo('flowbiteResponsiveComponent', {container: false}) }}
+
+```html file="./_responsive.component.ts"#L10-L28 group="responsive" name="html"
+
+```
+
+```typescript file="./_responsive.component.ts"#L1-L1 group="responsive" name="typescript"
+
+```

apps/docs/docs/components/navbar/ng-doc.page.ts

@@ -1,5 +1,8 @@
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
+import { FlowbiteBrandComponent } from './_brand.component';
+import { FlowbiteDropdownComponent } from './_dropdown.component';
+import { FlowbiteResponsiveComponent } from './_responsive.component';
 
 import type { NgDocPage } from '@ng-doc/core';
 
@@ -13,6 +16,9 @@ const navbar: NgDocPage = {
   order: 10,
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
+    flowbiteBrandComponent: FlowbiteBrandComponent,
+    flowbiteDropdownComponent: FlowbiteDropdownComponent,
+    flowbiteResponsiveComponent: FlowbiteResponsiveComponent,
   },
 };