fix(icons): added fontawesome icons and updated styles

angular.json

@@ -35,7 +35,8 @@
             "styles": [
               "src/assets/styles/styles.scss",
               "src/assets/icons/dist/icons.css",
-              "node_modules/primeflex/primeflex.css"
+              "node_modules/primeflex/primeflex.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
             ],
             "stylePreprocessorOptions": {
               "includePaths": ["src"]

package.json

@@ -33,6 +33,7 @@
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
     "@angular/service-worker": "^19.2.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",
     "@ngxs/devtools-plugin": "^19.0.0",

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

@@ -1,6 +1,6 @@
 @if (!parsedUrl()[0].includes('home') && !parsedUrl()[0].includes('confirm')) {
-  <div class="breadcrumbs flex gap-2 md:p-5 md:pb-0 xl:p-0">
-    <i class="osf-icon-home"></i>
+  <div class="breadcrumbs flex align-items-center gap-2 md:p-5 md:pb-0 xl:p-0">
+    <osf-icon iconClass="fas fa-home"></osf-icon>
     <p>/</p>
     @for (url of parsedUrl(); track url; let l = $last) {
       {{ url }}

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

@@ -2,9 +2,11 @@ import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router } from '@angular/router';
 
+import { IconComponent } from '@osf/shared/components';
+
 @Component({
   selector: 'osf-breadcrumb',
-  imports: [],
+  imports: [IconComponent],
   templateUrl: './breadcrumb.component.html',
   styleUrl: './breadcrumb.component.scss',
 })

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

@@ -3,15 +3,7 @@
     <div class="footer-links flex flex-wrap justify-content-center align-items-center">
       <div class="flex justify-content-center">
         <a href="https://cos.io/">{{ 'footer.links.centerForOpenScience' | translate }}</a>
-        <span class="separator">|</span>
       </div>
-
-      <div class="flex justify-content-center">
-        <a>{{ 'footer.links.reproducibilityProjectPsychology' | translate }}</a>
-        <span class="separator">|</span>
-      </div>
-
-      <a>{{ 'footer.links.reproducibilityProjectCancerBiology' | translate }}</a>
     </div>
 
     <div class="footer-socials flex justify-content-center align-items-center" [class]="isWeb() ? 'm-y-12' : 'm-y-24'">

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

@@ -2,10 +2,12 @@
   <osf-breadcrumb />
 
   <div class="dropdown-button ml-auto">
-    <p-button (click)="menu.toggle($event)">
-      {{ currentUser()?.fullName }}
-      <i class="pi pi-chevron-down"></i>
-    </p-button>
+    <p-button
+      icon="fas fa-chevron-down"
+      iconPos="right"
+      [label]="currentUser()?.fullName"
+      (click)="menu.toggle($event)"
+    ></p-button>
 
     <p-menu appendTo="body" #menu [model]="items" popup>
       <ng-template #item let-item>

src/app/core/components/index.ts

@@ -2,5 +2,4 @@ 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,51 +1,58 @@
-<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"
-        [class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
-        (click)="goToLink(item)"
-      >
-        @if (item.icon) {
-          <i [class]="item.icon" class="nav-icon"></i>
-        }
-        <span>{{ item.label | translate }}</span>
-        @if (item.items) {
-          <i [class]="item.expanded ? 'osf-icon-arrow-down' : 'osf-icon-arrow'" class="nav-icon ml-auto pt-1"></i>
-        }
-      </a>
+<aside class="custom-scrollbar flex flex-column p-4 h-full">
+  <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
 
-      @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"
-                (click)="goToLink(item)"
-              >
-                @if (item.icon) {
-                  <i [class]="item.icon" class="nav-icon"></i>
-                }
-                <span>{{ item.label | translate }}</span>
-                @if (item.items) {
-                  <i
-                    [class]="item.expanded ? 'osf-icon-arrow-down' : 'osf-icon-arrow'"
-                    class="nav-icon ml-auto pt-1"
-                  ></i>
-                }
-              </a>
-            </ng-template>
-          </p-panelMenu>
-        </div>
-      }
-    </ng-template>
-  </p-panelMenu>
-</nav>
+  <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>
+        }
+      </ng-template>
+    </p-panelMenu>
+  </nav>
+</aside>

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

@@ -1,14 +1,15 @@
 @use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
 
 :host {
   .nav-menu {
-    width: 100%;
-    max-width: 17rem;
+    width: 250px;
+    max-width: 250px;
 
     .active {
-      font-weight: 700;
       background-color: var.$dark-blue-2;
-      border-radius: 0.5rem;
+      border-radius: mix.rem(8px);
+      font-weight: 700;
     }
   }
 }

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

@@ -5,16 +5,18 @@ 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';
 
 import { NAV_ITEMS, PROJECT_MENU_ITEMS } from '@core/constants/nav-items.constant';
+import { IconComponent } from '@osf/shared/components';
 import { NavItem } from '@osf/shared/models';
 
 @Component({
   selector: 'osf-nav-menu',
-  imports: [RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe],
+  imports: [NgOptimizedImage, 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-sidenav></osf-sidenav>
+    <osf-nav-menu></osf-nav-menu>
 
     <div class="content-wrapper">
       <osf-header></osf-header>

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

@@ -10,8 +10,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
 import { FooterComponent } from '@core/components/footer/footer.component';
 import { HeaderComponent } from '@core/components/header/header.component';
-import { MainContentComponent } from '@core/components/main-content/main-content.component';
-import { SidenavComponent } from '@core/components/sidenav/sidenav.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
 import { IS_WEB, IS_XSMALL } from '@osf/shared/utils/breakpoints.tokens';
 
@@ -30,15 +28,7 @@ describe('RootComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         RootComponent,
-        ...MockComponents(
-          SidenavComponent,
-          HeaderComponent,
-          MainContentComponent,
-          FooterComponent,
-          TopnavComponent,
-          ConfirmDialog,
-          BreadcrumbComponent
-        ),
+        ...MockComponents(HeaderComponent, FooterComponent, TopnavComponent, ConfirmDialog, BreadcrumbComponent),
       ],
       providers: [
         MockProvider(IS_WEB, isWebSubject),

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

@@ -8,21 +8,22 @@ import { RouterOutlet } from '@angular/router';
 import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
 import { FooterComponent } from '@core/components/footer/footer.component';
 import { HeaderComponent } from '@core/components/header/header.component';
-import { SidenavComponent } from '@core/components/sidenav/sidenav.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';
+
 @Component({
   selector: 'osf-root',
   imports: [
     CommonModule,
-    SidenavComponent,
     HeaderComponent,
     FooterComponent,
     TopnavComponent,
     ConfirmDialog,
     BreadcrumbComponent,
     RouterOutlet,
+    NavMenuComponent,
   ],
   templateUrl: './root.component.html',
   styleUrls: ['./root.component.scss'],

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

@@ -1,5 +1,6 @@
-<section class="nav-container">
+<section class="nav-container flex align-items-center justify-content-between">
   <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
+
   <p-drawer
     [modal]="true"
     [visible]="isDrawerVisible()"
@@ -8,7 +9,12 @@
   >
     <osf-nav-menu (closeMenu)="toggleMenuVisibility()" />
   </p-drawer>
-  <p-button class="topnav-btn" severity="contrast" (onClick)="toggleMenuVisibility()">
-    <i [class]="!isDrawerVisible() ? 'osf-icon-menu' : 'osf-icon-close'" class="topnav-icon"></i>
+
+  <p-button
+    class="topnav-btn flex"
+    [icon]="isDrawerVisible() ? 'fas fa-close fa-2xl' : 'fas fa-bars fa-2xl'"
+    severity="contrast"
+    (onClick)="toggleMenuVisibility()"
+  >
   </p-button>
 </section>

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

@@ -5,13 +5,13 @@
   z-index: 1300;
 
   .nav-container {
-    @include mix.flex-center-between;
     background: var.$dark-blue-1;
-    padding: 1.8rem 1.6rem;
+    padding: mix.rem(28px) mix.rem(24px);
     color: var.$white;
 
-    .topnav-icon {
-      font-size: 2.1rem;
+    .topnav-btn {
+      height: mix.rem(36px);
+      width: mix.rem(36px);
     }
   }
 }