From 1c17d2c284ddd7e20166aa08f9eba04d1070a679 Mon Sep 17 00:00:00 2001
From: Fran Palmero <sweetydesigns@gmail.com>
Date: Wed, 6 Nov 2024 09:54:32 +0100
Subject: [PATCH] Feature #438: Creation of Mobile Navigation Menu

- Nav Menu: Create Navigation Service shared for Desktop & Mobile Components.

- Navigation Service: Add initial Test.

- Navigation components: Update Tests.

- Refactor code.

- Update deprecated RouterTestingModule
---
 .../desktop-nav/desktop-nav.component.html    |  2 +-
 .../desktop-nav/desktop-nav.component.spec.ts | 94 ++++++++++++-------
 .../desktop-nav/desktop-nav.component.ts      | 30 ++----
 .../layout/header/header.component.spec.ts    |  3 +-
 .../mobile-nav/mobile-nav.component.html      | 64 +++++++++++--
 .../mobile-nav/mobile-nav.component.scss      | 56 ++++++++++-
 .../mobile-nav/mobile-nav.component.spec.ts   | 86 +++++++++++++----
 .../header/mobile-nav/mobile-nav.component.ts | 17 +++-
 .../layout/main-menu/main-menu.component.html | 38 ++------
 .../main-menu/main-menu.component.spec.ts     |  6 +-
 .../layout/main-menu/main-menu.component.ts   | 11 +--
 src/app/core/layout/main/main.component.html  |  2 -
 src/app/core/layout/main/main.component.scss  |  2 +-
 .../core/layout/main/main.component.spec.ts   |  8 +-
 .../challenge-info.component.scss             |  6 --
 .../components/starter/starter.component.scss |  2 +-
 src/app/services/nav.service.spec.ts          | 79 ++++++++++++++++
 src/app/services/nav.service.ts               | 27 ++++++
 18 files changed, 389 insertions(+), 144 deletions(-)
 create mode 100644 src/app/services/nav.service.spec.ts
 create mode 100644 src/app/services/nav.service.ts

diff --git a/src/app/core/layout/header/desktop-nav/desktop-nav.component.html b/src/app/core/layout/header/desktop-nav/desktop-nav.component.html
index d12e1a7e..9704d6a4 100644
--- a/src/app/core/layout/header/desktop-nav/desktop-nav.component.html
+++ b/src/app/core/layout/header/desktop-nav/desktop-nav.component.html
@@ -2,7 +2,7 @@
   <!-- languageSelect -->
   <div>
     <label for="languageSelect">
-      <select class="languageSelect" id="languageSelect" (change)="changeLanguage($event)" [style.width]="selectWidth">
+      <select class="languageSelect" (change)="changeLanguage($event)" [style.width]="navService.selectWidth">
         <option value="ca">CAT</option>
         <option value="es">ES</option>
         <option value="en">EN</option>
