added assigned menu component

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

@@ -55,6 +55,18 @@
             }
           </div>
         </div>
+        <div class="assigned">
+          <p>Assigned to</p>
+          <input
+            class="searchfield"
+            type="text"
+            autocomplete="off"
+            (click)="toggleAssignedMenu()"
+          />
+          @if (isAssignedOpen) {
+          <app-assigned></app-assigned>
+          }
+        </div>
       </div>
       <div class="middle-spacer"><div class="line"></div></div>
       <div class="right-side">

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

@@ -57,6 +57,10 @@ p {
   width: 45%;
 }
 
+.assigned {
+  position: relative;
+}
+
 /*------------- MIDDLE -------------*/
 
 .middle-spacer {

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

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
-import { Component, ViewChild } from '@angular/core';
+import { Component, HostListener, ViewChild } from '@angular/core';
 import { FormsModule, NgForm, NgModel } from '@angular/forms';
+import { AssignedComponent } from './assigned/assigned.component';
 
 @Component({
   selector: 'app-add-task',
   standalone: true,
-  imports: [FormsModule, CommonModule],
+  imports: [FormsModule, CommonModule, AssignedComponent],
   templateUrl: './add-task.component.html',
   styleUrl: './add-task.component.scss',
 })
@@ -16,6 +17,7 @@ export class AddTaskComponent {
 
   currentDate: string = new Date().toISOString().split('T')[0];
   dateInPast: boolean = false;
+  isAssignedOpen: boolean = false;
 
   taskData = {
     title: '',
@@ -32,6 +34,10 @@ export class AddTaskComponent {
     }
   }
 
+  toggleAssignedMenu() {
+    this.isAssignedOpen = !this.isAssignedOpen;
+  }
+
   checkDateInput() {
     const currentDateForm = this.taskData.date.replaceAll('-', '');
     const currentDate = new Date()
@@ -79,4 +85,12 @@ export class AddTaskComponent {
       this.removeTaskData();
     }
   }
+
+  @HostListener('document:click', ['$event'])
+  checkOpenNavbar(event: MouseEvent) {
+    const targetElement = event.target as HTMLElement;
+    if (!targetElement.closest('.assigned')) {
+      this.isAssignedOpen = false;
+    }
+  }
 }

src/app/components/add-task/assigned/assigned.component.html

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

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

@@ -0,0 +1,14 @@
+section {
+  position: absolute;
+  top: 70px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: auto;
+  padding-top: 12px;
+  border-radius: 0px 0px 20px 20px;
+  border: 1px solid var(--light-gray);
+  border-top: 0px;
+  background-color: var(--white);
+  overflow: auto;
+}

src/app/components/add-task/assigned/assigned.component.spec.ts

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

src/app/components/add-task/assigned/assigned.component.ts

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