feat: make flowbite-navbar-* usable as directive (#110)

MGREMY · web-flow · commit 5fd4a3bb8e52 · 2025-01-22T16:02:11.000+01:00
## PR Checklist

Please check if your PR fulfills the following requirements:

&lt;!--- [ ] Tests for the changes have been added (for bug
fixes/features)--&gt;

- [x] Docs have been added/updated (for bug fixes/features)

## PR Type

What kind of change does this PR introduce?

&lt;!-- Please check the one that applies to this PR using "x". --&gt;

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no API changes)
- [ ] Build related changes
- [ ] CI-related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## Issue Number

&lt;!-- Bugs and features must be linked to an issue. --&gt;

Issue Number: N/A

## Does this PR introduce a breaking change?

&lt;!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. --&gt;

- [ ] Yes
- [x] No

## Other information

&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai
--&gt;
## Summary by CodeRabbit

- **Documentation**
	- Added comprehensive documentation for Navbar Component
- Included examples for default, brand, dropdown, and responsive navbar
configurations

- **New Features**
	- Enhanced Navbar Component with multiple usage options
- Added support for various HTML element selectors (nav, button, div,
span, etc.)

- **Improvements**
	- Expanded component flexibility across different template structures
	- Updated demo identifiers and file paths for better organization