diff --git a/src/app/core/layout/header/desktop-nav/desktop-nav.component.spec.ts b/src/app/core/layout/header/desktop-nav/desktop-nav.component.spec.ts
index c22c47f3..d71d133f 100644
--- a/src/app/core/layout/header/desktop-nav/desktop-nav.component.spec.ts
+++ b/src/app/core/layout/header/desktop-nav/desktop-nav.component.spec.ts
@@ -1,53 +1,75 @@
-import { type ComponentFixture, TestBed } from '@angular/core/testing'
-import { DesktopNavComponent } from './desktop-nav.component'
-import { TranslateService } from '@ngx-translate/core'
-import { of } from 'rxjs'
-import { RouterModule } from '@angular/router'
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DesktopNavComponent } from './desktop-nav.component';
+import { NavService } from 'src/app/services/nav.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 
-describe('DesktopNavComponent', () => {
-  let component: DesktopNavComponent
-  let fixture: ComponentFixture<DesktopNavComponent>
-  let translateService: TranslateService
-  let translateServiceUseMock: jest.Mock
+// Mock de NavService
+class MockNavService {
+  public selectWidth = '69px';
 
-  beforeEach(() => {
-    translateServiceUseMock = jest.fn()
+  openLoginModal = jest.fn(); // Simula la función openLoginModal
+  changeLanguage = jest.fn((language: string) => {
+    this.selectWidth = language === 'ca' ? '69px' : '57px';
+  });
+}
 
-    const translateServiceStub = {
-      use: translateServiceUseMock,
-      addLangs: jest.fn(),
-      setDefaultLang: jest.fn(),
-      get: jest.fn().mockImplementation((key) => of(key))
+// Mock de ActivatedRoute para pruebas
+const mockActivatedRoute = {
+  snapshot: {
+    paramMap: {
+      get: jest.fn().mockReturnValue(null)
     }
+  }
+};
+
+describe('DesktopNavComponent', () => {
+  let component: DesktopNavComponent;
+  let fixture: ComponentFixture<DesktopNavComponent>;
+  let navService: MockNavService;
 
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [DesktopNavComponent],
-      imports: [RouterModule.forRoot([])], // Añade esta línea
+      imports: [TranslateModule.forRoot(), RouterModule.forRoot([])],
       providers: [
-        { provide: TranslateService, useValue: translateServiceStub }
+        { provide: NavService, useClass: MockNavService },
+        { provide: ActivatedRoute, useValue: mockActivatedRoute }
       ]
-    })
+    });
 
-    fixture = TestBed.createComponent(DesktopNavComponent)
-    component = fixture.componentInstance
-    translateService = TestBed.inject(TranslateService)
-    fixture.detectChanges()
-  })
+    fixture = TestBed.createComponent(DesktopNavComponent);
+    component = fixture.componentInstance;
+    navService = TestBed.inject(NavService) as unknown as MockNavService;
+    fixture.detectChanges();
+  });
 
   it('should create', () => {
-    expect(component).toBeTruthy()
-  })
+    expect(component).toBeTruthy();
+  });
+
+  it('should call openLoginModal when openLoginModal is invoked', () => {
+    component.openLoginModal();
+    expect(navService.openLoginModal).toHaveBeenCalled();
+  });
 
   it('should change language and update selectWidth', () => {
-    // Limpiar todas las llamadas a la función simulada
-    translateServiceUseMock.mockClear()
+    const event = new Event('change');
+    Object.defineProperty(event, 'target', { value: { value: 'es' }, enumerable: true });
+
+    component.changeLanguage(event);
+
+    expect(navService.changeLanguage).toHaveBeenCalledWith('es');
+    expect(navService.selectWidth).toBe('57px'); // Verifica que el selectWidth se actualiza correctamente
+  });
 
