diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
new file mode 100644
index 0000000000..3cd236da65
--- /dev/null
+++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
@@ -0,0 +1,6 @@
+<li class="sidebar-section">
+    <a class="nav-item nav-link shortcuts-tree" [href]="link">
+        <i class="fas fa-{{icon}} fa-fw p-0"></i>
+        <span class="section-header-text">{{('admin.sidebar.section.' + name + '.header') | translate}}</span>
+    </a>
+</li>
\ No newline at end of file
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
new file mode 100644
index 0000000000..a4f4399f59
--- /dev/null
+++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminSidebarSectionComponent } from './admin-sidebar-section.component';
+
+describe('AdminSidebarSectionComponent', () => {
+  let component: AdminSidebarSectionComponent;
+  let fixture: ComponentFixture<AdminSidebarSectionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AdminSidebarSectionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminSidebarSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
new file mode 100644
index 0000000000..758ea72965
--- /dev/null
+++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-admin-sidebar-section',
+  templateUrl: './admin-sidebar-section.component.html',
+  styleUrls: ['./admin-sidebar-section.component.scss'],
+
+})
+export class AdminSidebarSectionComponent {
+  @Input() name: string;
+  @Input() link: string;
+  @Input() icon: string;
+}
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
new file mode 100644
index 0000000000..e7956901e5
--- /dev/null
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -0,0 +1,18 @@
+<li class="sidebar-section" [ngClass]="{'active': !(collapsed | async)}"
+    [@bgColor]="{
+     value: ((collapsed | async) ? 'startBackground' : 'endBackground'),
+     params: {endColor: (sidebarActiveBg | async)}}">
+    <a class="nav-item nav-link shortcuts-tree p-0" href="#"
+       (click)="toggleSection($event)">
+        <i class="fas fa-{{icon}} fa-fw"></i>
+        <span class="section-header-text">{{('admin.sidebar.section.' + name + '.header') | translate}}</span>
+        <i class="fas fa-chevron-right fa-pull-right"
+           [@rotate]="(collapsed | async) ? 'collapsed' : 'expanded'"></i>
+    </a>
+    <div class="sub-section-wrapper" @slide *ngIf="!(collapsed | async)">
+    <ul class="sidebar-sub-level-items">
+        <li *ngFor="let section of subSections"><a class="nav-item nav-link" [href]="section.link">{{section.name}}</a>
+        </li>
+    </ul>
+    </div>
+</li>
\ No newline at end of file
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
new file mode 100644
index 0000000000..48c85876b7
--- /dev/null
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExpandableAdminSidebarSectionComponent } from './expandable-admin-sidebar-section.component';
+
+describe('ExpandableAdminSidebarSectionComponent', () => {
+  let component: ExpandableAdminSidebarSectionComponent;
+  let fixture: ComponentFixture<ExpandableAdminSidebarSectionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExpandableAdminSidebarSectionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExpandableAdminSidebarSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
new file mode 100644
index 0000000000..8b0fb7112d
--- /dev/null
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { first } from 'rxjs/operators';
+import { rotate } from '../../../shared/animations/rotate';
+import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
+import { slide } from '../../../shared/animations/slide';
+import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { bgColor } from '../../../shared/animations/bgColor';
+import { AdminSidebarService } from '../admin-sidebar.service';
+
+@Component({
+  selector: 'ds-expandable-admin-sidebar-section',
+  templateUrl: './expandable-admin-sidebar-section.component.html',
+  styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
+  animations: [rotate, slide, bgColor]
+
+})
+export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionComponent implements OnInit {
+  @Input() subSections;
+  link = '#';
+  sidebarActiveBg;
+  collapsed: Observable<boolean>;
+  sidebarCollapsed: Observable<boolean>;
+
+  constructor(private sidebarService: AdminSidebarService,
+              private variableService: CSSVariableService) {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg');
+    this.collapsed = this.sidebarService.isSectionCollapsed(this.name);
+    this.sidebarCollapsed = this.sidebarService.isSidebarCollapsed();
+  }
+
+  toggleSection(event: Event) {
+    event.preventDefault();
+    this.sidebarCollapsed.pipe(first())
+      .subscribe((sidebarCollapsed) => {
+        if (sidebarCollapsed) {
+          this.sidebarService.toggleSidebar();
+        }
+        this.sidebarService.toggleSection(this.name);
+      })
+  }
+}