added task menu (mobile view)

src/app/components/add-task/add-task.component.scss

@@ -252,7 +252,7 @@ p {
   background-color: var(--white);
   font-size: 20px;
   font-weight: 400;
-  width: 125px;
+  width: 100%;
   border-radius: 10px;
   border: 1px solid var(--light-gray);
   padding: 10px 16px;

src/app/components/board/details/details.component.html

@@ -1 +0,0 @@
-<p>details works!</p>

src/app/components/board/details/details.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-details',
-  standalone: true,
-  imports: [],
-  templateUrl: './details.component.html',
-  styleUrl: './details.component.scss'
-})
-export class DetailsComponent {
-
-}

src/app/components/board/task/task-menu/task-menu.component.html

@@ -0,0 +1,12 @@
+<section>
+  <p>Move to:</p>
+  @if (boardTaskStatus !== 'todo') {
+  <p (click)="moveTask('todo')">To do</p>
+  } @if (boardTaskStatus !== 'inprogress') {
+  <p (click)="moveTask('inprogress')">In progress</p>
+  } @if (boardTaskStatus !== 'awaitfeedback') {
+  <p (click)="moveTask('awaitfeedback')">Await feedback</p>
+  } @if (boardTaskStatus !== 'done') {
+  <p (click)="moveTask('done')">Done</p>
+  }
+</section>

src/app/components/board/task/task-menu/task-menu.component.scss

@@ -0,0 +1,32 @@
+section {
+  position: absolute;
+  top: 30px;
+  left: 40px;
+  text-align: center;
+  width: fit-content;
+  height: fit-content;
+  background-color: var(--white);
+  border-radius: 20px 0 20px 20px;
+  border: 1px solid rgba($color: #000000, $alpha: 0.2);
+  padding: 12px;
+  p {
+    font-size: 18px;
+    font-weight: 400;
+    padding-bottom: 3px;
+    color: var(--light-blue);
+    cursor: pointer;
+    &:first-child {
+      font-size: 18px;
+      font-weight: 600;
+      padding-bottom: 6px;
+      cursor: auto;
+      color: var(--black);
+    }
+    &:hover {
+      text-decoration: underline;
+      &:first-child {
+        text-decoration: none;
+      }
+    }
+  }
+}

src/app/components/board/task/task-menu/task-menu.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DetailsComponent } from './details.component';
+import { TaskMenuComponent } from './task-menu.component';
 
-describe('DetailsComponent', () => {
-  let component: DetailsComponent;
-  let fixture: ComponentFixture<DetailsComponent>;
+describe('TaskMenuComponent', () => {
+  let component: TaskMenuComponent;
+  let fixture: ComponentFixture<TaskMenuComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DetailsComponent]
+      imports: [TaskMenuComponent]
     })
     .compileComponents();
     
-    fixture = TestBed.createComponent(DetailsComponent);
+    fixture = TestBed.createComponent(TaskMenuComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/components/board/task/task-menu/task-menu.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-task-menu',
+  standalone: true,
+  imports: [],
+  templateUrl: './task-menu.component.html',
+  styleUrl: './task-menu.component.scss',
+})
+export class TaskMenuComponent {
+  @Input() boardTaskStatus: string = '';
+
+  moveTask(moveTo: string) {
+    console.log(moveTo);
+  }
+}

src/app/components/board/task/task.component.html

@@ -1,15 +1,27 @@
-<section (click)="openTaskDetailsOverlay(task.id)">
+<section (click)="handleMenuButtonClick($event, task.id)">
   <div
     class="content"
     draggable="true"
     (dragstart)="dragDropService.startDragging($event, task.id)"
   >
+    <div class="header">
       <div
         class="category"
         [style.background-color]="categoryColors.get(task.category)"
       >
         {{ task.category }}
       </div>
+      <div
+        class="menu-btn"
+        (click)="handleMenuButtonClick($event, task.status)"
+      >
+        <img
+          class="menu-img"
+          src="./../../../../assets/img/board/menu.svg"
+          alt="menu"
+        />
+      </div>
+    </div>
     <div class="headline">{{ task.title }}</div>
     <div class="description">
       {{ task.description }}
@@ -40,4 +52,7 @@
       <div class="footer-priority prio-{{ task.priority }}"></div>
     </div>
   </div>
+  @if (isMenuOpen){
+  <app-task-menu [boardTaskStatus]="task.status"></app-task-menu>
+  }
 </section>

src/app/components/board/task/task.component.scss