-    const event = new Event('change')
-    Object.defineProperty(event, 'target', { value: { value: 'es' }, enumerable: true })
+  it('should change language to "ca" and update selectWidth accordingly', () => {
+    const event = new Event('change');
+    Object.defineProperty(event, 'target', { value: { value: 'ca' }, enumerable: true });
 
-    component.changeLanguage(event)
+    component.changeLanguage(event);
 
-    expect(translateService.use).toHaveBeenCalledWith('es')
-    expect(component.selectWidth).toBe('57px')
-  })
-})
+    expect(navService.changeLanguage).toHaveBeenCalledWith('ca');
+    expect(navService.selectWidth).toBe('69px'); // Verifica que el selectWidth se actualiza correctamente
+  });
+});
diff --git a/src/app/core/layout/header/desktop-nav/desktop-nav.component.ts b/src/app/core/layout/header/desktop-nav/desktop-nav.component.ts
index 07af56a8..247783f3 100644
--- a/src/app/core/layout/header/desktop-nav/desktop-nav.component.ts
+++ b/src/app/core/layout/header/desktop-nav/desktop-nav.component.ts
@@ -1,7 +1,5 @@
-import { Component, inject } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { LoginModalComponent } from './../../../../modules/modals/login-modal/login-modal.component'
-import { TranslateService } from '@ngx-translate/core'
+import { Component } from '@angular/core';
+import { NavService } from 'src/app/services/nav.service';
 
 @Component({
   selector: 'app-desktop-nav',
@@ -9,23 +7,15 @@ import { TranslateService } from '@ngx-translate/core'
   styleUrl: './desktop-nav.component.scss'
 })
 export class DesktopNavComponent {
-  selectWidth = '69px'
-  private readonly modalService = inject(NgbModal)
-  private readonly translate = inject(TranslateService)
-  constructor () {
-    this.translate.addLangs(['en', 'es', 'ca'])
-    this.translate.setDefaultLang('ca')
-    this.translate.use('ca')
-  }
+  constructor(public navService: NavService) {}
 
-  openLoginModal (): void {
-    this.modalService.open(LoginModalComponent, { centered: true, size: 'lg' })
+  openLoginModal(): void {
+    this.navService.openLoginModal();
   }
 
-  changeLanguage (event: Event): void {
-    const selectElement = event.target as HTMLSelectElement
-    const language = selectElement.value
-    this.translate.use(language)
-    this.selectWidth = language === 'ca' ? '69px' : '57px'
+  changeLanguage(event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    const language = selectElement.value;
+    this.navService.changeLanguage(language);
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/core/layout/header/header.component.spec.ts b/src/app/core/layout/header/header.component.spec.ts
index c9082514..59cdbdd1 100755
--- a/src/app/core/layout/header/header.component.spec.ts
+++ b/src/app/core/layout/header/header.component.spec.ts
@@ -3,6 +3,7 @@ import { RouterTestingModule } from '@angular/router/testing'
 import { HeaderComponent } from './header.component'
 import { I18nModule } from '../../../../assets/i18n/i18n.module'
 import { MobileNavComponent } from './mobile-nav/mobile-nav.component'
+import { DesktopNavComponent } from './desktop-nav/desktop-nav.component'
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent
@@ -10,7 +11,7 @@ describe('HeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [HeaderComponent, MobileNavComponent],
+      declarations: [HeaderComponent, MobileNavComponent, DesktopNavComponent],
       imports: [
         RouterTestingModule,
         I18nModule
diff --git a/src/app/core/layout/header/mobile-nav/mobile-nav.component.html b/src/app/core/layout/header/mobile-nav/mobile-nav.component.html
index a7421d78..9c564118 100755
--- a/src/app/core/layout/header/mobile-nav/mobile-nav.component.html
+++ b/src/app/core/layout/header/mobile-nav/mobile-nav.component.html
@@ -1,15 +1,61 @@
-<nav class="navbar navbar-expand-lg align-items-center">
-  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
-    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
+<div class="collapse" id="navbarToggle" data-bs-theme="dark">
+  <!-- Main menu -->
+  <div class="navbarToggle bg-black p-4">
+    <ul class="nav-ul">
+      <a class="nav-link" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">{{
+        "components.mainMenu.section0.title" | translate }}</a>
+
+      <a class="nav-link" [routerLink]="['challenges']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">{{
+        "components.mainMenu.section1.title" | translate }}</a>
+
+      <a class="nav-link" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">{{
+        "components.mainMenu.section2.title" | translate }}</a>
+
+      <a class="nav-link" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">Hackathons</a>
+
+      <a class="nav-link" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">{{
+        "components.mainMenu.section4.title" | translate }}</a>
 
-  <!--No desenvolupo perquè a Figma encara no hi ha disseny d'aquesta part-->
-  <div class="collapse navbar-collapse" id="navbarNavDropdown">
-    <ul class="navbar-nav">
-      <li class="nav-link">item menu</li>
+      <a class="nav-link" href="https://dev.itawiki.eurecatacademy.org/" target="_blank" rel="noopener">{{
+        "components.mainMenu.section5.title" | translate }}</a>
     </ul>
