Add link and text properties to MenuItemModel

angular.json

@@ -59,6 +59,11 @@
                 "input": "src/themes/dspace/styles/theme.scss",
                 "inject": false,
                 "bundleName": "dspace-theme"
+              },
+              {
+                "input": "src/themes/mofp/styles/theme.scss",
+                "inject": false,
+                "bundleName": "mofp-theme"
               }
             ],
             "scripts": [],

config/config.yml

@@ -3,3 +3,6 @@ rest:
   host: sandbox.dspace.org
   port: 443
   nameSpace: /server
+
+themes:
+  - name: 'mofp'

src/app/shared/menu/menu-item/models/menu-item.model.ts

@@ -6,4 +6,6 @@ import { MenuItemType } from '../../menu-item-type.model';
 export interface MenuItemModel {
   type: MenuItemType;
   disabled: boolean;
+  text: string;
+  link: string;
 }

src/themes/custom/app/home-page/home-page.component.html

@@ -0,0 +1,16 @@
+<div class="background-image-container">
+  <div class="container">
+    <div class="jumbotron jumbotron-fluid">
+      <div class="d-flex flex-wrap">
+
+      </div>
+
+    </div>
+  </div>
+  <picture class="background-image">
+    <source type="image/webp" srcset="assets/dspace/images/banner.webp 2000w, assets/dspace/images/banner-half.webp 1200w, assets/dspace/images/banner-tall.webp 768w">
+    <source type="image/jpg" srcset="assets/dspace/images/banner.jpg 2000w, assets/dspace/images/banner-half.jpg 1200w, assets/dspace/images/banner-tall.jpg 768w">
+    <img alt="" [src]="'assets/dspace/images/banner.jpg'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
+  </picture>
+  <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small>
+</div>

src/themes/dspace/app/home-page/home-news/home-news.component.html

@@ -28,6 +28,7 @@ <h1 class="display-3">DSpace 8</h1>
         <li>Demo Collection Administrator = dspacedemo+colladmin&#64;gmail.com</li>
         <li>Demo Submitter = dspacedemo+submit&#64;gmail.com</li>
       </ul>
+
     </div>
   </div>
   <picture class="background-image">

src/themes/dspace/styles/theme.scss

@@ -10,3 +10,10 @@
 @import '../../../styles/bootstrap_variables_mapping.scss';
 @import '../../../styles/_truncatable-part.component.scss';
 @import './_global-styles.scss';
+
+.display-3 {
+  font-size: 30px;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}

src/themes/eager-themes.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 
 import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme.module';
-// import { EagerThemeModule as CustomEagerThemeModule } from './custom/eager-theme.module';
 
 /**
  * This module bundles the eager theme modules for all available themes.
@@ -12,8 +11,7 @@
  */
 @NgModule({
   imports: [
-    DSpaceEagerThemeModule,
-    // CustomEagerThemeModule,
+    DSpaceEagerThemeModule
   ],
 })
 export class EagerThemesModule {

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

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

src/themes/mofp/app/header-nav-wrapper/header-navbar-wrapper.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+
+/**
+ * This component represents a wrapper for the horizontal navbar and the header
+ */
+@Component({
+  selector: 'ds-header-navbar-wrapper',
+  styleUrls: ['header-navbar-wrapper.component.scss'],
+  templateUrl: 'header-navbar-wrapper.component.html',
+})
+export class HeaderNavbarWrapperComponent extends BaseComponent {
+}

src/themes/mofp/app/header/header.component.html

@@ -0,0 +1,21 @@
+<header class="main-header">
+  <div class="container">
+    <div class="d-flex flex-row justify-content-between">
+      <a class="navbar-brand my-2" routerLink="/home" style="padding: 30px;"></a>
+
+      <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
+<!--        <ds-themed-search-navbar></ds-themed-search-navbar>-->
+<!--        <ds-lang-switch></ds-lang-switch>-->
+        <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
+<!--        <ds-impersonate-navbar></ds-impersonate-navbar>-->
+        <div class="pl-2">
+          <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
+                  aria-controls="collapsingNav"
+                  aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
+            <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+          </button>
+        </div>
+      </nav>
+    </div>
+  </div>
+</header>

src/themes/mofp/app/header/header.component.scss

@@ -0,0 +1,19 @@
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  nav.navbar {
+    display: none;
+  }
+  .header {
+    background-color: var(--ds-header-bg);
+  }
+}
+
+.navbar-brand img {
+  @media screen and (max-width: map-get($grid-breakpoints, md)) {
+    height: var(--ds-header-logo-height-xs);
+  }
+}
+.navbar-toggler .navbar-toggler-icon {
+  background-image: none !important;
+  line-height: 1.5;
+  color: var(--bs-link-color);
+}

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

