adding old skin

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

@@ -0,0 +1,3 @@
+<div [class.open]="!(isNavBarCollapsed | async)" id="header-navbar-wrapper">
+  <ds-themed-header></ds-themed-header>
+</div>

src/themes/pedspace-custom/app/header-nav-wrapper/header-navbar-wrapper.component.scss

@@ -0,0 +1,7 @@
+:host {
+  // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
+  position: relative;
+  div#header-navbar-wrapper {
+    border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
+  }
+}

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

@@ -6,10 +6,8 @@ import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/h
  */
 @Component({
   selector: 'ds-header-navbar-wrapper',
-  // styleUrls: ['./header-navbar-wrapper.component.scss'],
-  styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'],
-  // templateUrl: './header-navbar-wrapper.component.html',
-  templateUrl: '../../../../app/header-nav-wrapper/header-navbar-wrapper.component.html',
+  styleUrls: ['header-navbar-wrapper.component.scss'],
+  templateUrl: 'header-navbar-wrapper.component.html',
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {
 }

src/themes/pedspace-custom/app/header/header.component.html

@@ -0,0 +1,25 @@
+<header class="header">
+  <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
+    <div class="d-flex flex-grow-1">
+      <a class="navbar-brand m-2" routerLink="/home">
+        <img src="assets/dspace-simple/images/PEDSnetLogo.png" [attr.alt]="'menu.header.image.logo' | translate"/>
+      </a>
+    </div>
+    <div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center gapx-1">
+      <ds-themed-search-navbar></ds-themed-search-navbar>
+      <ds-themed-lang-switch></ds-themed-lang-switch>
+      <ds-context-help-toggle></ds-context-help-toggle>
+      <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>
+    </div>
+  </nav>
+  <ds-themed-navbar></ds-themed-navbar>
+
+</header>

src/themes/pedspace-custom/app/header/header.component.scss

@@ -0,0 +1,26 @@
+@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;
+}
+
+.navbar-toggler {
+  color: var(--ds-header-icon-color);
+
+  &:hover, &:focus {
+    color: var(--ds-header-icon-color-hover);
+  }
+}

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

@@ -6,10 +6,8 @@ import { HeaderComponent as BaseComponent } from '../../../../app/header/header.
  */
 @Component({
   selector: 'ds-header',
-  // styleUrls: ['header.component.scss'],
-  styleUrls: ['../../../../app/header/header.component.scss'],
-  // templateUrl: 'header.component.html',
-  templateUrl: '../../../../app/header/header.component.html',
+  styleUrls: ['header.component.scss'],
+  templateUrl: 'header.component.html',
 })
 export class HeaderComponent extends BaseComponent {
 }

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

@@ -0,0 +1,28 @@
+<div class="background-image-container mt-ncs">
+  <picture class="background-image">
+    <source type="image/webp" srcset="assets/dspace-simple/images/dandy-full.webp 2000w, assets/dspace-simple/images/dandy-half.webp 1200w, assets/dspace-simple/images/dandy-tall.webp 768w">
+    <source type="image/jpg" srcset="assets/dspace-simple/images/dandy-full.jpg 2000w, assets/dspace-simple/images/dandy-half.jpg 1200w, assets/dspace-simple/images/dandy-tall.jpg 768w">
+    <img alt [src]="'assets/dspace-simple/images/dandy-full.jpg'">
+    <!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
+  </picture>
+  <div class="container">
+    <div class="jumbotron jumbotron-fluid">
+      <div>
+        <h1 class="display-3">PEDSnet Variable Dictionary</h1>
+        <p class="lead">Explore a wealth of clinical, environmental, and health data from over 13 million children. Discover variables and codesets used in previous studies to inspire your research.</p>
+        <div class="mt-4">
+          <a href="community-list" class="btn btn-subtle btn-lg">Explore Variables</a>
+        </div>
+      </div>
+      <div class="mt-4">
+        <h4>Repository Information:</h4>
+        <ul>
+          <li><strong>Codeset:</strong> A collection of codes (e.g., diagnosis or procedure codes) used for a given clinical concept.</li>
+          <li><strong>Variable Definition:</strong> The logic for determining (levels of) a variable, which may include one or more codesets.</li>
+          <li><strong>Computable Phenotype:</strong> A complex variable definition that uses multiple other variables to assess or determine a healthcare concept.</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <small class="credits text-light">Photo by <a href="https://www.pexels.com/@inspiredimages" class="text-light">@inspiredimages</a></small>
+</div>

src/themes/pedspace-custom/app/home-page/home-news/home-news.component.scss

@@ -0,0 +1,86 @@
+:host {
+  display: block;
+
+  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: bottom;
+    }
+
+    .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;
+    }
+  }
+
+  .btn-subtle {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .btn-subtle:hover, .btn-subtle:focus {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+
+  .jumbotron {
+    background-color: transparent;
+  }
+
+  a {
+    color: var(--ds-home-news-link-color);
+
+    @include hover {
+      color: var(--ds-home-news-link-hover-color);
+    }
+  }
+}
+
+
+
+

src/themes/pedspace-custom/app/home-page/home-news/home-news.component.ts

@@ -3,10 +3,8 @@ import { HomeNewsComponent as BaseComponent } from '../../../../../app/home-page
 
 @Component({
   selector: 'ds-home-news',
-  // styleUrls: ['./home-news.component.scss'],
-  styleUrls: ['../../../../../app/home-page/home-news/home-news.component.scss'],
-  // templateUrl: './home-news.component.html'
-  templateUrl: '../../../../../app/home-page/home-news/home-news.component.html'
+  styleUrls: ['./home-news.component.scss'],
+  templateUrl: './home-news.component.html'
 })
 
 /**

src/themes/pedspace-custom/app/navbar/navbar.component.html

@@ -0,0 +1,26 @@
+<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/dspace-simple/images/PEDSnetLogo.png" [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>
+        <li *ngFor="let section of (sections | async)">
+          <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
+        </li>
+      </ul>
+    </div>
+    <div class="navbar-buttons d-flex align-items-center gapx-1">
+      <ds-themed-search-navbar class="navbar-collapsed"></ds-themed-search-navbar>
+      <ds-themed-lang-switch class="navbar-collapsed"></ds-themed-lang-switch>
+      <ds-context-help-toggle class="navbar-collapsed"></ds-context-help-toggle>
+      <ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
+      <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
+    </div>
+  </div>
+</nav>

src/themes/pedspace-custom/app/navbar/navbar.component.scss

@@ -0,0 +1,65 @@
+nav.navbar {
+  align-items: baseline;
+
+  .navbar-inner-container {
+    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
+  }
+}
+
+.navbar-nav {
+  background-color: var(--ds-navbar-bg);
+}
+
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
+  .navbar {
+    width: 100vw;
+    background-color: var(--bs-white);
+    position: absolute;
+    overflow: hidden;
+    height: 0;
+    z-index: var(--ds-nav-z-index);
+    &.open {
+      height: 100vh; //doesn't matter because wrapper is sticky
+      border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
+    }
+  }
+}
+
+@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);
+
+    &:hover, &:focus {
+      color: var(--ds-navbar-link-color-hover);
+    }
+  }
+}

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

@@ -7,10 +7,8 @@ import { slideMobileNav } from '../../../../app/shared/animations/slide';
  */
 @Component({
   selector: 'ds-navbar',
-  // styleUrls: ['./navbar.component.scss'],
-  styleUrls: ['../../../../app/navbar/navbar.component.scss'],
-  // templateUrl: './navbar.component.html',
-  templateUrl: '../../../../app/navbar/navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+  templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
 export class NavbarComponent extends BaseComponent {