diff --git a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.html b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.html
index e2594fe39c..f36e487440 100644
--- a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.html
+++ b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.html
@@ -21,6 +21,20 @@
+
+ @if (showAddSection) {
+
+
+
+ }
diff --git a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.scss b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.scss
index 48e848d2f4..99899c604b 100644
--- a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.scss
+++ b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.scss
@@ -56,6 +56,14 @@
padding-top: 0;
}
+.adf-form-side-nav-add-section {
+ padding: 8px 16px;
+
+ &-button {
+ width: 100%;
+ }
+}
+
.adf-form-side-nav-item {
display: flex;
align-items: center;
diff --git a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.spec.ts b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.spec.ts
index 66e479c2eb..864ce23a97 100644
--- a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.spec.ts
+++ b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.spec.ts
@@ -169,4 +169,32 @@ describe('FormSideNavComponent', () => {
expect(testingUtils.getByCSS('.adf-form-side-nav-toggle')).toBeTruthy();
});
+
+ describe('Add section button', () => {
+ it('should not show the add section button by default', () => {
+ fixture.componentRef.setInput('nodes', []);
+ fixture.detectChanges();
+
+ expect(testingUtils.getByCSS('.adf-form-side-nav-add-section')).toBeFalsy();
+ });
+
+ it('should show the add section button when showAddSection is true', () => {
+ fixture.componentRef.setInput('nodes', []);
+ fixture.componentRef.setInput('showAddSection', true);
+ fixture.detectChanges();
+
+ expect(testingUtils.getByCSS('.adf-form-side-nav-add-section')).toBeTruthy();
+ });
+
+ it('should emit addSectionClicked when the add section button is clicked', () => {
+ fixture.componentRef.setInput('nodes', []);
+ fixture.componentRef.setInput('showAddSection', true);
+ fixture.detectChanges();
+
+ const emitSpy = spyOn(component.addSectionClicked, 'emit');
+ testingUtils.getByCSS('.adf-form-side-nav-add-section-button').nativeElement.click();
+
+ expect(emitSpy).toHaveBeenCalledOnceWith();
+ });
+ });
});
diff --git a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.ts b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.ts
index a179a2f46f..3f3da28ae3 100644
--- a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.ts
+++ b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.ts
@@ -44,9 +44,15 @@ export class FormSideNavComponent implements OnChanges {
@Input()
activeNodeId: string;
+ @Input()
+ showAddSection = false;
+
@Output()
sectionSelected = new EventEmitter();
+ @Output()
+ addSectionClicked = new EventEmitter();
+
protected readonly isSmallScreen = toSignal(
this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(map(({ matches }) => matches)),
{ initialValue: false }
diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json
index ec75f12a1c..6f977c07ba 100644
--- a/lib/core/src/lib/i18n/en.json
+++ b/lib/core/src/lib/i18n/en.json
@@ -93,7 +93,8 @@
"COLLAPSE": "Collapse section",
"HAS_ERRORS": "This section contains validation errors",
"COMPLETE": "This section is complete",
- "REQUIRED_FIELDS": "{{ count }} required fields"
+ "REQUIRED_FIELDS": "{{ count }} required fields",
+ "ADD_SECTION": "Add section"
}
},
"BUTTON": {