+
+    <div class="d-flex justify-content-end">
+      <!-- languageSelect -->
+      <div class="ms-2 pe-3">
+        <label for="languageSelect">
+          <select class="languageSelect" (change)="changeLanguage($event)" [style.width]="navService.selectWidth">
+            <option value="ca">CAT</option>
+            <option value="es">ES</option>
+            <option value="en">EN</option>
+          </select>
+        </label>
+      </div>
+
+      <!-- Settings -->
+      <div class="pe-3">
+        <a class="setting" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']">
+          <img src="assets/img/icon/setting.svg" alt="Settings" />
+        </a>
+      </div>
+
+      <!-- User -->
+      <div>
+        <button class="user" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
+          (click)="openLoginModal()">
+          <img src="assets/img/icon/user.svg" alt="User" />
+        </button>
+      </div>
+    </div>
   </div>
+</div>
+
+<nav class="navbar navbar-expand-md align-items-center">
+  
+  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle"
+    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
   <span class="breadcrumb">{{ "modules.starter.main.section2.title" | translate }}</span>
  </nav>
diff --git a/src/app/core/layout/header/mobile-nav/mobile-nav.component.scss b/src/app/core/layout/header/mobile-nav/mobile-nav.component.scss
index 6357d077..b076c635 100755
--- a/src/app/core/layout/header/mobile-nav/mobile-nav.component.scss
+++ b/src/app/core/layout/header/mobile-nav/mobile-nav.component.scss
@@ -1,10 +1,10 @@
+@import "/src/styles/colors";
+
 nav{
     display: none;
     position:fixed;
     top: 0;
     width: 100%;
-    left:50%;
-    transform: translate(-50%, 0%);
     height: 42px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
@@ -44,6 +44,58 @@ $navbar-toggler-transition: none;
 
 }
 
