Feat/90 - Addons Settings

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

@@ -1,19 +1,24 @@
 <nav class="nav-menu">
-  <ul>
-    @for (item of navItems; track item.path) {
-      <li class="nav-item">
-        <a
-          class="nav-link"
-          [routerLink]="item.path"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{ exact: true }"
-        >
-          @if (item.icon) {
-            <i [class]="'osf-icon-' + item.icon"></i>
-          }
-          <span>{{ item.label }}</span>
-        </a>
-      </li>
-    }
-  </ul>
+  <p-panelMenu [model]="menuItems" [multiple]="false">
+    <ng-template #item let-item>
+      <a
+        [routerLink]="item.routerLink"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: item.useExactMatch }"
+        class="nav-link flex"
+        [class.mt-5]="item.label === 'Settings'"
+      >
+        @if (item.icon) {
+          <i [class]="item.icon" class="nav-icon"></i>
+        }
+        <span>{{ item.label }}</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>
 </nav>

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

@@ -1,27 +1,14 @@
 @use "assets/styles/variables" as var;
+
 :host {
   .nav-menu {
     width: 100%;
-    max-width: 15rem;
-
-    ul {
-      .nav-link {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        padding-left: 1rem;
-        width: 100%;
-        height: 3.4rem;
-        gap: 0.5rem;
-        color: var.$white;
-        text-decoration: none;
-      }
+    max-width: 15.5rem;
 
-      .active {
-        font-weight: 700;
-        background-color: var.$dark-blue-2;
-        border-radius: 0.5rem;
-      }
+    .active {
+      font-weight: 700;
+      background-color: var.$dark-blue-2;
+      border-radius: 0.5rem;
     }
   }
 }

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

@@ -1,13 +1,29 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { NAV_ITEMS } from '@osf/core/helpers/nav-items.constant';
+import { PanelMenuModule } from 'primeng/panelmenu';
+import { MenuItem } from 'primeng/api';
 
 @Component({
   selector: 'osf-nav-menu',
-  imports: [RouterLinkActive, RouterLink],
+  imports: [RouterLinkActive, RouterLink, PanelMenuModule],
   templateUrl: './nav-menu.component.html',
   styleUrl: './nav-menu.component.scss',
 })
 export class NavMenuComponent {
   navItems = NAV_ITEMS;
+
+  private convertToMenuItem(item: (typeof NAV_ITEMS)[number]): MenuItem {
+    return {
+      label: item.label,
+      icon: item.icon ? `osf-icon-${item.icon}` : '',
+      expanded: false,
+      routerLink: item.isCollapsible ? undefined : item.path,
+      items: item.items?.map((subItem) => this.convertToMenuItem(subItem)),
+    };
+  }
+
+  protected menuItems: MenuItem[] = this.navItems.map((item) =>
+    this.convertToMenuItem(item),
+  );
 }

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

@@ -1,2 +1,4 @@
-<img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
-<osf-nav-menu />
+<aside>
+  <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
+  <osf-nav-menu />
+</aside>

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

@@ -1,6 +1,6 @@
 @use "assets/styles/mixins" as mix;
 
-:host {
+aside {
   @include mix.flex-column;
   gap: 1.8rem;
   width: 19rem;

src/app/core/helpers/nav-items.constant.ts

@@ -1,16 +1,57 @@
 import { NavItem } from '@osf/shared/entities/nav-item.interface';
 
 export const NAV_ITEMS: NavItem[] = [
-  { path: '/home', label: 'Home', icon: 'home' },
-  { path: '', label: 'Search OSF', icon: 'search' },
+  { path: '/home', label: 'Home', icon: 'home', useExactMatch: true },
+  { path: '/search', label: 'Search OSF', icon: 'search', useExactMatch: true },
   {
     path: '/support',
     label: 'Support',
     icon: 'support',
+    useExactMatch: true,
+  },
+  {
+    path: '/settings',
+    label: 'Settings',
+    icon: 'settings',
+    isCollapsible: true,
+    useExactMatch: true,
+    items: [
+      {
+        path: '/settings/profile-settings',
+        label: 'Profile Settings',
+        useExactMatch: true,
+      },
+      {
+        path: '/settings/account-settings',
+        label: 'Account Settings',
+        useExactMatch: true,
+      },
+      {
+        path: '/settings/addons',
+        label: 'Addon Accounts',
+        useExactMatch: false,
+      },
+      {
+        path: '/settings/notifications',
+        label: 'Notifications',
+        useExactMatch: true,
+      },
+      {
+        path: '/settings/developer-apps',
+        label: 'Developer Apps',
+        useExactMatch: true,
+      },
+      {
+        path: '/settings/personal-access-tokens',
+        label: 'Personal Access Tokens',
+        useExactMatch: true,
+      },
+    ],
   },
   {
     path: '/donate',
     label: 'Donate',
     icon: 'donate',
+    useExactMatch: true,
   },
 ];

src/app/features/auth/sign-up/sign-up.component.scss

@@ -12,7 +12,7 @@
     @include mix.flex-column;
     color: var.$dark-blue-1;
     width: 32rem;
-    margin: 4.5rem 0 2rem 0;
+    margin: 4.5rem 0 1.5rem 0;
     padding: 2rem;
     background: white;
     border-radius: 0.6rem;
@@ -89,7 +89,7 @@
   }
 
   .message-container {
-    margin-top: auto;
+    margin: auto;
   }
 
   .mobile {

src/app/features/home/home.component.html

@@ -27,17 +27,14 @@
       <a routerLink="/search">search</a> OSF
     </p>
 
-    <div class="input-search">
-      <i class="osf-icon-search"></i>
-      <input
-        type="text"
-        placeholder="Search"
-        pInputText
-        [(ngModel)]="searchValue"
-      />
-    </div>
+    <osf-search-input
+      [searchValue]="searchValue()"
+      (searchValueChange)="searchValue.set($event)"
+      placeholder="Search your projects"
+    />
 
     <p-table
+      class="home-table"
       [value]="filteredProjects()"
       [rows]="5"
       [rowsPerPageOptions]="[2, 5, 10]"

src/app/features/home/home.component.scss

@@ -6,7 +6,6 @@
 
   .home-container {
     margin-top: 4.5rem;
-    //width: 100%;
     max-width: 100%;
   }
 
@@ -29,29 +28,9 @@
     }
   }
 
-  .dashboard-header {
-    display: flex;
-    justify-content: start;
-    width: 100%;
-    padding: 7.14rem 1.71rem 3.43rem 1.71rem;
-    background: var.$gradient-1;
-
-    .dashboard-title {
-      font-size: 1.71rem;
-      color: var.$dark-blue-1;
-      font-weight: 700;
-      margin-left: 0.86rem;
-    }
-
-    p-button {
-      margin-left: auto;
-    }
-  }
-
   .quick-search-container {
     background: white;
     padding: 1.71rem;
-    //max-width: 100vw;
 
     .text-center {
       font-size: 1rem;
@@ -322,7 +301,8 @@
       }
     }
 
-    .latest-research-container {
+    .latest-research-container,
+    .hosting-container {
       display: flex;
       padding: 4rem 1.14rem 4rem 1.14rem;
 
@@ -349,28 +329,7 @@
     }
 
     .hosting-container {
-      display: flex;
-      padding: 4rem 1.14rem 4rem 1.14rem;
-
-      .content {
-        display: flex;
-        flex-direction: column;
-        row-gap: 2rem;
-
-        .text-container {
-          display: flex;
-          flex-direction: column;
-          row-gap: 0.85rem;
-
-          h2 {
-            font-weight: 400;
-            font-size: 1rem;
-          }
-        }
-      }
-
       p-button {
-        margin: 0;
         align-self: start;
       }
     }

src/app/features/home/home.component.ts

@@ -1,12 +1,11 @@
 import { Component, computed, inject, signal } from '@angular/core';
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
 import { TableModule } from 'primeng/table';
 import { Project } from '@osf/features/home/models/project.entity';
 import { DatePipe } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { Button } from 'primeng/button';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
+import { SearchInputComponent } from '@shared/components/search-input/search-input.component';
 import { IS_MEDIUM, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { noteworthy, mostPopular, projects } from '@osf/features/home/data';
@@ -15,13 +14,12 @@ import { noteworthy, mostPopular, projects } from '@osf/features/home/data';
   selector: 'osf-home',
   standalone: true,
   imports: [
-    InputTextModule,
-    FormsModule,
     TableModule,
     DatePipe,
     RouterLink,
     Button,
     SubHeaderComponent,
+    SearchInputComponent,
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',

src/app/features/settings/addons/addon-card-list/addon-card-list.component.html

@@ -0,0 +1,9 @@
+<section class="grid">
+  @if (cards().length) {
+    @for (card of cards(); track card.title) {
+      <div class="col-6 lg:col-4">
+        <osf-addon-card [cardButtonLabel]="cardButtonLabel()" [card]="card" />
+      </div>
+    }
+  }
+</section>

src/app/features/settings/addons/addon-card-list/addon-card-list.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddonCardListComponent } from './addon-card-list.component';
+
+describe('AddonCardListComponent', () => {
+  let component: AddonCardListComponent;
+  let fixture: ComponentFixture<AddonCardListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddonCardListComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddonCardListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/settings/addons/addon-card-list/addon-card-list.component.ts

@@ -0,0 +1,14 @@
+import { Component, input } from '@angular/core';
+import { AddonCardComponent } from '@osf/features/settings/addons/addon-card/addon-card.component';
+import { AddonCard } from '@shared/entities/addon-card.interface';
+
+@Component({
+  selector: 'osf-addon-card-list',
+  imports: [AddonCardComponent],
+  templateUrl: './addon-card-list.component.html',
+  styleUrl: './addon-card-list.component.scss',
+})
+export class AddonCardListComponent {
+  cards = input<AddonCard[]>([]);
+  cardButtonLabel = input<string>('');
+}

src/app/features/settings/addons/addon-card/addon-card.component.html

@@ -0,0 +1,20 @@
+<div
+  class="addon-card flex flex-1 justify-content-between flex-column"
+  [class.mobile]="isMobile()"
+>
+  <div class="max-h-8rem">
+    <img
+      alt="Addon card image"
+      [src]="'assets/images/temp/' + card()!.img + '.png'"
+    />
+  </div>
+
+  <div class="flex flex-column gap-3">
+    <h3>{{ card()?.title }}</h3>
+    <p-button
+      [label]="cardButtonLabel() || 'Connect'"
+      severity="secondary"
+      (onClick)="onConnect()"
+    ></p-button>
+  </div>
+</div>