&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/apps/docs/docs/components/navbar/component.md b/apps/docs/docs/components/navbar/component.md
@@ -0,0 +1,66 @@
+---
+title: Navbar Component
+route: component
+keyword: NavbarPage
+---
+
+{% import "../../shared/component-deprecated-usage.md" as cdu %}
+
+{{ cdu.deprecated() }}
+
+## Default navbar
+
+{{ NgDocActions.demo('c_default', {container: false}) }}
+
+```angular-html file="./component/_default.component.html" group="default" name="html"
+
+```
+
+```angular-ts file="./component/_default.component.ts"#L1-L5 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('c_brand', {container: false}) }}
+
+```angular-html file="./component/_brand.component.html" group="brand" name="html"
+
+```
+
+```angular-ts file="./component/_brand.component.ts"#L1-L6 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('c_dropdown', {container: false}) }}
+
+```angular-html file="./component/_dropdown.component.html" group="dropdown" name="html"
+
+```
+
+```angular-ts file="./component/_dropdown.component.ts"#L1-L7 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('c_responsive', {container: false}) }}
+
+```angular-html file="./component/_responsive.component.html" group="responsive" name="html"
+
+```
+
+```angular-ts file="./component/_responsive.component.ts"#L1-L7 group="responsive" name="typescript"
+
+```
diff --git a/apps/docs/docs/components/navbar/component/_brand.component.html b/apps/docs/docs/components/navbar/component/_brand.component.html
diff --git a/apps/docs/docs/components/navbar/component/_brand.component.ts b/apps/docs/docs/components/navbar/component/_brand.component.ts
diff --git a/apps/docs/docs/components/navbar/component/_default.component.html b/apps/docs/docs/components/navbar/component/_default.component.html
diff --git a/apps/docs/docs/components/navbar/component/_default.component.ts b/apps/docs/docs/components/navbar/component/_default.component.ts
diff --git a/apps/docs/docs/components/navbar/component/_dropdown.component.html b/apps/docs/docs/components/navbar/component/_dropdown.component.html
diff --git a/apps/docs/docs/components/navbar/component/_dropdown.component.ts b/apps/docs/docs/components/navbar/component/_dropdown.component.ts
diff --git a/apps/docs/docs/components/navbar/component/_responsive.component.html b/apps/docs/docs/components/navbar/component/_responsive.component.html
diff --git a/apps/docs/docs/components/navbar/component/_responsive.component.ts b/apps/docs/docs/components/navbar/component/_responsive.component.ts
diff --git a/apps/docs/docs/components/navbar/directive/_brand.component.html b/apps/docs/docs/components/navbar/directive/_brand.component.html
@@ -0,0 +1,10 @@
+<nav
+  flowbite-navbar
+  [isOpen]="true">
+  <div flowbite-navbar-brand>Flowbite</div>
+
+  <div flowbite-navbar-content>
+    <li flowbite-navbar-item>Home</li>
+    <li flowbite-navbar-item>Contacts</li>
+  </div>
+</nav>
diff --git a/apps/docs/docs/components/navbar/directive/_brand.component.ts b/apps/docs/docs/components/navbar/directive/_brand.component.ts
@@ -0,0 +1,15 @@
+import {
+  NavbarBrandComponent,
+  NavbarComponent,
+  NavbarContentComponent,
+  NavbarItemComponent,
+} from 'flowbite-angular/navbar';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-navbar-brand',
+  imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent, NavbarBrandComponent],
+  templateUrl: './_brand.component.html',
+})
+export class FlowbiteBrandComponent {}
diff --git a/apps/docs/docs/components/navbar/directive/_default.component.html b/apps/docs/docs/components/navbar/directive/_default.component.html
@@ -0,0 +1,7 @@
+<nav
+  flowbite-navbar
+  [isOpen]="true">
+  <div flowbite-navbar-content>
+    <li flowbite-navbar-item>Hello world!</li>
+  </div>
+</nav>
diff --git a/apps/docs/docs/components/navbar/directive/_default.component.ts b/apps/docs/docs/components/navbar/directive/_default.component.ts
@@ -0,0 +1,14 @@
+import {
+  NavbarComponent,
+  NavbarContentComponent,
+  NavbarItemComponent,
+} from 'flowbite-angular/navbar';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-navbar-default',
+  imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent],
+  templateUrl: './_default.component.html',
+})
+export class FlowbiteDefaultComponent {}
diff --git a/apps/docs/docs/components/navbar/directive/_dropdown.component.html b/apps/docs/docs/components/navbar/directive/_dropdown.component.html
@@ -0,0 +1,15 @@
+<nav
+  flowbite-navbar
+  [isOpen]="true">
+  <div flowbite-navbar-brand>Flowbite</div>
+
+  <div flowbite-navbar-content>
+    <li flowbite-navbar-item>Hello world!</li>
+
+    <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>
+  </div>
+</nav>
diff --git a/apps/docs/docs/components/navbar/directive/_dropdown.component.ts b/apps/docs/docs/components/navbar/directive/_dropdown.component.ts
@@ -0,0 +1,23 @@
+import { DropdownComponent, DropdownItemComponent } from 'flowbite-angular/dropdown';
+import {
+  NavbarBrandComponent,
+  NavbarComponent,
+  NavbarContentComponent,
+  NavbarItemComponent,
+} from 'flowbite-angular/navbar';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-navbar-dropdown',
+  imports: [
+    NavbarComponent,
+    NavbarContentComponent,
+    NavbarBrandComponent,
+    NavbarItemComponent,
+    DropdownComponent,
+    DropdownItemComponent,
+  ],
+  templateUrl: './_dropdown.component.html',
+})
+export class FlowbiteDropdownComponent {}
diff --git a/apps/docs/docs/components/navbar/directive/_responsive.component.html b/apps/docs/docs/components/navbar/directive/_responsive.component.html
@@ -0,0 +1,15 @@
+<nav flowbite-navbar>
+  <div flowbite-navbar-brand>Flowbite</div>
+
+  <button
+    type="button"
+    flowbite-navbar-toggle>
+    <span class="sr-only">Open navbar menu</span>
+  </button>
+
+  <div flowbite-navbar-content>
+    <li flowbite-navbar-item>Home</li>
+    <li flowbite-navbar-item>Pricing</li>
+    <li flowbite-navbar-item>Contacts</li>
+  </div>
+</nav>
diff --git a/apps/docs/docs/components/navbar/directive/_responsive.component.ts b/apps/docs/docs/components/navbar/directive/_responsive.component.ts
@@ -0,0 +1,22 @@
+import {
+  NavbarBrandComponent,
+  NavbarComponent,
+  NavbarContentComponent,
+  NavbarItemComponent,
+  NavbarToggleComponent,
+} from 'flowbite-angular/navbar';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-navbar-responsive',
+  imports: [
+    NavbarComponent,
+    NavbarContentComponent,
+    NavbarItemComponent,
+    NavbarBrandComponent,
+    NavbarToggleComponent,
+  ],
+  templateUrl: './_responsive.component.html',
+})
+export class FlowbiteResponsiveComponent {}
diff --git a/apps/docs/docs/components/navbar/index.md b/apps/docs/docs/components/navbar/index.md
@@ -1,16 +1,17 @@
 ---
-keyword: NavbarPage
+title: Navbar Directive
+keyword: NavbarDirectivePage
 ---
 
 ## Default navbar
 
-{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
+{{ NgDocActions.demo('d_default', {container: false}) }}
 
-```angular-html file="./_default.component.html" group="default" name="html"
+```angular-html file="./directive/_default.component.html" group="default" name="html"
 
 ```
 