+#navbarToggle {
+    margin-top: -7px;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    position: fixed;
+    width: 100%;
+}
+
+.navbarToggle {
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+.nav-link {
+    color: white;
+    margin: 20px 0 20px 7px;
+}
+
+.nav-ul {
+    padding-left: 0px;
+}
+
+.languageSelect {
+    font-size: 1rem;
+    border: none;
+    border-radius: 0.625rem;
+    font-weight: 500;
+    background-color: $white;
+    padding-left: 8px;
+    color: $gray-6;
+    height: 41px;
+    transition: transform 0.3s ease 0s;
+}
+
+.user {
+    border: unset;
+    width: 48px;
+    height: 41px;
+    background: $white;
+    border-radius: 10px;
+}
+
+.setting {
+    width: 48px;
+    height: 41px;
+    background: $white;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 @media screen and (max-width: 768px) {
     nav {
         display: flex;
diff --git a/src/app/core/layout/header/mobile-nav/mobile-nav.component.spec.ts b/src/app/core/layout/header/mobile-nav/mobile-nav.component.spec.ts
index 2d516396..2dd1e7bc 100755
--- a/src/app/core/layout/header/mobile-nav/mobile-nav.component.spec.ts
+++ b/src/app/core/layout/header/mobile-nav/mobile-nav.component.spec.ts
@@ -1,27 +1,75 @@
-import { type ComponentFixture, TestBed } from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MobileNavComponent } from './mobile-nav.component';
+import { NavService } from 'src/app/services/nav.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 
-import { MobileNavComponent } from './mobile-nav.component'
-import { TranslateModule } from '@ngx-translate/core'
+// Mock de NavService
+class MockNavService {
+  public selectWidth = '69px';
+
+  openLoginModal = jest.fn(); // Simula la función openLoginModal
+  changeLanguage = jest.fn((language: string) => {
+    this.selectWidth = language === 'ca' ? '69px' : '57px';
+  });
+}
+
+// Mock de ActivatedRoute para pruebas
+const mockActivatedRoute = {
+  snapshot: {
+    paramMap: {
+      get: jest.fn().mockReturnValue(null)
+    }
+  }
+};
 
 describe('MobileNavComponent', () => {
-  let component: MobileNavComponent
-  let fixture: ComponentFixture<MobileNavComponent>
+  let component: MobileNavComponent;
+  let fixture: ComponentFixture<MobileNavComponent>;
+  let navService: MockNavService;
 
-  beforeEach((async () => {
-    await TestBed.configureTestingModule({
+  beforeEach(() => {
+    TestBed.configureTestingModule({
       declarations: [MobileNavComponent],
-      imports: [TranslateModule.forRoot()]
-    })
-      .compileComponents()
-  }))
+      imports: [TranslateModule.forRoot(), RouterModule.forRoot([])],
+      providers: [
+        { provide: NavService, useClass: MockNavService },
+        { provide: ActivatedRoute, useValue: mockActivatedRoute }
+      ]
+    });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MobileNavComponent)
-    component = fixture.componentInstance
-    fixture.detectChanges()
-  })
+    fixture = TestBed.createComponent(MobileNavComponent);
+    component = fixture.componentInstance;
+    navService = TestBed.inject(NavService) as unknown as MockNavService;
+    fixture.detectChanges();
+  });
 
   it('should create', () => {
-    expect(component).toBeTruthy()
-  })
-})
+    expect(component).toBeTruthy();
+  });
+
+  it('should call openLoginModal when openLoginModal is invoked', () => {
+    component.openLoginModal();
+    expect(navService.openLoginModal).toHaveBeenCalled();
+  });
+
+  it('should change language and update selectWidth', () => {
+    const event = new Event('change');
+    Object.defineProperty(event, 'target', { value: { value: 'es' }, enumerable: true });
+
+    component.changeLanguage(event);
+
+    expect(navService.changeLanguage).toHaveBeenCalledWith('es');
+    expect(navService.selectWidth).toBe('57px'); // Verifica que el selectWidth se actualiza correctamente
+  });
+
+  it('should change language to "ca" and update selectWidth accordingly', () => {
+    const event = new Event('change');
+    Object.defineProperty(event, 'target', { value: { value: 'ca' }, enumerable: true });
+
+    component.changeLanguage(event);
+
+    expect(navService.changeLanguage).toHaveBeenCalledWith('ca');
+    expect(navService.selectWidth).toBe('69px'); // Verifica que el selectWidth se actualiza correctamente
+  });
+});
diff --git a/src/app/core/layout/header/mobile-nav/mobile-nav.component.ts b/src/app/core/layout/header/mobile-nav/mobile-nav.component.ts
index 10750f86..10843f23 100755
--- a/src/app/core/layout/header/mobile-nav/mobile-nav.component.ts
+++ b/src/app/core/layout/header/mobile-nav/mobile-nav.component.ts
@@ -1,10 +1,21 @@
-import { Component } from '@angular/core'
+import { Component } from '@angular/core';
+import { NavService } from 'src/app/services/nav.service';
 
 @Component({
   selector: 'app-mobile-nav',
   templateUrl: './mobile-nav.component.html',
-  styleUrls: ['./mobile-nav.component.scss']
+  styleUrl: './mobile-nav.component.scss'
 })
 export class MobileNavComponent {
+  constructor(public navService: NavService) {}
 
-}
+  openLoginModal(): void {
+    this.navService.openLoginModal();
+  }
+
+  changeLanguage(event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    const language = selectElement.value;
+    this.navService.changeLanguage(language);
+  }
+}
\ No newline at end of file
diff --git a/src/app/core/layout/main-menu/main-menu.component.html b/src/app/core/layout/main-menu/main-menu.component.html
index 6d6673a5..70d58210 100755
--- a/src/app/core/layout/main-menu/main-menu.component.html
+++ b/src/app/core/layout/main-menu/main-menu.component.html
@@ -1,40 +1,22 @@
 <nav class="main-menu d-flex flex-column justify-content-between">
   <div id="main-options">
 
