added browse component

frontend/src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { ImprintComponent } from './shared/components/legal-information/imprint/imprint.component';
 import { PrivacyPolicyComponent } from './shared/components/legal-information/privacy-policy/privacy-policy.component';
+import { BrowseComponent } from './components/home/browse/browse.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
@@ -10,4 +11,5 @@ export const routes: Routes = [
   { path: 'forgot-password', component: HomeComponent },
   { path: 'imprint', component: ImprintComponent },
   { path: 'privacy-policy', component: PrivacyPolicyComponent },
+  { path: 'browse', component: BrowseComponent },
 ];

frontend/src/app/components/home/browse/browse.component.html

@@ -0,0 +1,3 @@
+<section>
+  <app-header [browse]="true"></app-header>
+</section>

frontend/src/app/components/home/browse/browse.component.scss

@@ -0,0 +1,7 @@
+@import "./../../../../assets/style/colors.scss";
+
+section {
+  height: 100vh;
+  width: 100vw;
+  background-color: $black;
+}

frontend/src/app/components/home/browse/browse.component.spec.ts

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

frontend/src/app/components/home/browse/browse.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { HeaderComponent } from '../../../shared/components/header/header.component';
+
+@Component({
+  selector: 'app-browse',
+  standalone: true,
+  imports: [HeaderComponent],
+  templateUrl: './browse.component.html',
+  styleUrl: './browse.component.scss',
+})
+export class BrowseComponent {}

frontend/src/app/components/home/home.component.ts

@@ -7,6 +7,7 @@ import { RegisterComponent } from '../auth/register/register.component';
 import { CommonModule } from '@angular/common';
 import { LoginComponent } from '../auth/login/login.component';
 import { ForgotPasswordComponent } from '../auth/forgot-password/forgot-password.component';
+import { BrowseComponent } from './browse/browse.component';
 
 @Component({
   selector: 'app-home',
@@ -19,6 +20,7 @@ import { ForgotPasswordComponent } from '../auth/forgot-password/forgot-password
     RegisterComponent,
     LoginComponent,
     ForgotPasswordComponent,
+    BrowseComponent,
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',

frontend/src/app/shared/components/header/header.component.html

@@ -1,8 +1,17 @@
 <header>
+  @if (browse) {
+  <div class="logo" routerLink="/">
+    <img src="./../../../../assets/img/logo_ci.svg" alt="" />
+  </div>
+  <div class="btn">
+    <app-btn-large [value]="'Log Out'" routerLink="/logout"></app-btn-large>
+  </div>
+  } @else {
   <div class="logo" routerLink="/">
     <img src="./../../../../assets/img/logo_full.svg" alt="" />
   </div>
   <div class="btn">
     <app-btn-large [value]="'Log in'" routerLink="/login"></app-btn-large>
   </div>
+  }
 </header>

frontend/src/app/shared/components/header/header.component.scss

@@ -17,7 +17,7 @@ header {
   cursor: pointer;
   img {
     filter: drop-shadow(1px 1px 3px $black);
-    width: 200px;
+    width: auto;
     height: 32px;
   }
 }

frontend/src/app/shared/components/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input, input } from '@angular/core';
 import { BtnLargeComponent } from '../btn-large/btn-large.component';
 import { RouterLink } from '@angular/router';
 
@@ -9,4 +9,6 @@ import { RouterLink } from '@angular/router';
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  @Input() browse: boolean = false;
+}