@@ -0,0 +1,13 @@
+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'],
+  templateUrl: 'header.component.html',
+})
+export class HeaderComponent extends BaseComponent {
+}

src/themes/mofp/app/home-page/home-news/home-news.component.html

@@ -0,0 +1,4 @@
+<div class="background-image-container mb-4">
+<!--  <div class="container">-->
+<!--  </div>-->
+</div>

src/themes/mofp/app/home-page/home-news/home-news.component.scss

@@ -0,0 +1,74 @@
+:host {
+  display: block;
+  margin-top: calc(var(--ds-content-spacing) * -1);
+
+  div.background-image-container {
+    color: white;
+    position: relative;
+
+    .background-image > img {
+      background-color: var(--bs-info);
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: top;
+    }
+
+    .container {
+      position: relative;
+      text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+
+      &:before, &:after {
+        content: '';
+        display: block;
+        width: var(--ds-banner-background-gradient-width);
+        height: 100%;
+        top: 0;
+        position: absolute;
+      }
+
+      &:before {
+        background: linear-gradient(to left, var(--ds-banner-text-background), transparent);
+        left: calc(-1 * var(--ds-banner-background-gradient-width));
+
+      }
+
+      &:after {
+        background: linear-gradient(to right, var(--ds-banner-text-background), transparent);
+        right: calc(-1 * var(--ds-banner-background-gradient-width));
+      }
+
+      background-color: var(--ds-banner-text-background);
+    }
+
+
+    small.credits {
+      a {
+        color: inherit;
+      }
+
+      opacity: 0.3;
+      position: absolute;
+      right: var(--bs-spacer);
+      bottom: 0;
+    }
+  }
+
+  .jumbotron {
+    background-color: transparent;
+  }
+
+  a {
+    color: var(--ds-home-news-link-color);
+
+    @include hover {
+      color: var(--ds-home-news-link-hover-color);
+    }
+  }
+}
+
+

src/themes/mofp/app/home-page/home-news/home-news.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { HomeNewsComponent as BaseComponent } from '../../../../../app/home-page/home-news/home-news.component';
+
+@Component({
+  selector: 'ds-home-news',
+  styleUrls: ['./home-news.component.scss'],
+  templateUrl: './home-news.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class HomeNewsComponent extends BaseComponent {}
+

src/themes/mofp/app/navbar/navbar.component.html

@@ -0,0 +1,23 @@
+<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+  class="navbar navbar-expand-md navbar-light p-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
+  <div class="navbar-inner-container w-100 h-100" [class.container]="!(isXsOrSm$ | async)">
+    <a class="navbar-brand my-2" routerLink="/home">
+      <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate" />
+    </a>
+
+    <div id="collapsingNav" class="w-100 h-100">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
+        <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
+            <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
+        </li>
+        <ng-container *ngFor="let section of (sections | async)">
+          <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
+        </ng-container>
+      </ul>
+    </div>
+    <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
+    <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
+    <ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
+    <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
+  </div>
+</nav>

src/themes/mofp/app/navbar/navbar.component.scss

@@ -0,0 +1,57 @@
+nav.navbar {
+  border-top: 1px var(--ds-header-navbar-border-top-color) solid;
+  border-bottom: 5px var(--bs-green) solid;
+  align-items: baseline;
+  color: var(--ds-header-icon-color);
+}
+
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
+  .navbar {
+    width: 100%;
+    background-color: var(--bs-white);
+    position: absolute;
+    overflow: hidden;
+    height: 0;
+    &.open {
+      height: 100vh; //doesn't matter because wrapper is sticky
+    }
+  }
+}
+
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  .reset-padding-md {
+    margin-left: calc(var(--bs-spacer) / -2);
+    margin-right: calc(var(--bs-spacer) / -2);
+  }
+}
+
+/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
+.navbar-expand-md.navbar-container {
+  @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
+    > .navbar-inner-container {
+      padding: 0 var(--bs-spacer);
+      a.navbar-brand {
+        display: none;
+      }
+      .navbar-collapsed {
+        display: none;
+      }
+    }
+    padding: 0;
+  }
+  height: 80px;
+}
+
+a.navbar-brand img {
+  max-height: var(--ds-header-logo-height);
+}
+
+.navbar-nav {
+  ::ng-deep a.nav-link {
+    color: var(--ds-navbar-link-color);
+  }
+  ::ng-deep a.nav-link:hover {
+    color: var(--ds-navbar-link-color-hover);
+  }
+}

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

@@ -0,0 +1,15 @@
+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'],
+  templateUrl: './navbar.component.html',
+  animations: [slideMobileNav]
+})
+export class NavbarComponent extends BaseComponent {
+}

src/themes/mofp/assets/images/favicons/manifest.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "DSpace",
+    "short_name": "DSpace",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#091119",
+    "background_color": "#091119",
+    "display": "standalone"
+}