-    <a [routerLink]="['componentToBuild']" [routerLinkActive]="['active']">Inicio</a>
+    <a [routerLink]="['componentToBuild']" [routerLinkActive]="['active']">{{
+      "components.mainMenu.section0.title" | translate }}</a>
 
     <a [routerLink]="['challenges']" [routerLinkActive]="['active']">{{
-      "components.mainMenu.section1.title" | translate
-      }}</a>
+      "components.mainMenu.section1.title" | translate }}</a>
+
     <a [routerLink]="['componentToBuild']" [routerLinkActive]="['active']">{{
-      "components.mainMenu.section2.title" | translate
-      }}</a>
+      "components.mainMenu.section2.title" | translate }}</a>
+
     <a [routerLink]="['componentToBuild']" [routerLinkActive]="['active']">Hackathons</a>
+
     <a [routerLink]="['componentToBuild']" [routerLinkActive]="['active']">{{
-      "components.mainMenu.section4.title" | translate
-      }}</a>
-    <a href="https://dev.itawiki.eurecatacademy.org/">{{
-      "components.mainMenu.section5.title" | translate
-      }}</a>
+      "components.mainMenu.section4.title" | translate }}</a>
 
+    <a href="https://dev.itawiki.eurecatacademy.org/">{{
+      "components.mainMenu.section5.title" | translate }}</a>
 
-    <!-- settings funciona -->
-    <!-- <div class="userOptions  d-none d-md-flex flex-column justify-content-center">
-      <a class="mb-2" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']">
-        <img src="assets/img/icon/setting.svg" alt="Settings" />
-        {{ "components.mainMenu.section6.title" | translate }}
-      </a>
-      <a [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }" (click)="openLoginModal()">
-        <img src="assets/img/icon/user.svg" alt="User" />
-        {{ "components.mainMenu.section7.title" | translate }}
-      </a>
-    </div> -->
   </div>
-  <!-- <div id="user-options">
-    <section id="languages">
-      <button (click)="changeLanguage('es')">ES</button>
-      <button id="middleBtn" (click)="changeLanguage('ca')">CAT</button>
-      <button (click)="changeLanguage('en')">EN</button>
-    </section>
-  </div> -->
 </nav>
\ No newline at end of file
diff --git a/src/app/core/layout/main-menu/main-menu.component.spec.ts b/src/app/core/layout/main-menu/main-menu.component.spec.ts
index 449ad4f0..f850370b 100755
--- a/src/app/core/layout/main-menu/main-menu.component.spec.ts
+++ b/src/app/core/layout/main-menu/main-menu.component.spec.ts
@@ -1,9 +1,9 @@
 import { type ComponentFixture, TestBed } from '@angular/core/testing'
-
 import { MainMenuComponent } from './main-menu.component'
 import { RouterTestingModule } from '@angular/router/testing'
-import { I18nModule } from '../../../../assets/i18n/i18n.module'
+import { I18nModule } from 'src/assets/i18n/i18n.module'
 import { MobileNavComponent } from '../header/mobile-nav/mobile-nav.component'