-```angular-ts file="./_default.component.ts"#L1-L5 group="default" name="typescript"
+```angular-ts file="./directive/_default.component.ts"#L1-L5 group="default" name="typescript"
 
 ```
 
@@ -19,13 +20,13 @@ keyword: NavbarPage
 Use this example to display a brand element inside the navbar by importing the
 `NavbarBrandComponent` component.
 
-{{ NgDocActions.demo('flowbiteBrandComponent', {container: false}) }}
+{{ NgDocActions.demo('d_brand', {container: false}) }}
 
-```angular-html file="./_brand.component.html" group="brand" name="html"
+```angular-html file="./directive/_brand.component.html" group="brand" name="html"
 
 ```
 
-```angular-ts file="./_brand.component.ts"#L1-L6 group="brand" name="typescript"
+```angular-ts file="./directive/_brand.component.ts"#L1-L6 group="brand" name="typescript"
 
 ```
 
@@ -34,13 +35,13 @@ Use this example to display a brand element inside the navbar by importing the
 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}) }}
+{{ NgDocActions.demo('d_dropdown', {container: false}) }}
 
-```angular-html file="./_dropdown.component.html" group="dropdown" name="html"
+```angular-html file="./directive/_dropdown.component.html" group="dropdown" name="html"
 
 ```
 
-```angular-ts file="./_dropdown.component.ts"#L1-L7 group="dropdown" name="typescript"
+```angular-ts file="./directive/_dropdown.component.ts"#L1-L7 group="dropdown" name="typescript"
 
 ```
 
@@ -49,12 +50,12 @@ by importing the `DropdownComponent` and `DropdownItemComponent` components.
 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}) }}
+{{ NgDocActions.demo('d_responsive', {container: false}) }}
 
-```angular-html file="./_responsive.component.html" group="responsive" name="html"
+```angular-html file="./directive/_responsive.component.html" group="responsive" name="html"
 
 ```
 
