Fix/contributors page

src/app/app.component.html

@@ -1,2 +1,3 @@
 <router-outlet />
 <osf-toast></osf-toast>
+<osf-full-screen-loader></osf-full-screen-loader>

src/app/app.component.ts

@@ -1,23 +1,23 @@
-import { Store } from '@ngxs/store';
+import { createDispatchMap } from '@ngxs/store';
 
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { GetCurrentUser } from '@core/store/user';
 
-import { ToastComponent } from './shared/components';
+import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
 
 @Component({
   selector: 'osf-root',
-  imports: [RouterOutlet, ToastComponent],
+  imports: [RouterOutlet, ToastComponent, FullScreenLoaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
-  #store = inject(Store);
+  actions = createDispatchMap({ getCurrentUser: GetCurrentUser });
 
   ngOnInit(): void {
-    this.#store.dispatch(GetCurrentUser);
+    this.actions.getCurrentUser();
   }
 }

src/app/core/components/footer/footer.component.html

@@ -8,8 +8,12 @@
 
     <div class="footer-socials flex justify-content-center align-items-center" [class]="isWeb() ? 'm-y-12' : 'm-y-24'">
       @for (icon of socialIcons; track icon.name) {
-        <a [href]="icon.url" [attr.aria-label]="'footer.socials.' + icon.name | translate">
-          <img width="37" height="37" [ngSrc]="'assets/icons/socials/' + icon.name + '.svg'" alt="Social" />
+        <a
+          class="social-link flex align-items-center justify-content-center"
+          [href]="icon.url"
+          [attr.aria-label]="'footer.socials.' + icon.name | translate"
+        >
+          <osf-icon [iconClass]="`${icon.iconName} fa-2xl`"></osf-icon>
         </a>
       }
     </div>

src/app/core/components/footer/footer.component.scss

@@ -18,6 +18,20 @@
       color: var.$dark-blue-1;
       text-align: center;
     }
+
+    .social-link {
+      background-color: var.$pr-blue-1;
+      border-radius: mix.rem(6px);
+      color: var.$white;
+      padding: mix.rem(6px);
+      width: mix.rem(36px);
+      height: mix.rem(36px);
+
+      &:hover {
+        background-color: var.$pr-blue-3;
+        text-decoration: none;
+      }
+    }
   }
 
   .footer-links {

src/app/core/components/footer/footer.component.ts

@@ -1,43 +1,22 @@
 import { TranslateModule } from '@ngx-translate/core';
 
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 
-import { SocialIcon } from '@osf/shared/models';
+import { SOCIAL_ICONS } from '@osf/core/constants';
+import { IconComponent } from '@osf/shared/components';
 import { IS_WEB } from '@shared/utils';
 
 @Component({
   selector: 'osf-footer',
-  imports: [RouterLink, NgOptimizedImage, TranslateModule],
+  imports: [RouterLink, TranslateModule, IconComponent],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
   isWeb = toSignal(inject(IS_WEB));
 
-  protected readonly socialIcons: SocialIcon[] = [
-    {
-      name: 'x',
-      url: 'https://x.com/OSFramework',
-      ariaLabel: 'X (formerly Twitter)',
-    },
-    {
-      name: 'facebook',
-      url: 'https://www.facebook.com/CenterForOpenScience/',
-      ariaLabel: 'Facebook',
-    },
-    {
-      name: 'group',
-      url: 'https://groups.google.com/g/openscienceframework',
-      ariaLabel: 'Group',
-    },
-    {
-      name: 'github',
-      url: 'https://github.com/centerforopenscience',
-      ariaLabel: 'GitHub',
-    },
-  ];
+  protected readonly socialIcons = SOCIAL_ICONS;
 }

src/app/core/components/header/header.component.html

@@ -3,6 +3,7 @@
 
   <div class="dropdown-button ml-auto">
     <p-button
+      class="custom-dark-hover"
       icon="fas fa-chevron-down"
       iconPos="right"
       [label]="currentUser()?.fullName"

src/app/core/components/index.ts

@@ -2,4 +2,5 @@ export { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 export { FooterComponent } from './footer/footer.component';
 export { HeaderComponent } from './header/header.component';
 export { RootComponent } from './root/root.component';
+export { SidenavComponent } from './sidenav/sidenav.component';
 export { TopnavComponent } from './topnav/topnav.component';

src/app/core/components/nav-menu/nav-menu.component.html

@@ -1,58 +1,54 @@
-<aside class="custom-scrollbar flex flex-column p-4 h-full">
-  <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
-
-  <nav class="nav-menu m-t-36">
-    <p-panelMenu [model]="mainMenuItems" [multiple]="false">
-      <ng-template #item let-item>
-        <a
-          [routerLink]="item.routerLink"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{
-            exact: item.label !== 'navigation.myProjects' ? item.useExactMatch : true,
-          }"
-          class="nav-link flex align-items-center"
-          [class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
-          (click)="goToLink(item)"
-        >
-          @if (item.icon) {
-            <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
-          }
-          <span>{{ item.label | translate }}</span>
-          @if (item.items) {
-            <osf-icon
-              class="ml-auto pt-1"
-              [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
-            ></osf-icon>
-          }
-        </a>
-
-        @if (item.label === 'navigation.myProjects' && isProjectRoute()) {
-          <div class="ml-4">
-            <p-panelMenu [model]="myProjectMenuItems" [multiple]="false">
-              <ng-template #item let-item>
-                <a
-                  [routerLink]="item.routerLink ? ['/my-projects', currentProjectId(), item.routerLink] : null"
-                  [routerLinkActive]="item.routerLink ? 'active' : ''"
-                  [routerLinkActiveOptions]="{ exact: true }"
-                  class="nav-link flex align-items-center"
-                  (click)="goToLink(item)"
-                >
-                  @if (item.icon) {
-                    <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
-                  }
-                  <span>{{ item.label | translate }}</span>
-                  @if (item.items) {
-                    <osf-icon
-                      class="ml-auto pt-1"
-                      [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
-                    ></osf-icon>
-                  }
-                </a>
-              </ng-template>
-            </p-panelMenu>
-          </div>
+<nav class="nav-menu">
+  <p-panelMenu [model]="mainMenuItems" [multiple]="false">
+    <ng-template #item let-item>
+      <a
+        [routerLink]="item.routerLink"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{
+          exact: item.label !== 'navigation.myProjects' ? item.useExactMatch : true,
+        }"
+        class="nav-link flex align-items-center"
+        [class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
+        (click)="goToLink(item)"
+      >
+        @if (item.icon) {
+          <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
         }
-      </ng-template>
-    </p-panelMenu>
-  </nav>
-</aside>
+        <span>{{ item.label | translate }}</span>
+        @if (item.items) {
+          <osf-icon
+            class="ml-auto pt-1"
+            [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
+          ></osf-icon>
+        }
+      </a>
+
+      @if (item.label === 'navigation.myProjects' && isProjectRoute()) {
+        <div class="ml-4">
+          <p-panelMenu [model]="myProjectMenuItems" [multiple]="false">
+            <ng-template #item let-item>
+              <a
+                [routerLink]="item.routerLink ? ['/my-projects', currentProjectId(), item.routerLink] : null"
+                [routerLinkActive]="item.routerLink ? 'active' : ''"
+                [routerLinkActiveOptions]="{ exact: true }"
+                class="nav-link flex align-items-center"
+                (click)="goToLink(item)"
+              >
+                @if (item.icon) {
+                  <osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
+                }
+                <span>{{ item.label | translate }}</span>
+                @if (item.items) {
+                  <osf-icon
+                    class="ml-auto pt-1"
+                    [iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
+                  ></osf-icon>
+                }
+              </a>
+            </ng-template>
+          </p-panelMenu>
+        </div>
+      }
+    </ng-template>
+  </p-panelMenu>
+</nav>

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -5,7 +5,6 @@ import { PanelMenuModule } from 'primeng/panelmenu';
 
 import { filter, map } from 'rxjs';
 
-import { NgOptimizedImage } from '@angular/common';
 import { Component, computed, inject, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
@@ -16,7 +15,7 @@ import { NavItem } from '@osf/shared/models';
 
 @Component({
   selector: 'osf-nav-menu',
-  imports: [NgOptimizedImage, RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe, IconComponent],
+  imports: [RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe, IconComponent],
   templateUrl: './nav-menu.component.html',
   styleUrl: './nav-menu.component.scss',
 })

src/app/core/components/root/root.component.html

@@ -1,6 +1,6 @@
 @if (isWeb()) {
   <div class="layout-desktop">
-    <osf-nav-menu></osf-nav-menu>
+    <osf-sidenav></osf-sidenav>
 
     <div class="content-wrapper">
       <osf-header></osf-header>

src/app/core/components/root/root.component.spec.ts

@@ -11,7 +11,9 @@ import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.comp
 import { FooterComponent } from '@core/components/footer/footer.component';
 import { HeaderComponent } from '@core/components/header/header.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
-import { IS_WEB, IS_XSMALL } from '@osf/shared/utils/breakpoints.tokens';
+import { IS_WEB, IS_XSMALL } from '@osf/shared/utils';
+
+import { SidenavComponent } from '../sidenav/sidenav.component';
 
 import { RootComponent } from './root.component';
 
@@ -28,7 +30,14 @@ describe('RootComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         RootComponent,
-        ...MockComponents(HeaderComponent, FooterComponent, TopnavComponent, ConfirmDialog, BreadcrumbComponent),
+        ...MockComponents(
+          HeaderComponent,
+          FooterComponent,
+          TopnavComponent,
+          ConfirmDialog,
+          BreadcrumbComponent,
+          SidenavComponent
+        ),
       ],
       providers: [
         MockProvider(IS_WEB, isWebSubject),

src/app/core/components/root/root.component.ts

@@ -11,7 +11,7 @@ import { HeaderComponent } from '@core/components/header/header.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
 import { IS_MEDIUM, IS_WEB } from '@shared/utils';
 
-import { NavMenuComponent } from '../nav-menu/nav-menu.component';
+import { SidenavComponent } from '../sidenav/sidenav.component';
 
 @Component({
   selector: 'osf-root',
@@ -23,7 +23,7 @@ import { NavMenuComponent } from '../nav-menu/nav-menu.component';
     ConfirmDialog,
     BreadcrumbComponent,
     RouterOutlet,
-    NavMenuComponent,
+    SidenavComponent,
   ],
   templateUrl: './root.component.html',
   styleUrls: ['./root.component.scss'],

src/app/core/components/sidenav/sidenav.component.html

@@ -0,0 +1,4 @@
+<aside class="custom-scrollbar flex flex-column p-4 h-full">
+  <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
+  <osf-nav-menu class="m-t-36" />
+</aside>

src/app/core/components/sidenav/sidenav.component.spec.ts

@@ -0,0 +1,26 @@
+import { MockComponent } from 'ng-mocks';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavMenuComponent } from '../nav-menu/nav-menu.component';
+
+import { SidenavComponent } from './sidenav.component';
+
+describe('SidenavDComponent', () => {
+  let component: SidenavComponent;
+  let fixture: ComponentFixture<SidenavComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SidenavComponent, MockComponent(NavMenuComponent)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SidenavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/components/sidenav/sidenav.component.ts

@@ -0,0 +1,13 @@
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { NavMenuComponent } from '@core/components/nav-menu/nav-menu.component';
+
+@Component({
+  selector: 'osf-sidenav',
+  imports: [NgOptimizedImage, NavMenuComponent],
+  templateUrl: './sidenav.component.html',
+  styleUrl: './sidenav.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidenavComponent {}

src/app/core/components/topnav/topnav.component.html

@@ -11,7 +11,7 @@
   </p-drawer>
 
   <p-button
-    class="topnav-btn flex"
+    class="topnav-btn custom-light-hover flex"
     [icon]="isDrawerVisible() ? 'fas fa-close fa-2xl' : 'fas fa-bars fa-2xl'"
     severity="contrast"
     (onClick)="toggleMenuVisibility()"

src/app/core/constants/index.ts

@@ -2,4 +2,5 @@ export * from './error-messages';
 export * from './my-projects-table.constants';
 export * from './nav-items.constant';
 export * from './ngxs-states.constant';
+export * from './social-icons.constant';
 export * from './storage-locations.constant';