+import { DesktopNavComponent } from '../header/desktop-nav/desktop-nav.component'
 
 describe('MainMenuComponent', () => {
   let component: MainMenuComponent
@@ -11,7 +11,7 @@ describe('MainMenuComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MainMenuComponent, MobileNavComponent],
+      declarations: [MainMenuComponent, MobileNavComponent, DesktopNavComponent],
       imports: [
         RouterTestingModule,
         I18nModule
diff --git a/src/app/core/layout/main-menu/main-menu.component.ts b/src/app/core/layout/main-menu/main-menu.component.ts
index bbf05d08..7fb01ad3 100755
--- a/src/app/core/layout/main-menu/main-menu.component.ts
+++ b/src/app/core/layout/main-menu/main-menu.component.ts
@@ -1,15 +1,12 @@
 import { Component, inject } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { LoginModalComponent } from './../../../modules/modals/login-modal/login-modal.component'
 import { TranslateService } from '@ngx-translate/core'
 
 @Component({
-  selector: '   app-main-menu',
+  selector: 'app-main-menu',
   templateUrl: './main-menu.component.html',
-  styleUrls: ['./main-menu.component.scss']
+  styleUrl: './main-menu.component.scss'
 })
 export class MainMenuComponent {
-  private readonly modalService = inject(NgbModal)
   private readonly translate = inject(TranslateService)
   constructor () {
     this.translate.addLangs(['en', 'es', 'ca'])
@@ -17,10 +14,6 @@ export class MainMenuComponent {
     this.translate.use('ca')
   }
 
-  openLoginModal (): void {
-    this.modalService.open(LoginModalComponent, { centered: true, size: 'lg' })
-  }
-
   changeLanguage (language: string): void {
     this.translate.use(language)
   }
diff --git a/src/app/core/layout/main/main.component.html b/src/app/core/layout/main/main.component.html
index ba01aa2d..013e9c91 100755
--- a/src/app/core/layout/main/main.component.html
+++ b/src/app/core/layout/main/main.component.html
@@ -1,8 +1,6 @@
-<!-- <app-header></app-header> -->
 <div id="main-wrapper" class="d-flex container-fluid">
   <nav class="d-none custom-md-block">
     <div id="menu">
-      <!-- <div id="logo"></div> -->
       <div>
         <a href="/">
           <img class="logo" src="assets/img/it-academy.svg" alt="IT Academy" width="125">
diff --git a/src/app/core/layout/main/main.component.scss b/src/app/core/layout/main/main.component.scss
index 3b6e2d3d..b52839ec 100755
--- a/src/app/core/layout/main/main.component.scss
+++ b/src/app/core/layout/main/main.component.scss
@@ -18,7 +18,7 @@
       display: flex;
       flex-direction: column;
       max-width: fit-content;
-      position: sticky;
+      position: static;
       top: 14px;
       gap: 70px;
 
diff --git a/src/app/core/layout/main/main.component.spec.ts b/src/app/core/layout/main/main.component.spec.ts
index 8e7711f9..3bdca9a7 100755
--- a/src/app/core/layout/main/main.component.spec.ts
+++ b/src/app/core/layout/main/main.component.spec.ts
@@ -4,9 +4,10 @@ import { HeaderComponent } from '../header/header.component'
 import { MainMenuComponent } from '../main-menu/main-menu.component'
 import { RouterTestingModule } from '@angular/router/testing'
 import { FooterComponent } from '../footer/footer.component'
-import { I18nModule } from '../../../../assets/i18n/i18n.module'
+import { I18nModule } from 'src/assets/i18n/i18n.module'
 import { SharedComponentsModule } from '../../../shared/components/shared-components.module'
-import { MobileNavComponent } from '../../../core/layout/header/mobile-nav/mobile-nav.component'
+import { MobileNavComponent } from '../header/mobile-nav/mobile-nav.component'
+import { DesktopNavComponent } from '../header/desktop-nav/desktop-nav.component'
 
 describe('MainComponent', () => {
   let component: MainComponent
@@ -19,7 +20,8 @@ describe('MainComponent', () => {
         HeaderComponent,
         MainMenuComponent,
         FooterComponent,
-        MobileNavComponent
+        MobileNavComponent,
+        DesktopNavComponent
       ],
       imports: [
         RouterTestingModule,
diff --git a/src/app/modules/challenge/components/challenge-info/challenge-info.component.scss b/src/app/modules/challenge/components/challenge-info/challenge-info.component.scss
index 5dd79602..0b4b06d6 100755
--- a/src/app/modules/challenge/components/challenge-info/challenge-info.component.scss
+++ b/src/app/modules/challenge/components/challenge-info/challenge-info.component.scss
@@ -94,7 +94,6 @@ input[type="checkbox"] {
     height: 1.15em;
     border-radius: 50%;
     border: 2px solid $primary;
-    transform: translateY(0.15em);
     display: grid;
     place-content: center;
 
@@ -103,14 +102,9 @@ input[type="checkbox"] {
         width: 0.65em;
         height: 0.65em;
         border-radius: 50%;
-        transform: scale(0);
         background-color: $primary;
     }
 
-    &:checked::before {
-        transform: scale(1);
-    }
-
     &:focus-visible {
         outline: 0;
     }
diff --git a/src/app/modules/starter/components/starter/starter.component.scss b/src/app/modules/starter/components/starter/starter.component.scss
index ee8e56da..e432e4a8 100755
--- a/src/app/modules/starter/components/starter/starter.component.scss
+++ b/src/app/modules/starter/components/starter/starter.component.scss
@@ -79,7 +79,7 @@ app-starter-filters p {
    margin-bottom: 15px;
 }
 #filters-container {
-  position: sticky;
+  position: static;
   top: 40px;
   height: 100%;
   overflow-y: auto;
diff --git a/src/app/services/nav.service.spec.ts b/src/app/services/nav.service.spec.ts
new file mode 100644
index 00000000..f441bdd5
--- /dev/null
+++ b/src/app/services/nav.service.spec.ts
@@ -0,0 +1,79 @@
+import { TestBed } from '@angular/core/testing';
+import { NavService } from './nav.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+
+// Mock de NgbModal
+class MockNgbModal {
+  open() { return { result: Promise.resolve('closed') }; } // Simula el método `open`
+}
+
+// Mock de TranslateService
+class MockTranslateService {
+  private currentLang = 'ca';
+  private langs: string[] = [];
+
+  addLangs(langs: string[]) {
+    this.langs = langs;
+  }
+  
+  setDefaultLang(lang: string) {
+    this.currentLang = lang;
+  }
+  
+  use(lang: string) {
+    this.currentLang = lang;
+  }
+
+  getLangs() {
+    return this.langs;
+  }
+
+  getCurrentLang() {
+    return this.currentLang;
+  }
+}
+
+describe('NavService', () => {
+  let service: NavService;
+  let modalService: NgbModal;
+  let translateService: MockTranslateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        NavService,
+        { provide: NgbModal, useClass: MockNgbModal },
+        { provide: TranslateService, useClass: MockTranslateService }
+      ]
+    });
+    service = TestBed.inject(NavService);
+    modalService = TestBed.inject(NgbModal);
+    translateService = TestBed.inject(TranslateService) as unknown as MockTranslateService;
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should open the login modal', () => {
+    const modalSpy = spyOn(modalService, 'open').and.callThrough(); 
+    service.openLoginModal();
+    expect(modalSpy).toHaveBeenCalledWith(jasmine.any(Function), { centered: true, size: 'lg' });
+  });
+
+  it('should change the language and update selectWidth correctly', () => {
+    service.changeLanguage('es');
+    expect(translateService.getCurrentLang()).toBe('es');
+    expect(service.selectWidth).toBe('57px');
+
+    service.changeLanguage('ca');
+    expect(translateService.getCurrentLang()).toBe('ca');
+    expect(service.selectWidth).toBe('69px');
+  });
+
+  it('should set available languages and default language on creation', () => {
+    expect(translateService.getLangs()).toEqual(['en', 'es', 'ca']);
+    expect(translateService.getCurrentLang()).toBe('ca');
+  });
+});
diff --git a/src/app/services/nav.service.ts b/src/app/services/nav.service.ts
new file mode 100644
index 00000000..eb3bfe60
--- /dev/null
+++ b/src/app/services/nav.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoginModalComponent } from '../modules/modals/login-modal/login-modal.component';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NavService {
+  public selectWidth = '69px';
+
+  constructor(private readonly modalService: NgbModal, private readonly translate: TranslateService) {
+    this.translate.addLangs(['en', 'es', 'ca']);
+    this.translate.setDefaultLang('ca');
+    this.translate.use('ca');
+  }
+
+  openLoginModal(): void {
+    this.modalService.open(LoginModalComponent, { centered: true, size: 'lg' });
+  }
+
+  changeLanguage(language: string): void {
+    this.translate.use(language);
+    this.selectWidth = language === 'ca' ? '69px' : '57px';
+  }
+}
+