Added themable header, footer and navbar

src/app/app.module.ts

@@ -48,6 +48,8 @@ import { ThemedRootComponent } from './root/themed-root.component';
 import { ThemedEntryComponentModule } from '../themes/themed-entry-component.module';
 import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
 import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
+import { ThemedHeaderComponent } from './header/themed-header.component';
+import { ThemedFooterComponent } from './footer/themed-footer.component';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -129,11 +131,13 @@ const DECLARATIONS = [
   RootComponent,
   ThemedRootComponent,
   HeaderComponent,
+  ThemedHeaderComponent,
   HeaderNavbarWrapperComponent,
   AdminSidebarComponent,
   AdminSidebarSectionComponent,
   ExpandableAdminSidebarSectionComponent,
   FooterComponent,
+  ThemedFooterComponent,
   PageNotFoundComponent,
   ThemedPageNotFoundComponent,
   NotificationComponent,

src/app/footer/themed-footer.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { FooterComponent } from './footer.component';
+
+/**
+ * Themed wrapper for FooterComponent
+ */
+@Component({
+  selector: 'ds-themed-footer',
+  styleUrls: ['footer.component.scss'],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedFooterComponent extends ThemedComponent<FooterComponent> {
+  protected getComponentName(): string {
+    return 'FooterComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/footer/footer.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./footer.component`);
+  }
+}

src/app/header-nav-wrapper/header-navbar-wrapper.component.html

@@ -1,4 +1,4 @@
 <div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
-    <ds-header></ds-header>
+    <ds-themed-header></ds-themed-header>
-    <ds-navbar></ds-navbar>
+    <ds-themed-navbar></ds-themed-navbar>
 </div>

src/app/header/themed-header.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { MenuService } from '../shared/menu/menu.service';
+import { MenuID } from '../shared/menu/initial-menus-state';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { CommunityListPageComponent } from '../community-list-page/community-list-page.component';
+import { HeaderComponent } from './header.component';
+
+/**
+ * Themed wrapper for HeaderComponent
+ */
+@Component({
+  selector: 'ds-themed-header',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedHeaderComponent extends ThemedComponent<HeaderComponent> {
+  protected getComponentName(): string {
+    return 'HeaderComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/header/header.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./header.component`);
+  }
+}

src/app/navbar/navbar.module.ts

@@ -10,6 +10,7 @@ import { ExpandableNavbarSectionComponent } from './expandable-navbar-section/ex
 import { NavbarComponent } from './navbar.component';
 import { MenuModule } from '../shared/menu/menu.module';
 import { FormsModule } from '@angular/forms';
+import { ThemedNavbarComponent } from './themed-navbar.component';
 
 const effects = [
   NavbarEffects
@@ -31,6 +32,7 @@ const ENTRY_COMPONENTS = [
   ],
   declarations: [
     NavbarComponent,
+    ThemedNavbarComponent,
     NavbarSectionComponent,
     ExpandableNavbarSectionComponent
   ],
@@ -42,7 +44,7 @@ const ENTRY_COMPONENTS = [
     ExpandableNavbarSectionComponent
   ],
   exports: [
-    NavbarComponent,
+    ThemedNavbarComponent,
     NavbarSectionComponent,
     ExpandableNavbarSectionComponent
   ]

src/app/navbar/themed-navbar.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { NavbarComponent } from './navbar.component';
+
+/**
+ * Themed wrapper for NavbarComponent
+ */
+@Component({
+  selector: 'ds-themed-navbar',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedNavbarComponent  extends ThemedComponent<NavbarComponent> {
+  protected getComponentName(): string {
+    return 'NavbarComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/navbar/navbar.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./navbar.component`);
+  }
+}

src/app/root/root.component.html

@@ -20,7 +20,7 @@
       <router-outlet></router-outlet>
     </main>
 
-    <ds-footer></ds-footer>
+    <ds-themed-footer></ds-themed-footer>
   </div>
 </div>
 <ng-template #authLoader>

src/themes/custom/app/footer/footer.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { FooterComponent as BaseComponent } from '../../../../app/footer/footer.component';
+
+@Component({
+  selector: 'ds-footer',
+  // styleUrls: ['footer.component.scss'],
+  styleUrls: ['../../../../app/footer/footer.component.scss'],
+  // templateUrl: 'footer.component.html'
+  templateUrl: '../../../../app/footer/footer.component.html'
+})
+export class FooterComponent extends BaseComponent {
+}

src/themes/custom/app/header/header.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
+
+/**
+ * Represents the header with the logo and simple navigation
+ */
+@Component({
+  selector: 'ds-header',
+  // styleUrls: ['header.component.scss'],
+  styleUrls: ['../../../../app/header/header.component.scss'],
+  // templateUrl: 'header.component.html',
+  templateUrl: '../../../../app/header/header.component.html',
+})
+export class HeaderComponent extends BaseComponent {
+}

src/themes/custom/app/navbar/navbar.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NavbarComponent as BaseComponent } from '../../../../app/navbar/navbar.component';
+import { slideMobileNav } from '../../../../app/shared/animations/slide';
+
+/**
+ * Component representing the public navbar
+ */
+@Component({
+  selector: 'ds-navbar',
+  // styleUrls: ['./navbar.component.scss'],
+  styleUrls: ['../../../../app/navbar/navbar.component.scss'],
+  // templateUrl: './navbar.component.html',
+  templateUrl: '../../../../app/navbar/navbar.component.html',
+  animations: [slideMobileNav]
+})
+export class NavbarComponent extends BaseComponent {
+}

src/themes/custom/theme.module.ts

@@ -74,6 +74,9 @@ import { WorkflowItemSendBackComponent } from './app/+workflowitems-edit-page/wo
 import { WorkflowItemDeleteComponent } from './app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component';
 import { SubmissionModule } from '../../app/submission/submission.module';
 import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module';
+import { NavbarComponent } from './app/navbar/navbar.component';
+import { HeaderComponent } from './app/header/header.component';
+import { FooterComponent } from './app/footer/footer.component';
 
 const DECLARATIONS = [
   HomePageComponent,
@@ -109,7 +112,10 @@ const DECLARATIONS = [
   SubmissionImportExternalComponent,
   SubmissionSubmitComponent,
   WorkflowItemDeleteComponent,
-  WorkflowItemSendBackComponent
+  WorkflowItemSendBackComponent,
+  FooterComponent,
+  HeaderComponent,
+  NavbarComponent
 
 ];