Feat/105 - Add mobile styles

src/app/app.config.ts

@@ -5,7 +5,7 @@ import { provideStore } from '@ngxs/store';
 import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';
 import { providePrimeNG } from 'primeng/config';
 import Aura from '@primeng/themes/aura';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
@@ -24,7 +24,7 @@ export const appConfig: ApplicationConfig = {
         },
       },
     }),
-    provideNoopAnimations(),
+    provideAnimations(),
     provideHttpClient(),
   ],
 };

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

@@ -1,4 +1,4 @@
-<footer>
+<footer [class.portrait]="isPortrait()" [class.mobile]="isXSmall()">
   <div class="footer-content">
     <div class="footer-nav">
       <div class="footer-links">

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

@@ -17,6 +17,7 @@
 
       a {
         color: var.$dark-blue-1;
+        text-align: center;
       }
     }
 
@@ -55,6 +56,51 @@
 
     .footer-copyright {
       @include mix.flex-center;
+      text-align: center;
+    }
+  }
+
+  .portrait {
+    .footer-nav {
+      flex-direction: column-reverse;
+      gap: 1.5rem;
+      height: auto;
+      padding: 2.5rem;
+
+      .footer-links {
+        justify-content: space-evenly;
+        width: 100%;
+
+        .separator {
+          margin: 0.1rem;
+        }
+      }
+    }
+
+    .footer-secondary-nav {
+      padding: 0.5rem 2.5rem;
+    }
+  }
+
+  .mobile {
+    .footer-nav {
+      .footer-links {
+        justify-content: center;
+        gap: 0.3rem;
+        flex-wrap: wrap;
+      }
+    }
+
+    .footer-secondary-nav {
+      flex-direction: column;
+      gap: 1rem;
+      height: auto;
+      padding: 1rem;
+
+      .footer-links {
+        row-gap: 1rem;
+        flex-wrap: wrap;
+      }
     }
   }
 }

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

@@ -1,6 +1,8 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { SocialIcon } from '@osf/shared/entities/social-icon.interface';
 import { RouterLink } from '@angular/router';
+import { IS_PORTRAIT, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   standalone: true,
@@ -11,6 +13,11 @@ import { RouterLink } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
+  #isPortrait$ = inject(IS_PORTRAIT);
+  #isXSmall$ = inject(IS_XSMALL);
+  isPortrait = toSignal(this.#isPortrait$);
+  isXSmall = toSignal(this.#isXSmall$);
+
   protected readonly socialIcons: SocialIcon[] = [
     {
       name: 'twitter',

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

@@ -0,0 +1,19 @@
+<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>
+</nav>

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

@@ -0,0 +1,27 @@
+@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;
+      }
+
+      .active {
+        font-weight: 700;
+        background-color: var.$dark-blue-2;
+        border-radius: 0.5rem;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { NAV_ITEMS } from '@osf/core/helpers/nav-items.constant';
+
+@Component({
+  selector: 'osf-nav-menu',
+  imports: [RouterLinkActive, RouterLink],
+  templateUrl: './nav-menu.component.html',
+  styleUrl: './nav-menu.component.scss',
+})
+export class NavMenuComponent {
+  navItems = NAV_ITEMS;
+}

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

@@ -1,39 +1,47 @@
 @use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
 
-.layout-desktop {
-  display: flex;
+:host {
   height: 100vh;
-  background-color: #24384a;
+  display: flex;
 
-  .content-wrapper {
+  .layout-desktop {
+    display: flex;
     flex: 1;
-    overflow-y: auto;
-    margin: 6px;
-    background-color: white;
-    border-radius: 1rem;
+    background-color: var.$dark-blue-1;
 
-    .content {
-      @include mix.flex-column;
-      min-height: 100%;
-      position: relative;
+    .content-wrapper {
+      flex: 1;
+      overflow-y: auto;
+      margin: 6px;
+      background-color: white;
+      border-radius: 1rem;
+
+      .content {
+        @include mix.flex-column;
+        min-height: 100%;
+        position: relative;
+      }
     }
   }
-}
-
-.layout-tablet {
-  @include mix.flex-center;
-  height: 100vh;
 
-  .content-wrapper {
+  .layout-tablet {
+    @include mix.flex-center;
     flex: 1;
-    overflow-y: auto;
-    @include mix.flex-column;
-    width: 100%;
 
-    .content {
-      position: relative;
+    .content-wrapper {
       @include mix.flex-column;
+      width: 100%;
+      height: 100%;
       flex: 1;
+      background-color: white;
+      overflow-y: auto;
+
+      .content {
+        position: relative;
+        @include mix.flex-column;
+        flex: 1;
+      }
     }
   }
 }

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

@@ -1,20 +1,2 @@
 <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
-<nav class="sidebar-nav">
-  <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>
-</nav>
+<osf-nav-menu />

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

@@ -1,33 +1,8 @@
 @use "assets/styles/mixins" as mix;
-@use "assets/styles/variables" as var;
 
 :host {
   @include mix.flex-column;
+  gap: 1.8rem;
   width: 19rem;
-  padding: 1.5rem;
-
-  .sidebar-nav {
-    margin-top: 2rem;
-    width: 100%;
-
-    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;
-      }
-
-      .active {
-        font-weight: 700;
-        background-color: var.$dark-blue-2;
-        border-radius: 0.5rem;
-      }
-    }
-  }
+  padding: 1.8rem;
 }

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

@@ -1,29 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
 import { NgOptimizedImage } from '@angular/common';
-import { NavItem } from '@osf/shared/entities/nav-item.interface';
+import { NavMenuComponent } from '@core/components/nav-menu/nav-menu.component';
 
 @Component({
   standalone: true,
   selector: 'osf-sidenav',
-  imports: [RouterLink, RouterLinkActive, NgOptimizedImage],
+  imports: [NgOptimizedImage, NavMenuComponent],
   templateUrl: './sidenav.component.html',
   styleUrl: './sidenav.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SidenavComponent {
-  protected readonly navItems: NavItem[] = [
-    { path: '/home', label: 'Home', icon: 'home' },
-    { path: '', label: 'Search OSF', icon: 'search' },
-    {
-      path: '/support',
-      label: 'Support',
-      icon: 'support',
-    },
-    {
-      path: '/donate',
-      label: 'Donate',
-      icon: 'donate',
-    },
-  ];
-}
+export class SidenavComponent {}

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

@@ -1 +1,21 @@
-<p>OSF</p>
+<section class="nav-container">
+  <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
+  <p-drawer
+    [modal]="true"
+    [visible]="isDrawerVisible()"
+    (visibleChange)="isDrawerVisible.set($event)"
+    [closable]="false"
+  >
+    <osf-nav-menu />
+  </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>
+</section>

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

@@ -1,7 +1,17 @@
 @use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
 
 :host {
-  background: var.$dark-blue-1;
-  height: 96px;
-  color: white;
+  z-index: 2000;
+
+  .nav-container {
+    @include mix.flex-center-between;
+    background: var.$dark-blue-1;
+    padding: 1.8rem;
+    color: white;
+
+    .topnav-icon {
+      font-size: 2.1rem;
+    }
+  }
 }