@@ -1,6 +1,7 @@
 section {
   width: 246px;
   margin: 15.5px 0;
+  position: relative;
 }
 
 .content {
@@ -20,22 +21,41 @@ section {
   }
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   .category {
-  position: absolute;
+    width: fit-content;
     font-size: 16px;
-  top: 16px;
-  left: 16px;
     padding: 4px 16px;
     border-radius: 8px;
     color: var(--white);
     text-shadow: 1px 1px 2px var(--black);
   }
+  .menu-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 12px;
+    img {
+      height: 16px;
+      width: auto;
+    }
+    &:hover {
+      img {
+        filter: brightness(0) saturate(100%) invert(56%) sepia(64%)
+          saturate(570%) hue-rotate(154deg) brightness(92%) contrast(92%);
+      }
+    }
+  }
+}
 
 .headline {
   color: var(--dark-blue);
   font-size: 16px;
   font-weight: 700;
-  margin-top: 40px;
+  margin-top: 12px;
 }
 
 .description {

src/app/components/board/task/task.component.ts

@@ -1,20 +1,25 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { DragDropService } from '../../../services/drag-drop.service';
 import { Task } from '../../../interfaces/task.interface';
 import { FirebaseService } from '../../../services/firebase.service';
 import { OverlayService } from '../../../services/overlay.service';
 import { Router } from '@angular/router';
+import { TaskMenuComponent } from './task-menu/task-menu.component';
 
 @Component({
   selector: 'app-task',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TaskMenuComponent],
   templateUrl: './task.component.html',
   styleUrl: './task.component.scss',
 })
-export class TaskComponent {
-  @Input() task!: Task;
+export class TaskComponent implements OnInit, OnDestroy {
+  @Input() task: Task = {} as Task;
+  private resizeListener!: () => void;
+
+  isPageViewMedia: boolean = window.innerWidth <= 650;
+  isMenuOpen: boolean = false;
 
   categoryColors = new Map<string, string>([
     ['User Story', '#0038ff'],
@@ -28,12 +33,36 @@ export class TaskComponent {
     private router: Router
   ) {}
 
-  openTaskDetailsOverlay(taskId: string | undefined) {
-    if (window.innerWidth >= 650) {
-      this.overlayService.setOverlayData('taskOverlay', taskId);
-    } else {
-      this.router.navigate(['/task', taskId]);
+  ngOnInit() {
+    this.resizeListener = this.onResize.bind(this);
+    window.addEventListener('resize', this.resizeListener);
   }
+
+  ngOnDestroy() {
+    window.removeEventListener('resize', this.resizeListener);
+  }
+
+  onResize() {
+    this.isPageViewMedia = window.innerWidth <= 650;
+  }
+
+  handleMenuButtonClick(event: MouseEvent, taskIdOrStatus: string | undefined) {
+    event.stopPropagation();
+    const targetElement = event.target as HTMLElement;
+    targetElement.classList.contains('menu-btn') ||
+    targetElement.classList.contains('menu-img')
+      ? this.openTaskMenu(taskIdOrStatus)
+      : this.openTaskDetailsOverlay(taskIdOrStatus);
+  }
+
+  openTaskMenu(taskStatus: string | undefined) {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  openTaskDetailsOverlay(taskId: string | undefined) {
+    this.isPageViewMedia
+      ? this.router.navigate(['/task', taskId])
+      : this.overlayService.setOverlayData('taskOverlay', taskId);
   }
 
   // Subtasks

src/assets/img/board/menu.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14C0 13.45 0.195833 12.9792 0.5875 12.5875C0.979167 12.1958 1.45 12 2 12C2.55 12 3.02083 12.1958 3.4125 12.5875C3.80417 12.9792 4 13.45 4 14C4 14.55 3.80417 15.0208 3.4125 15.4125C3.02083 15.8042 2.55 16 2 16ZM2 10C1.45 10 0.979167 9.80417 0.5875 9.4125C0.195833 9.02083 0 8.55 0 8C0 7.45 0.195833 6.97917 0.5875 6.5875C0.979167 6.19583 1.45 6 2 6C2.55 6 3.02083 6.19583 3.4125 6.5875C3.80417 6.97917 4 7.45 4 8C4 8.55 3.80417 9.02083 3.4125 9.4125C3.02083 9.80417 2.55 10 2 10ZM2 4C1.45 4 0.979167 3.80417 0.5875 3.4125C0.195833 3.02083 0 2.55 0 2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0C2.55 0 3.02083 0.195833 3.4125 0.5875C3.80417 0.979167 4 1.45 4 2C4 2.55 3.80417 3.02083 3.4125 3.4125C3.02083 3.80417 2.55 4 2 4Z" fill="#1C1B1F"/>
+</svg>