-```angular-ts file="./_responsive.component.ts"#L1-L7 group="responsive" name="typescript"
+```angular-ts file="./directive/_responsive.component.ts"#L1-L7 group="responsive" name="typescript"
 
 ```
diff --git a/apps/docs/docs/components/navbar/ng-doc.page.ts b/apps/docs/docs/components/navbar/ng-doc.page.ts
@@ -1,8 +1,12 @@
 import ComponentCategory from '../ng-doc.category';
-import { FlowbiteBrandComponent } from './_brand.component';
-import { FlowbiteDefaultComponent } from './_default.component';
-import { FlowbiteDropdownComponent } from './_dropdown.component';
-import { FlowbiteResponsiveComponent } from './_responsive.component';
+import { FlowbiteBrandComponent as c_brand } from './component/_brand.component';
+import { FlowbiteDefaultComponent as c_default } from './component/_default.component';
+import { FlowbiteDropdownComponent as c_dropdown } from './component/_dropdown.component';
+import { FlowbiteResponsiveComponent as c_responsive } from './component/_responsive.component';
+import { FlowbiteBrandComponent as d_brand } from './directive/_brand.component';
+import { FlowbiteDefaultComponent as d_default } from './directive/_default.component';
+import { FlowbiteDropdownComponent as d_dropdown } from './directive/_dropdown.component';
+import { FlowbiteResponsiveComponent as d_responsive } from './directive/_responsive.component';
 
 import type { NgDocPage } from '@ng-doc/core';
 
@@ -13,14 +17,18 @@ import type { NgDocPage } from '@ng-doc/core';
  */
 const navbar: NgDocPage = {
   title: 'Navbar',
-  mdFile: './index.md',
+  mdFile: ['./index.md', './component.md'],
   category: ComponentCategory,
   order: 10,
   demos: {
-    flowbiteDefaultComponent: FlowbiteDefaultComponent,
-    flowbiteBrandComponent: FlowbiteBrandComponent,
-    flowbiteDropdownComponent: FlowbiteDropdownComponent,
-    flowbiteResponsiveComponent: FlowbiteResponsiveComponent,
+    c_brand: c_brand,
+    c_default: c_default,
+    c_dropdown: c_dropdown,
+    c_responsive: c_responsive,
+    d_brand: d_brand,
+    d_default: d_default,
+    d_dropdown: d_dropdown,
+    d_responsive: d_responsive,
   },
 };
 
diff --git a/libs/flowbite-angular/navbar/navbar-brand.component.ts b/libs/flowbite-angular/navbar/navbar-brand.component.ts
@@ -31,7 +31,13 @@ export const navbarBrandDefaultThemeProvider = makeEnvironmentProviders([
  */
 @Component({
   standalone: true,
-  selector: 'flowbite-navbar-brand',
+  selector: `
+    flowbite-navbar-brand,
+    span[flowbite-navbar-brand],
+    div[flowbite-navbar-brand],
+    a[flowbite-navbar-brand],
+    button[flowbite-navbar-brand]
+  `,
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/libs/flowbite-angular/navbar/navbar-content.component.ts b/libs/flowbite-angular/navbar/navbar-content.component.ts
@@ -34,11 +34,14 @@ export const navbarContentDefaultValueProvider = makeEnvironmentProviders([
  */
 @Component({
   standalone: true,
-  selector: 'flowbite-navbar-content',
+  selector: `
+    flowbite-navbar-content,
+    div[flowbite-navbar-content]
+  `,
   template: `
-    <div [class]="contentClasses().navbarContentListClass">
+    <ul [class]="contentClasses().navbarContentListClass">
       <ng-content />
-    </div>
+    </ul>
   `,
   host: {
     '[@isOpenAnimation]': 'navbarComponent().isOpen()',
diff --git a/libs/flowbite-angular/navbar/navbar-icon-button.component.ts b/libs/flowbite-angular/navbar/navbar-icon-button.component.ts
@@ -33,7 +33,11 @@ export const navbarIconButtonDefaultValueProvider = makeEnvironmentProviders([
  */
 @Component({
   standalone: true,
-  selector: 'flowbite-navbar-icon-button',
+  selector: `
+    flowbite-navbar-icon-button,
+    button[flowbite-navbar-icon-button],
+    a[flowbite-navbar-icon-button]
+  `,
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/libs/flowbite-angular/navbar/navbar-item.component.ts b/libs/flowbite-angular/navbar/navbar-item.component.ts
@@ -34,7 +34,10 @@ export const navbarItemDefaultValueProvider = makeEnvironmentProviders([
  */
 @Component({
   standalone: true,
-  selector: 'flowbite-navbar-item',
+  selector: `
+    flowbite-navbar-item,
+    li[flowbite-navbar-item]
+  `,
   template: `<ng-content />`,
   host: {
     '(click)': 'onClick()',
diff --git a/libs/flowbite-angular/navbar/navbar-toggle.component.ts b/libs/flowbite-angular/navbar/navbar-toggle.component.ts
@@ -34,7 +34,10 @@ export const navbarToggleDefaultValueProvider = makeEnvironmentProviders([
  */
 @Component({
   standalone: true,
-  selector: 'flowbite-navbar-toggle',
+  selector: `
+    flowbite-navbar-toggle,
+    button[flowbite-navbar-toggle]
+  `,
   imports: [IconComponent],
   template: `
     <flowbite-icon
diff --git a/libs/flowbite-angular/navbar/navbar.component.ts b/libs/flowbite-angular/navbar/navbar.component.ts
@@ -75,7 +75,10 @@ export const navbarDefaultValueProvider = makeEnvironmentProviders([
  */
 @Component({
   standalone: true,
-  selector: 'flowbite-navbar',
+  selector: `
+    flowbite-navbar,
+    nav[flowbite-navbar]
+  `,
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
